A graph of the rate of download of some of the books in the top downloads category of Leanpub.
The data is extrapolated to allow the mouse move tooltip to determine when certain events (like one book overhauling another) will occur.
You will probably want to open it in full screen :-).
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>
var margin = {top: 30, right: 50, bottom: 30, left: 60},
width = 1900 - margin.left - margin.right,
height = 870 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse,
formatDate = d3.time.format("%d-%b"),
bisectDate = d3.bisector(function(d) { return d.date; }).left;
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").ticks(8);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.bt); });
var valueline2 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.tnbb); });
var valueline3 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.hon); });
var valueline4 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.d3tat); });
var valueline5 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.htdwyl); });
var valueline6 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.watir); });
var valueline7 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.lh); });
var valueline8 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.taopwi); });
var valueline9 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.qgffoad); });
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 + ")");
var focus = svg.append("g")
.style("display", "none");
// Get the data
d3.csv("books2dayEX.csv", function(error, data){
data.forEach(function(d) {
d.date = parseDate(d.date);
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
// console.log(data);
y.domain([
d3.min(data, function(d) { return Math.min(d.bt,d.tnbb,d.hon,d.d3tat,d.htdwyl,d.watir,d.lh,d.taopwi,d.qgffoad); }),
d3.max(data, function(d) { return Math.max(d.bt,d.tnbb,d.hon,d.d3tat,d.htdwyl,d.watir,d.lh,d.taopwi,d.qgffoad); })
]);
svg.append("path") // Add the valueline path.
.attr("class", "line")
.style("stroke", "red")
.attr("d", valueline(data));
svg.append("path") // Add the valueline2 path.
.attr("class", "line")
.style("stroke", "steelblue")
.attr("d", valueline2(data));
svg.append("path") // Add the valueline3 path.
.attr("class", "line")
.style("stroke", "green")
.attr("d", valueline3(data));
// D3 Tips and tricks line
svg.append("path") // Add the valueline4 path.
.attr("class", "line")
.style("stroke", "black")
.attr("d", valueline4(data));
svg.append("path") // Add the valueline5 path.
.attr("class", "line")
.style("stroke", "purple")
.attr("d", valueline5(data));
svg.append("path") // Add the valueline6 path.
.attr("class", "line")
.style("stroke", "orange")
.attr("d", valueline6(data));
svg.append("path") // Add the valueline7 path.
.attr("class", "line")
.style("stroke", "grey")
.attr("d", valueline7(data));
svg.append("path") // Add the valueline8 path.
.attr("class", "line")
.style("stroke", "blue")
.attr("d", valueline8(data));
svg.append("path") // Add the valueline9 path.
.attr("class", "line")
.style("stroke", "red")
.attr("d", valueline9(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
// append the x line
focus.append("line")
.attr("class", "x")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", height);
// append the y line
focus.append("line")
.attr("class", "y")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", width)
.attr("x2", width);
// place the value at the intersection
focus.append("text")
.attr("class", "y1")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "-.3em");
focus.append("text")
.attr("class", "y2")
.attr("dx", 8)
.attr("dy", "-.3em");
// place the date at the intersection
focus.append("text")
.attr("class", "y3")
.style("stroke", "white")
.style("stroke-width", "3.5px")
.style("opacity", 0.8)
.attr("dx", 8)
.attr("dy", "1em");
focus.append("text")
.attr("class", "y4")
.attr("dx", 8)
.attr("dy", "1em");
// append the rectangle to capture mouse
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
y0 = d3.mouse(this)[1]
y1 = parseInt(y.invert(y0)),
date1 = d3.mouse(this)[0];
// console.log(x0);
focus.select(".x")
.attr("transform",
"translate(" + date1 + "," + (0) + ")")
.attr("y2", height );
focus.select(".y")
.attr("transform",
"translate(" + width * -1 + "," +
y0 + ")")
.attr("x2", width + width);
focus.select("text.y1")
.attr("transform",
"translate(" + (date1 + 5) + "," + (y0) + ")")
.text(formatDate(x0));
focus.select("text.y2")
.attr("transform",
"translate(" + (date1 + 5) + "," + (y0) + ")")
.text(formatDate(x0));
focus.select("text.y3")
.attr("transform",
"translate(" + (date1 + 7) + "," + (y0 + 4) + ")")
.text(y1);
focus.select("text.y4")
.attr("transform",
"translate(" + (date1 + 7) + "," + (y0 + 4) + ")")
.text(y1);
}
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].bt) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "red")
.text("bt");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].tnbb) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "steelblue")
.text("tnbb");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].hon) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "green")
.text("hon");
// D3 Tips and tricks line
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].d3tat) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "black")
.text("d3tat");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].htdwyl) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "purple")
.text("htdwyl");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].watir) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "orange")
.text("watir");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].lh) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "grey")
.text("lh");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].taopwi) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "blue")
.text("taopwi");
svg.append("text")
.attr("transform", "translate(" + (width+3) + "," + y(data[data.length-1].qgffoad) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
.style("fill", "red")
.text("qgffoad");
});
</script>
</body>
date,bt,tnbb,hon,d3tat,htdwyl,watir,lh,taopwi,qgffoad
2014-03-29 23:58:28,22495,12730,12314,8877,8293,6523,5609,4328,4218
2014-03-30 17:42:42,22500,12744,12328,8886,8293,6524,5610,4347,4221
2014-03-31 15:41:08,22515,12759,12343,8914,8293,6532,5615,4393,4229
2014-04-01 16:37:08,22529,12781,12365,8941,8293,6545,5615,4464,4231
2014-04-02 16:47:38,22550,12810,12393,8970,8294,6564,5620,4521,4241
2014-04-03 16:58:08,22566,12830,12412,8991,8296,6579,5620,4566,4249
2014-04-04 08:24:49,22575,12840,12423,9002,8296,6589,5621,4603,4251
2014-04-05 17:03:26,22590,12863,12446,9030,8297,6606,5623,4659,4259
2014-04-06 17:11:22,22603,12878,12462,9044,8297,6608,5625,4682,4261
2014-04-07 17:01:43,22615,12896,12478,9065,8297,6616,5628,4731,4266
2014-04-08 18:20:09,22642,12917,12499,9098,8297,6625,5630,4798,4281
2014-04-09 17:24:35,22679,12940,12522,9147,8297,6638,5642,4861,4304
2014-04-10 17:09:20,22703,12957,12540,9183,8297,6640,5654,4922,4329
2014-04-11 18:55:05,22720,12980,12565,9216,8299,6656,5658,4972,4346
2014-04-12 18:19:27,22729,13006,12590,9229,8299,6659,5660,4996,4353
2014-04-13 22:37:32,22747,13034,12620,9255,8299,6664,5664,5027,4370
2014-04-14 18:35:07,22765,13043,12629,9274,8299,6673,5667,5072,4379
2014-04-15 17:39:23,22784,13066,12653,9301,8299,6684,5668,5133,4389
2014-04-16 17:46:50,22809,13089,12676,9331,8299,6697,5671,5177,4397
2014-04-17 18:22:10,22829,13113,12699,9357,8299,6715,5673,5228,4411
2014-04-18 20:53:55,22847,13136,12723,9403,8299,6726,5682,5267,4416
2014-04-19 19:41:31,22857,13152,12740,9417,8299,6731,5685,5289,4427
2014-04-20 22:58:21,22876,13171,12759,9443,8299,6738,5687,5313,4436
2014-04-21 19:01:27,22896,13181,12769,9460,8299,6746,5690,5340,4441
2014-04-22 18:07:47,22913,13190,12779,9485,8299,6763,5691,5397,4449
2014-04-23 17:54:10,22935,13224,12811,9517,8299,6783,5694,5440,4457
2014-04-24 18:06:40,22962,13241,12828,9556,8299,6795,5696,5487,4464
2014-04-25 18:25:10,22977,13262,12849,9598,8299,6805,5701,5518,4477
2014-04-26 19:36:29,23001,13282,12871,9614,8299,6808,5705,5539,4485
2014-04-27 18:14:40,23009,13294,12882,9629,8299,6809,5706,5551,4499
2014-04-28 18:25:19,23032,13299,12888,9655,8299,6819,5710,5588,4543
2014-04-29 18:25:56,23051,13318,12906,9684,8299,6833,5713,5656,4550
2014-04-30 17:58:38,23061,13333,12921,9700,8299,6837,5716,5710,4564
2014-05-01 17:49:18,23074,13347,12935,9730,8299,6842,5717,5731,4578
2014-05-02 19:29:45,23096,13364,12953,9753,8299,6859,5719,5773,4593
2014-05-03 18:42:20,23106,13378,12967,9770,8299,6866,5721,5796,4604
2014-05-04 18:26:16,23114,13396,12985,9780,8299,6871,5724,5815,4611
2014-05-05 18:17:36,23130,13409,12998,9801,8299,6878,5725,5860,4617
2014-05-06 17:28:03,23146,13424,13013,9831,8299,6891,5730,5910,4628
2014-05-07 17:14:19,23167,13438,13027,9861,8299,6903,5735,5968,4639
2014-05-08 17:01:26,23189,13447,13035,9886,8299,6911,5737,6014,4641
2014-05-09 18:59:09,23210,13485,13068,9919,8299,6917,5738,6056,4645
2014-05-10 19:07:46,23222,13499,13082,9942,8300,6921,5741,6079,4654
2014-05-11 18:22:27,23233,13514,13096,9953,8301,6925,5743,6092,4666
2014-05-12 18:43:11,23250,13525,13108,9979,8301,6932,5747,6155,4675
2014-05-13 18:32:13,23276,13540,13123,10022,8301,6946,5749,6210,4688
2014-05-14 17:34:07,23289,13557,13141,10056,8301,6955,5752,6263,4698
2014-05-15 17:33:58,23309,13569,13153,10089,8302,6964,5757,6330,4703
2014-05-16 22:42:22,23327,13602,13186,10122,8302,6981,5762,6385,4715
2014-05-17 19:22:39,23336,13607,13192,10135,8302,6984,5762,6403,4716
2014-05-18 18:23:18,23349,13626,13210,10152,8302,6987,5765,6414,4723
2014-05-19 17:46:29,23366,13639,13223,10186,8303,6996,5768,6448,4733
2014-05-20 17:49:45,23380,13662,13245,10218,8303,7005,5768,6503,4746
2014-05-21 17:35:14,23406,13679,13263,10247,8303,7016,5772,6555,4759
2014-05-22 17:01:05,23430,13704,13288,10286,8303,7027,5774,6593,4763
2014-05-23 19:05:13,23446,13726,13309,10324,8303,7036,5775,6652,4771
2014-05-24 18:52:36,23453,13736,13319,10339,8304,7040,5779,6673,4781
2014-05-25 18:25:50,23464,13749,13331,10351,8304,7043,5781,6683,4790
2014-05-26 17:36:12,23480,13755,13337,10370,8304,7047,5783,6713,4799
2014-05-27 17:38:20,23499,13779,13360,10403,8305,7059,5791,6756,4817
2014-05-28 17:22:43,23520,13796,13376,10434,8306,7067,5791,6802,4832
2014-05-29 18:28:53,23535,13817,13396,10467,8306,7083,5795,6850,4845
2014-05-30 18:45:06,23552,13838,13417,10505,8306,7093,5795,6890,4857
2014-05-31 18:45:06,23566,13852,13430,10531,8306,7096,5796,6912,4864
2014-06-01 18:45:06,23580,13866,13443,10557,8306,7099,5797,6934,4871
2014-06-02 18:27:50,23594,13880,13458,10583,8306,7104,5798,6957,4878
2014-06-03 18:30:55,23615,13898,13476,10624,8306,7119,5804,7000,4887
2014-06-04 17:42:00,23636,13905,13482,10642,8306,7129,5807,7041,4898
2014-06-05 17:27:11,23651,13914,13491,10666,8306,7133,5808,7087,4905
2014-06-06 19:50:05,23664,13931,13507,10706,8306,7147,5809,7146,4917
2014-06-07 20:23:10,23674,13941,13517,10734,8307,7150,5809,7164,4928
2014-06-08 18:20:09,23684,13950,13526,10752,8307,7152,5811,7178,4940
2014-06-09 18:28:30,23692,13964,13540,10792,8307,7160,5817,7208,4951
2014-06-10 18:33:59,23713,13984,13560,10822,8308,7171,5817,7255,4969
2014-06-11 17:44:18,23733,14000,13576,10858,8308,7178,5817,7298,4980
2014-06-12 17:51:23,23748,14017,13593,10889,8308,7188,5823,7343,5036
2014-06-13 19:04:51,23765,14031,13607,10923,8308,7197,5825,7393,5067
2014-06-14 19:58:06,23776,14043,13620,10943,8308,7200,5825,7414,5080
2014-06-15 18:31:15,23783,14053,13629,10956,8308,7204,5825,7423,5085
2014-06-16 18:30:29,23808,14063,13639,10991,8308,7214,5829,7463,5097
2014-06-17 18:30:29,23823,14078,13654,11032,8309,7221,5830,7523,5104
2014-06-18 17:22:37,23843,14093,13668,11060,8309,7228,5832,7596,5116
2014-06-19 18:18:24,23856,14108,13683,11099,8310,7243,5833,7633,5138
2014-06-20 18:48:28,23879,14128,13702,11132,8310,7255,5835,7673,5152
2014-06-21 18:11:10,23892,14136,13710,11147,8310,7262,5837,7685,5158
2014-06-22 17:57:37,23895,14141,13715,11159,8310,7265,5838,7699,5167
2014-06-23 18:17:40,23911,14154,13727,11193,8310,7268,5843,7741,5187
2014-06-24 18:22:05,23929,14168,13742,11233,8310,7282,5845,7790,5195
2014-06-25 18:43:48,23951,14188,13762,11250,8311,7289,5851,7840,5211
2014-06-26 17:38:48,23965,14206,13781,11281,8311,7295,5856,7883,5223
2014-06-27 19:36:10,23978,14223,13798,11328,8311,7309,5858,7933,5275
2014-06-28 18:34:46,23990,14231,13805,11344,8311,7314,5859,7947,5289
2014-06-29 18:25:48,24000,14239,13813,11360,8311,7321,5861,7958,5298
2014-06-30 18:25:36,24023,14249,13823,11400,8311,7330,5862,8006,5319
2014-07-01 18:24:12,24037,14261,13835,11445,8311,7343,5865,8057,5346
2014-07-02 17:01:59,24057,14278,13854,11477,8311,7351,5870,8102,5361
2014-07-03 17:11:18,24077,14304,13879,11523,8311,7363,5873,8156,5369
2014-07-04 19:13:11,24097,14326,13901,11551,8311,7368,5874,8207,5402
2014-07-05 19:49:36,24106,14342,13917,11575,8311,7373,5881,8224,5414
2014-07-06 17:24:22,24114,14354,13929,11587,8311,7376,5883,8241,5428
2014-07-07 17:44:11,24134,14373,13949,11613,8312,7383,5886,8278,5437
2014-07-08 18:42:35,24151,14399,13974,11650,8312,7393,5888,8341,5450
2014-07-09 17:59:46,24171,14422,13997,11689,8314,7402,5891,8387,5468
2015-05-11 00:00:00,29199,19498,19046,20125,8377,10039,6737,20564,9218