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
<!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("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")
.style("fill", "black")
.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>
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