| license: mit |
The graph above shows an example of a difference chart used as an example in the book D3 Tips and Tricks. It is based on the simple difference chart example here.
The graph shows the difference in the number of daily downloads between R Programming for Data Science by Roger Peng and The Elements of Data Analytic Style by Jeff Leek. The respective books can be found as links from the legend or the appropriate graph area.
There is an explanation of the code available in D3 Tips and Tricks
| 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 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { font: 10px sans-serif;} | |
| text.shadow { | |
| stroke: white; | |
| stroke-width: 2px; | |
| opacity: 0.9; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { display: none; } | |
| .area.above { fill: rgb(252,141,89); } | |
| .area.below { fill: rgb(145,207,96); } | |
| .line { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <script> | |
| var title = "Science vs Style - Daily Leanpub Book Sales"; | |
| var margin = {top: 20, right: 20, bottom: 50, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var parsedtg = d3.time.format("%Y-%m-%d").parse; | |
| var x = d3.time.scale() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var lineScience = d3.svg.area() | |
| .interpolate("basis") | |
| .x(function(d) { return x(d.dtg); }) | |
| .y(function(d) { return y(d["Science"]); }); | |
| var lineStyle = d3.svg.area() | |
| .interpolate("basis") | |
| .x(function(d) { return x(d.dtg); }) | |
| .y(function(d) { return y(d["Style"]); }); | |
| var area = d3.svg.area() | |
| .interpolate("basis") | |
| .x(function(d) { return x(d.dtg); }) | |
| .y1(function(d) { return y(d["Science"]); }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("downloads.csv", function(error, dataNest) { | |
| dataNest.forEach(function(d) { | |
| d.dtg = parsedtg(d.date_entered); | |
| d.downloaded = +d.downloaded; | |
| }); | |
| var data = d3.nest() | |
| .key(function(d) {return d.dtg;}) | |
| .entries(dataNest); | |
| data.forEach(function(d) { | |
| d.dtg = d.values[0]['dtg']; | |
| d["Science"] = d.values[0]['downloaded']; | |
| d["Style"] = d.values[1]['downloaded']; | |
| }); | |
| for(i=data.length-1;i>0;i--) { | |
| data[i].Science = data[i].Science -data[(i-1)].Science ; | |
| data[i].Style = data[i].Style -data[(i-1)].Style ; | |
| } | |
| data.shift(); | |
| x.domain(d3.extent(data, function(d) { return d.dtg; })); | |
| y.domain([ | |
| // d3.min(data, function(d) { | |
| // return Math.min(d["Science"], d["Style"]); }), | |
| // d3.max(data, function(d) { | |
| // return Math.max(d["Science"], d["Style"]); }) | |
| 0,1400 | |
| ]); | |
| svg.datum(data); | |
| svg.append("clipPath") | |
| .attr("id", "clip-below") | |
| .append("path") | |
| .attr("d", area.y0(height)); | |
| svg.append("clipPath") | |
| .attr("id", "clip-above") | |
| .append("path") | |
| .attr("d", area.y0(0)); | |
| svg.append("a") | |
| .attr("xlink:href", "https://leanpub.com/datastyle") | |
| .append("path") | |
| .attr("class", "area above") | |
| .attr("clip-path", "url(#clip-above)") | |
| .attr("d", area.y0(function(d) { return y(d["Style"]); })); | |
| svg.append("a") | |
| .attr("xlink:href", "https://leanpub.com/rprogramming") | |
| .append("path") | |
| .attr("class", "area below") | |
| .attr("clip-path", "url(#clip-below)") | |
| .attr("d", area.y0(function(d) { return y(d["Style"]); })); | |
| svg.append("path") | |
| .attr("class", "line") | |
| .style("stroke", "darkgreen") | |
| .attr("d", lineScience); | |
| svg.append("path") | |
| .attr("class", "line") | |
| .style("stroke", "red") | |
| .attr("d", lineStyle); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Daily Downloads from Leanpub"); | |
| // ******* Title Block ******** | |
| svg.append("text") // Title shadow | |
| .attr("x", (width / 2)) | |
| .attr("y", 50 ) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "30px") | |
| .attr("class", "shadow") | |
| .text(title); | |
| svg.append("text") // Title | |
| .attr("x", (width / 2)) | |
| .attr("y", 50 ) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "30px") | |
| .style("stroke", "none") | |
| .text(title); | |
| // ******* Legend Block ******** | |
| var block = 300; // rectangle width and position | |
| svg.append("rect") // Style Legend Rectangle | |
| .attr("x", ((width / 2)/2)-(block/2)) | |
| .attr("y", height+(margin.bottom/2) ) | |
| .attr("width", block) | |
| .attr("height", "25") | |
| .attr("class", "area above"); | |
| svg.append("rect") // Science Legend Rectangle | |
| .attr("x", ((width / 2)/2)+(width / 2)-(block/2)) | |
| .attr("y", height+(margin.bottom/2) ) | |
| .attr("width", block) | |
| .attr("height", "25") | |
| .attr("class", "area below"); | |
| svg.append("text") // Style Legend Text shadow | |
| .attr("x", ((width / 2)/2)) | |
| .attr("y", height+(margin.bottom/2) + 5) | |
| .attr("dy", ".71em") | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "18px") | |
| .attr("class", "shadow") | |
| .text("The Elements of Data Analytic Style"); | |
| svg.append("text") // Science Legend Text shadow | |
| .attr("x", ((width / 2)/2)+(width / 2)) | |
| .attr("y", height+(margin.bottom/2) + 5) | |
| .attr("dy", ".71em") | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "18px") | |
| .attr("class", "shadow") | |
| .text("R Programming for Data Science"); | |
| svg.append("a") | |
| .attr("xlink:href", "https://leanpub.com/datastyle") | |
| .append("text") // Style Legend Text | |
| .attr("x", ((width / 2)/2)) | |
| .attr("y", height+(margin.bottom/2) + 5) | |
| .attr("dy", ".71em") | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "18px") | |
| .style("stroke", "none") | |
| .text("The Elements of Data Analytic Style"); | |
| svg.append("a") | |
| .attr("xlink:href", "https://leanpub.com/rprogramming") | |
| .append("text") // Science Legend Text | |
| .attr("x", ((width / 2)/2)+(width / 2)) | |
| .attr("y", height+(margin.bottom/2) + 5) | |
| .attr("dy", ".71em") | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "18px") | |
| .style("stroke", "none") | |
| .text("R Programming for Data Science"); | |
| }); | |
| </script> | |
| </body> |
It sounds like you're doing the right thing. Could you confirm whether could you please confirm that the pages are working in the bl.ock and on blockbuilder ? That will tell us if there is a problem with the code or something unusual about your implementation.
CORS error was prompted, hence currently, instead of calling csv from local drive, i have loaded csv in Javascript as string & parsed
I will assume then that the bl.ock and blockbuilder pages wer loading correctly. If you were recieving a CORS error while trying to load the csv file that was in the same directory as your index.html, that is a problem that I do not know the answer to. Loading the data in the script is a good mitigation, but not sustainainable in the longer term. If you have a chance, post your code into a question on stackoverflow and some of the experts there could assist.
I have downloaded csv & placed in same folder where index.html is place