Skip to content

Instantly share code, notes, and snippets.

@Wanagram

Wanagram/README.md

Last active February 11, 2016 16:32
Show Gist options
  • Save Wanagram/202914b557ca3e9204d6 to your computer and use it in GitHub Desktop.
Save Wanagram/202914b557ca3e9204d6 to your computer and use it in GitHub Desktop.
Download ZIP
Total Deaths
Raw
data.txt
date Guinea Liberia Sierra Leone
20140301 0 0 0
20140302 0 0 0
20140303 0 0 0
20140304 0 0 0
20140305 0 0 0
20140306 0 0 0
20140307 0 0 0
20140308 0 0 0
20140309 0 0 0
20140310 0 0 0
20140311 0 0 0
20140312 0 0 0
20140313 0 0 0
20140314 0 0 0
20140315 0 0 0
20140316 0 0 0
20140317 0 0 0
20140318 0 0 0
20140319 0 0 0
20140320 0 0 0
20140321 0 0 0
20140322 0 0 0
20140323 0 0 0
20140324 0 0 0
20140325 86 0 0
20140326 86 0 0
20140327 103 8 6
20140331 112 8 0
20140401 122 8 0
20140402 127 8 0
20140407 151 18 0
20140410 157 22 0
20140417 197 27 0
20140421 203 27 0
20140423 208 34 0
20140430 221 13 0
20140505 231 13 0
20140514 233 12 0
20140523 258 12 0
20140527 258 12 1
20140528 281 12 16
20140602 291 13 50
20140605 344 13 81
20140610 372 15 89
20140611 376 15 117
20140618 398 33 97
20140624 390 51 158
20140702 413 107 239
20140707 412 115 252
20140708 408 131 305
20140714 409 142 337
20140716 406 172 386
20140721 410 196 442
20140724 415 224 454
20140728 427 249 525
20140731 460 329 533
20140803 472 391 574
20140804 485 486 646
20140808 495 554 717
20140812 506 599 730
20140813 510 670 783
20140815 519 786 810
20140819 543 834 848
20140821 579 972 907
20140822 607 1082 910
20140828 648 1378 1026
20140906 812 1871 1261
20140908 862 2046 1361
20140912 861 2081 1424
20140916 936 2407 1620
20140918 942 2710 1673
20140922 1008 3022 1813
20140924 1022 3280 1940
20140926 1074 3458 2021
20141001 1157 3696 2304
20141003 1199 3834 2437
20141008 1298 3924 2789
20141010 1350 4076 2950
20141015 1472 4249 3252
20141017 1519 4262 3410
20141022 1540 4665 3706
20141025 1553 4665 3896
20141029 1906 6535 5235
20141031 1667 6535 5338
20141105 1731 6525 4759
20141107 1760 6619 4862
20141112 1878 6822 5368
20141114 1919 6878 5586
20141119 1971 7069 6073
20141121 2047 7082 6190
20141126 2134 7168 6599
20141128 2155 7635 7109
20141203 2164 7635 7312
20141210 2292 7719 7897
20141217 2416 7797 8356
20141224 2597 7862 9004
20141231 2707 8018 9446
20150107 2775 8157 9780
20150114 2806 8331 10124
20150121 2871 8478 10340
20150128 2917 8622 10518
20150204 2975 8745 10740
20150211 3044 8881 10934
20150218 3108 9007 11103
20150225 3155 9238 11301
20150304 3219 9249 11466
20150311 3285 9343 11619
20150318 3389 9526 11751
20150325 3429 9602 11841
20150401 3492 9712 11974
20150408 3515 9862 12138
20150415 3548 10042 12201
20150422 3565 10212 12267
20150429 3584 10322 12371
20150506 3589 10564 12440
20150513 3597 10604 12523
20150520 3635 10666 12632
20150527 3641 10666 12706
20150603 3652 10666 12827
20150610 3670 10666 12901
20150617 3674 10666 12965
20150624 3718 10666 13059
20150701 3729 10666 13119
20150708 3748 10670 13155
20150715 3760 10673 13209
20150722 3783 10672 13250
20150729 3786 10672 13290
20150805 3784 10672 13406
20150812 3787 10672 13470
20150819 3786 10672 13494
20150826 3792 10672 13541
20150903 3792 10672 13638
20150910 3792 10672 13683
20150917 3792 10672 13756
20150924 3800 10672 13823
20151001 3805 10672 13911
20151008 3804 10672 13945
20151015 3800 10672 13982
20151022 3803 10672 14001
20151029 3806 10672 14061
20151105 3810 10672 14089
20151111 3805 10672 14122
20151118 3804 10672 14122
20151125 3804 10675 14122
20151202 3804 10675 14122
20151209 3804 10675 14122
20151216 3807 10675 14122
20151223 3804 10675 14122
20151230 3804 10675 14122
20160106 3804 10675 14122
20160113 3804 10675 14122
20160120 3804 10675 14123
20160127 3804 10675 14124
20160203 3804 10675 14124
20160210 3804 10675 14124
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
font: 10px
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 70, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.ticks(d3.time.months)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
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.tsv("data.txt", function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var cities = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", function(d){return "rotate(-45)"});
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("Total Cases");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
city.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment