Skip to content

Instantly share code, notes, and snippets.

@domezchoc

domezchoc/downloads.csv

Forked from d3noob/.block
Created November 25, 2019 16:56
Show Gist options
  • Save domezchoc/6fa5356c0d524e9de166cb0df8dbfc7a to your computer and use it in GitHub Desktop.
Save domezchoc/6fa5356c0d524e9de166cb0df8dbfc7a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Building blocks revised this gist Sep 11, 2015. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. @d3noob d3noob revised this gist Jul 25, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -122,7 +122,7 @@
    svg.append("path")
    .attr("class", "area below")
    .attr("clip-path", "url(#clip-below)")
    .attr("d", area);
    .attr("d", area.y0(function(d) { return y(d["Style"]); }));

    svg.append("path")
    .attr("class", "line")
  3. @d3noob d3noob revised this gist Jul 23, 2015. No changes.
  4. @d3noob d3noob revised this gist Jul 23, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    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-Tips-and-Tricks).
    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-Tips-and-Tricks). 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

  5. @d3noob d3noob revised this gist Jul 23, 2015. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    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-Tips-and-Tricks).

    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

    There is an explanation of the code available in [D3 Tips and Tricks](https://leanpub.com/D3-Tips-and-Tricks)
  6. @d3noob d3noob created this gist Jul 23, 2015.
    193 changes: 193 additions & 0 deletions downloads.csv
    View file
    Original file line number Diff line number Diff line change
    @@ -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
    149 changes: 149 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,149 @@
    <!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="http://d3js.org/d3.v3.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.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(); // 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);

    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>