Difference Chart: Clipping and Adding the Areas
Explore how to create difference charts using D3.js by applying clipping paths and filling areas between lines. Learn to define intersecting shapes, color these regions appropriately, and overlay lines and axes to produce clear, interactive visualizations showcasing data differences.
We'll cover the following...
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 ...