D3 Tips and Tricks: Interactive Data Visualization/

...

/

Difference Chart: Clipping and Adding the Areas

Difference Chart: Clipping and Adding the Areas

Learn how to clip and add areas to your difference chart to create different shapes.

We'll cover the following...

The code

date_entered,downloaded,book_name
2015-04-19,5481,R Programming for Data Science
2015-04-19,23751,The Elements of Data Analytic Style
2015-04-20,5691,R Programming for Data Science
2015-04-20,23782,The Elements of Data Analytic Style
2015-04-21,6379,R Programming for Data Science
2015-04-21,23820,The Elements of Data Analytic Style
2015-04-22,7281,R Programming for Data Science
2015-04-22,23857,The Elements of Data Analytic Style
2015-04-23,7554,R Programming for Data Science
2015-04-23,23881,The Elements of Data Analytic Style
2015-04-24,9331,R Programming for Data Science
2015-04-24,23932,The Elements of Data Analytic Style
2015-04-25,9614,R Programming for Data Science
2015-04-25,23961,The Elements of Data Analytic Style
2015-04-26,9785,R Programming for Data Science
2015-04-26,23978,The Elements of Data Analytic Style
2015-04-27,9951,R Programming for Data Science
2015-04-27,24001,The Elements of Data Analytic Style
2015-04-28,10087,R Programming for Data Science
2015-04-28,24018,The Elements of Data Analytic Style
2015-04-29,11039,R Programming for Data Science
2015-04-29,24061,The Elements of Data Analytic Style
2015-04-30,11906,R Programming for Data Science
2015-04-30,24102,The Elements of Data Analytic Style
2015-05-01,12210,R Programming for Data Science
2015-05-01,24130,The Elements of Data Analytic Style
2015-05-02,12424,R Programming for Data Science
2015-05-02,24148,The Elements of Data Analytic Style
2015-05-03,12588,R Programming for Data Science
2015-05-03,24160,The Elements of Data Analytic Style
2015-05-04,12903,R Programming for Data Science
2015-05-04,24181,The Elements of Data Analytic Style
2015-05-05,13198,R Programming for Data Science
2015-05-05,24229,The Elements of Data Analytic Style
2015-05-06,13445,R Programming for Data Science
2015-05-06,24260,The Elements of Data Analytic Style
2015-05-07,13646,R Programming for Data Science
2015-05-07,24508,The Elements of Data Analytic Style
2015-05-08,13853,R Programming for Data Science
2015-05-08,25220,The Elements of Data Analytic Style
2015-05-09,13967,R Programming for Data Science
2015-05-09,25327,The Elements of Data Analytic Style
2015-05-10,14084,R Programming for Data Science
2015-05-10,25408,The Elements of Data Analytic Style
2015-05-11,14216,R Programming for Data Science
2015-05-11,25475,The Elements of Data Analytic Style
2015-05-12,15302,R Programming for Data Science
2015-05-12,25560,The Elements of Data Analytic Style
2015-05-13,15674,R Programming for Data Science
2015-05-13,25602,The Elements of Data Analytic Style
2015-05-14,15995,R Programming for Data Science
2015-05-14,25648,The Elements of Data Analytic Style
2015-05-15,16209,R Programming for Data Science
2015-05-15,25681,The Elements of Data Analytic Style
2015-05-16,16388,R Programming for Data Science
2015-05-16,25714,The Elements of Data Analytic Style
2015-05-17,16527,R Programming for Data Science
2015-05-17,25737,The Elements of Data Analytic Style
2015-05-18,16705,R Programming for Data Science
2015-05-18,25759,The Elements of Data Analytic Style
2015-05-19,16856,R Programming for Data Science
2015-05-19,25777,The Elements of Data Analytic Style
2015-05-20,17006,R Programming for Data Science
2015-05-20,25803,The Elements of Data Analytic Style
2015-05-21,17124,R Programming for Data Science
2015-05-21,25821,The Elements of Data Analytic Style
2015-05-22,17253,R Programming for Data Science
2015-05-22,25836,The Elements of Data Analytic Style
2015-05-23,17341,R Programming for Data Science
2015-05-23,25850,The Elements of Data Analytic Style
2015-05-24,17424,R Programming for Data Science
2015-05-24,25865,The Elements of Data Analytic Style
2015-05-25,17522,R Programming for Data Science
2015-05-25,25884,The Elements of Data Analytic Style
2015-05-26,17643,R Programming for Data Science
2015-05-26,25901,The Elements of Data Analytic Style
2015-05-27,17791,R Programming for Data Science
2015-05-27,25911,The Elements of Data Analytic Style
2015-05-28,17948,R Programming for Data Science
2015-05-28,25927,The Elements of Data Analytic Style
2015-05-29,18071,R Programming for Data Science
2015-05-29,25934,The Elements of Data Analytic Style
2015-05-30,18192,R Programming for Data Science
2015-05-30,25944,The Elements of Data Analytic Style
2015-05-31,18299,R Programming for Data Science
2015-05-31,25951,The Elements of Data Analytic Style
2015-06-01,18541,R Programming for Data Science
2015-06-01,25966,The Elements of Data Analytic Style
2015-06-02,18838,R Programming for Data Science
2015-06-02,25982,The Elements of Data Analytic Style
2015-06-03,19032,R Programming for Data Science
2015-06-03,25984,The Elements of Data Analytic Style
2015-06-04,19157,R Programming for Data Science
2015-06-04,25995,The Elements of Data Analytic Style
2015-06-05,19302,R Programming for Data Science
2015-06-05,26006,The Elements of Data Analytic Style
2015-06-06,19399,R Programming for Data Science
2015-06-06,26019,The Elements of Data Analytic Style
2015-06-07,19497,R Programming for Data Science
2015-06-07,26028,The Elements of Data Analytic Style
2015-06-08,19602,R Programming for Data Science
2015-06-08,26042,The Elements of Data Analytic Style
2015-06-09,20445,R Programming for Data Science
2015-06-09,26715,The Elements of Data Analytic Style
2015-06-10,20773,R Programming for Data Science
2015-06-10,26902,The Elements of Data Analytic Style
2015-06-11,21005,R Programming for Data Science
2015-06-11,26984,The Elements of Data Analytic Style
2015-06-12,21185,R Programming for Data Science
2015-06-12,27019,The Elements of Data Analytic Style
2015-06-13,21331,R Programming for Data Science
2015-06-13,27045,The Elements of Data Analytic Style
2015-06-14,21462,R Programming for Data Science
2015-06-14,27078,The Elements of Data Analytic Style
2015-06-15,21609,R Programming for Data Science
2015-06-15,27103,The Elements of Data Analytic Style
2015-06-16,21751,R Programming for Data Science
2015-06-16,27137,The Elements of Data Analytic Style
2015-06-17,21904,R Programming for Data Science
2015-06-17,27157,The Elements of Data Analytic Style
2015-06-18,22083,R Programming for Data Science
2015-06-18,27190,The Elements of Data Analytic Style
2015-06-19,22244,R Programming for Data Science
2015-06-19,27213,The Elements of Data Analytic Style
2015-06-20,22349,R Programming for Data Science
2015-06-20,27227,The Elements of Data Analytic Style
2015-06-21,22447,R Programming for Data Science
2015-06-21,27239,The Elements of Data Analytic Style
2015-06-22,22557,R Programming for Data Science
2015-06-22,27254,The Elements of Data Analytic Style
2015-06-23,22699,R Programming for Data Science
2015-06-23,28492,The Elements of Data Analytic Style
2015-06-24,22836,R Programming for Data Science
2015-06-24,28907,The Elements of Data Analytic Style
2015-06-25,22955,R Programming for Data Science
2015-06-25,29153,The Elements of Data Analytic Style
2015-06-26,23061,R Programming for Data Science
2015-06-26,29316,The Elements of Data Analytic Style
2015-06-27,23283,R Programming for Data Science
2015-06-27,29546,The Elements of Data Analytic Style
2015-06-28,23500,R Programming for Data Science
2015-06-28,29753,The Elements of Data Analytic Style
2015-06-29,23755,R Programming for Data Science
2015-06-29,30044,The Elements of Data Analytic Style
2015-06-30,24034,R Programming for Data Science
2015-06-30,30232,The Elements of Data Analytic Style
2015-07-01,24238,R Programming for Data Science
2015-07-01,30377,The Elements of Data Analytic Style
2015-07-02,24408,R Programming for Data Science
2015-07-02,30464,The Elements of Data Analytic Style
2015-07-03,24572,R Programming for Data Science
2015-07-03,30527,The Elements of Data Analytic Style
2015-07-04,24708,R Programming for Data Science
2015-07-04,30584,The Elements of Data Analytic Style
2015-07-05,24849,R Programming for Data Science
2015-07-05,30625,The Elements of Data Analytic Style
2015-07-06,25102,R Programming for Data Science
2015-07-06,30694,The Elements of Data Analytic Style
2015-07-07,25429,R Programming for Data Science
2015-07-07,30748,The Elements of Data Analytic Style
2015-07-08,25685,R Programming for Data Science
2015-07-08,30891,The Elements of Data Analytic Style
2015-07-09,25874,R Programming for Data Science
2015-07-09,31245,The Elements of Data Analytic Style
2015-07-10,26589,R Programming for Data Science
2015-07-10,31377,The Elements of Data Analytic Style
2015-07-11,26983,R Programming for Data Science
2015-07-11,31468,The Elements of Data Analytic Style
2015-07-12,27258,R Programming for Data Science
2015-07-12,31563,The Elements of Data Analytic Style
2015-07-13,27602,R Programming for Data Science
2015-07-13,31632,The Elements of Data Analytic Style
2015-07-14,27835,R Programming for Data Science
2015-07-14,31703,The Elements of Data Analytic Style
2015-07-15,28068,R Programming for Data Science
2015-07-15,31776,The Elements of Data Analytic Style
2015-07-16,28395,R Programming for Data Science
2015-07-16,31874,The Elements of Data Analytic Style
2015-07-17,28601,R Programming for Data Science
2015-07-17,31924,The Elements of Data Analytic Style
2015-07-18,28734,R Programming for Data Science
2015-07-18,31968,The Elements of Data Analytic Style
2015-07-19,28857,R Programming for Data Science
2015-07-19,31995,The Elements of Data Analytic Style
2015-07-20,29017,R Programming for Data Science
2015-07-20,32031,The Elements of Data Analytic Style
2015-07-21,29213,R Programming for Data Science
2015-07-21,32070,The Elements of Data Analytic Style
2015-07-22,29415,R Programming for Data Science
2015-07-22,32109,The Elements of Data Analytic Style
2015-07-23,29493,R Programming for Data Science
2015-07-23,32127,The Elements of Data Analytic Style
Difference chart code

Explanation

Now, we come to clipping our shape and filling it with the appropriate color.

Lines 119-122: We do this by having a shape that represents the area between the two lines and applying our clip path for the values above and below our ...