d3noob · June 19, 2021 08:47 · Jun 19, 2021 · Jun 19, 2021
diff --git a/README.md b/README.md
@@ -1,6 +1,3 @@
-The graph above shows a simple example of a difference chart used as an example in the book [D3 Tips and Tricks](https://leanpub.com/d3-t-and-t-v6). It is based on the difference chart [example produced by Mike Bostock](http://bl.ocks.org/mbostock/3894205). 
+The graph above shows a simple example of a difference chart used as an example in the book [D3 Tips and Tricks](https://leanpub.com/d3-t-and-t-v7). It is based on the difference chart [example produced by Mike Bostock](http://bl.ocks.org/mbostock/3894205). 
 
 The graph shows the difference in the number of daily downloads between [R Programming for Data Science](https://leanpub.com/rprogramming) by Roger Peng and [The Elements of Data Analytic Style](https://leanpub.com/datastyle) by Jeff Leek
-
-
-forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/3cfe0a8724105d1465e9da6a294ee2d9'>Simple Difference Chart v7</a>
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: mit
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+The graph above shows a simple example of a difference chart used as an example in the book [D3 Tips and Tricks](https://leanpub.com/d3-t-and-t-v6). It is based on the difference chart [example produced by Mike Bostock](http://bl.ocks.org/mbostock/3894205). 
+
+The graph shows the difference in the number of daily downloads between [R Programming for Data Science](https://leanpub.com/rprogramming) by Roger Peng and [The Elements of Data Analytic Style](https://leanpub.com/datastyle) by Jeff Leek
+
+
+forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/3cfe0a8724105d1465e9da6a294ee2d9'>Simple Difference Chart v7</a>
diff --git a/downloads.csv b/downloads.csv
@@ -0,0 +1,193 @@
+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
diff --git a/index.html b/index.html
@@ -0,0 +1,151 @@
+<!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://d3js.org/d3.v7.min.js"></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.timeParse("%Y-%m-%d");
+
+var x = d3.scaleTime().range([0, width]);
+var y = d3.scaleLinear().range([height, 0]);
+
+var xAxis = d3.axisBottom().scale(x);
+
+var yAxis = d3.axisLeft().scale(y);
+
+var lineScience = d3.area()
+    .curve(d3.curveBasis)
+    .x(function(d) { return x(d.dtg); })
+    .y(function(d) { return y(d["Science"]); });
+
+var lineStyle = d3.area()
+    .curve(d3.curveBasis)
+    .x(function(d) { return x(d.dtg); })
+    .y(function(d) { return y(d["Style"]); });
+
+var area = d3.area()
+    .curve(d3.curveBasis)
+    .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").then(function(dataNest) {
+
+  dataNest.forEach(function(d) {
+      d.dtg = parsedtg(d.date_entered);
+      d.downloaded = +d.downloaded;
+  });
+
+  var data = Array.from(
+	    d3.group(dataNest, d => d.date_entered), 
+	            ([key, value]) => ({key, value})
+	);
+
+  data.forEach(function(d) {
+      d.dtg = d.value[0]['dtg'];
+      d["Science"] = d.value[0]['downloaded'];
+      d["Style"] = d.value[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(); // Removes the first element in the array
+
+    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-above")
+      .append("path")
+        .attr("d", area.y0(0));
+
+    svg.append("clipPath")
+        .attr("id", "clip-below")
+      .append("path")
+        .attr("d", area.y0(height));
+
+    svg.append("path")
+        .attr("class", "area above")
+        .attr("clip-path", "url(#clip-above)")
+        .attr("d", area.y0(function(d) { return y(d["Style"]); }));
+
+    svg.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);
+
+});
+
+</script>
+</body>