Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid

Andrew-Reid/data.csv Secret

Created December 18, 2017 17:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Andrew-Reid/45239d3d80a115d2ee4360c57239e9ed to your computer and use it in GitHub Desktop.
Save Andrew-Reid/45239d3d80a115d2ee4360c57239e9ed to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.csv
date col_1 col_2
11/1/2012 1977652 1802851
12/1/2012 1128739 948687
1/1/2013 1201944 1514667
2/1/2013 1863148 1834006
3/1/2013 1314851 1906060
4/1/2013 1283943 1978702
5/1/2013 1127964 1195606
6/1/2013 1773254 977214
7/1/2013 1929574 1127450
8/1/2013 1980411 1808161
9/1/2013 1405691 1182788
10/1/2013 1336790 937890
11/1/2013 1851053 1358400
12/1/2013 1472623 1214610
1/1/2014 1155116 1757052
2/01/2014 1571611 1935038
3/1/2014 1898348 1320348
4/1/2014 1444838 1934789
5/1/2014 1235087 950194
6/1/2014 1272040 1580656
7/1/2014 980781 1680164
8/1/2014 1391291 1115999
9/1/2014 1211125 1542148
10/1/2014 1020824 1782795
11/1/2014 1685081 926612
12/1/2014 1469254 1767071
1/1/2015 1168523 935897
2/1/2015 1602610 1450541
3/1/2015 1830278 1354876
4/1/2015 1275158 1412555
5/1/2015 1560961 1839718
6/1/2015 949948 1587130
7/1/2015 1413765 1494446
8/1/2015 1166141 1305105
9/1/2015 958975 1202219
10/1/2015 902696 1023987
11/1/2015 961441 1865628
12/1/2015 1363145 1954046
1/1/2016 1862878 1470741
2/1/2016 1723891 1042760
3/1/2016 1906747 1169012
4/1/2016 1963364 1927063
5/1/2016 1899735 1936915
6/1/2016 1300369 1430697
7/1/2016 1777108 1401210
8/1/2016 1597045 1566763
9/1/2016 1558287 1140057
10/1/2016 1965665 1953595
11/1/2016 1800438 937551
12/1/2016 1689152 1221895
1/1/2017 1607824 1963282
2/1/2017 1878431 1415658
3/1/2017 1730296 1947106
4/1/2017 1956756 1696780
5/1/2017 1746673 1662892
6/1/2017 989702 1537646
7/1/2017 1098812 1592064
8/1/2017 1861973 1892987
9/1/2017 1129596 1406514
10/1/2017 1528632 1725020
11/1/2017 925850 1795575
Raw
index.html
<!DOCTYPE html>
<!-- https://bl.ocks.org/mbostock/3886208 -->
<style>
rect.bar { fill: steelblue; }
</style>
<script src="https://d3js.org/d3.v4.js"></script>
<body>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// parse the date / time
var parseDate = d3.timeParse("%m/%d/%Y");
var x = d3.scaleTime()
// .domain([new Date(2012, 11, 1), new Date(2017, 11, 31)]) // do not need, you set later
.range([0, width-margin.left - margin.right]);
var y = d3.scaleLinear().range([height, 0]);
var z = d3.scaleOrdinal().range(["#F1F1F1", "#CE1126"])
// load .csv file
d3.csv("data.csv", function(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data){
if (error) throw error;
data.forEach(function(d) {
console.log(parseDate(d.date));
d.date = parseDate(d.date);
});
var keys = data.columns.slice(1);
data.sort(function(a, b) { return b.date - a.date; });
x.domain(d3.extent( data, function(d){ return d.date }) );
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(keys);
console.log(d3.stack().keys(keys)(data));
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d) { return x(d.data.date); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", (width-margin.right-margin.left)/data.length );
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment