block by d3noob 46741cda198699399951fc811e3f5967

Simple Difference Chart v5

Full Screen

The graph above shows a simple example of a difference chart used as an example in the book D3 Tips and Tricks. It is based on the difference chart example produced by Mike Bostock.

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

index.html

<!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.v5.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 = 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(); // 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>

downloads.csv

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