Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active January 13, 2022 23:00
Show Gist options
  • Save d3noob/acfbbc5a9e0e9eb643fb to your computer and use it in GitHub Desktop.
Save d3noob/acfbbc5a9e0e9eb643fb to your computer and use it in GitHub Desktop.
Download ZIP
Super Leanpub Extrapolation
Raw
.block
license: mit
Raw
README.md

A scruffy graph in response to the question "When will your book pass Backbone Tutorials for the #1 overall spot?" on googlegroups.

The answer? [Spolier Alert]

Never.

It might pass it on or about the 3rd of August 2017, but by that stage The ABC of PDF with iText would have already shot passed both and will be number one in around 14 may 2016.

Raw
books.csv
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
2017-11-14 00:00:00 44283 34726 34193 45433 8566 17950 9275 57095 20468
Raw
index.html
<!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("books.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 + 7) + "," + (y0) + ")")
.text(formatDate(x0));
focus.select("text.y2")
.attr("transform",
"translate(" + (date1 + 7) + "," + (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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment