Built with blockbuilder.org
forked from romsson's block: Grouped bar chart v4
forked from romsson's block: Grouped bar chart
forked from romsson's block: Grouped bar chart
license: mit |
Built with blockbuilder.org
forked from romsson's block: Grouped bar chart v4
forked from romsson's block: Grouped bar chart
forked from romsson's block: Grouped bar chart
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
// Source: https://bl.ocks.org/mbostock/3887051 | |
var margin = {top: 20, right: 30, bottom: 30, left: 40}, | |
width = 600 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var y = d3.scaleLinear() | |
.range([height, margin.bottom]); | |
var x0 = d3.scaleBand() | |
.range([0, width], .2); | |
var x1 = d3.scaleBand(); | |
var z = d3.scaleOrdinal(d3.schemeCategory20) | |
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 + ")"); | |
// Date format https://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95 | |
var parseTime = d3.timeParse("%b %Y") | |
// Load stocks data | |
// Ex: 0: {symbol: "MSFT", date: "Jan 2000", price: "39.81"} | |
d3.csv('https://raw.githubusercontent.com/LyonDataViz/MOS5.5-Dataviz/master/data/stocks.csv', function(error, raw) { | |
var symbols = []; | |
var data = [] | |
// Data pre-processing | |
raw.forEach(function(d, i) { | |
if(symbols.indexOf(d.symbol) < 0) { | |
symbols.push(d.symbol) | |
data[symbols.indexOf(d.symbol)] = []; | |
} | |
// String to INT | |
d.value = +d.price; | |
// Parsing time | |
d.date = parseTime(d.date) | |
data[symbols.indexOf(d.symbol)].push(d); | |
}); | |
var data_nest = d3.nest() | |
.key(function(d) { return d.date.getFullYear(); }) | |
.key(function(d) { return d.symbol; }) | |
.rollup(function(v) { return d3.sum(v, function(d) { return d.price; }); }) | |
.entries(raw); | |
var years = data_nest.map(function(d) { return d.key; }) | |
x0.domain(years) | |
x1.domain(symbols).range([0, x0.bandwidth() - 10]); | |
y.domain([0, d3.max(data_nest, function(d) { | |
return d3.max(d.values, function(e) { | |
return e.value | |
}); | |
})]); | |
svg.append("g").selectAll("g") | |
.data(data_nest) | |
.enter() | |
.append("g") | |
.attr("transform", function(d, i) { | |
return "translate(" + x0(d.key) + ", 0)"; | |
}) | |
.selectAll("rect") | |
.data(function(d) { return d.values; }) | |
.enter() | |
.append("rect") | |
.style("fill", function(d, i) { return z(d.key); }) | |
.attr("width", x1.bandwidth()) | |
.attr("height", function(d) { return height - y(d.value); }) | |
.attr("x", function(d, i) { return x1(d.key); }) | |
.attr("y", function(d) {return y(d.value); }); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x0)) | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (0) + ", 0)") | |
.call(d3.axisLeft().scale(y)) | |
}); | |
</script> |