Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active December 5, 2019 17:15
Show Gist options
  • Save d3noob/f6d8588a0aa3a7503f57 to your computer and use it in GitHub Desktop.
Save d3noob/f6d8588a0aa3a7503f57 to your computer and use it in GitHub Desktop.
Full Difference Chart Example
license: mit
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>
@apanasara
Copy link

error in d3.csv : dataNest variable not getting populated thru csv

image

@d3noob
Copy link
Author

d3noob commented Dec 3, 2019

Thanks, but the code appears to be working in the bl.ock and on blockbuilder and I don't see any errors in the console. Can you confirm that both are working correctly for you? If you are running locally, have you downloaded the csv?

@apanasara
Copy link

I have downloaded csv & placed in same folder where index.html is place

@d3noob
Copy link
Author

d3noob commented Dec 4, 2019

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.

@apanasara
Copy link

CORS error was prompted, hence currently, instead of calling csv from local drive, i have loaded csv in Javascript as string & parsed

@d3noob
Copy link
Author

d3noob commented Dec 5, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment