|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<title>Marimekko Chart</title> |
|
<style> |
|
|
|
body { |
|
font: 10px sans-serif; |
|
} |
|
|
|
rect { |
|
stroke: #000; |
|
} |
|
|
|
svg { |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="//d3js.org/d3.v3.min.js"></script> |
|
<script> |
|
|
|
var width = 960, |
|
height = 500, |
|
margin = 30; |
|
|
|
var x = d3.scale.linear() |
|
.range([0, width - 3 * margin]); |
|
|
|
var y = d3.scale.linear() |
|
.range([0, height - 2 * margin]); |
|
|
|
var z = d3.scale.category10(); |
|
|
|
var n = d3.format(",d"), |
|
p = d3.format("%"); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height) |
|
.append("g") |
|
.attr("transform", "translate(" + 2 * margin + "," + margin + ")"); |
|
|
|
d3.json("marimekko.json", function(error, data) { |
|
if (error) throw error; |
|
|
|
var offset = 0; |
|
|
|
// Nest values by segment. We assume each segment+market is unique. |
|
var segments = d3.nest() |
|
.key(function(d) { return d.segment; }) |
|
.entries(data); |
|
|
|
// Compute the total sum, the per-segment sum, and the per-market offset. |
|
// You can use reduce rather than reduceRight to reverse the ordering. |
|
// We also record a reference to the parent segment for each market. |
|
var sum = segments.reduce(function(v, p) { |
|
return (p.offset = v) + (p.sum = p.values.reduceRight(function(v, d) { |
|
d.parent = p; |
|
return (d.offset = v) + d.value; |
|
}, 0)); |
|
}, 0); |
|
|
|
console.log(segments) |
|
|
|
// Add x-axis ticks. |
|
var xtick = svg.selectAll(".x") |
|
.data(segments) |
|
.enter().append("g") |
|
.attr("class", "x") |
|
.attr("transform", function(d, i) { |
|
return "translate(" + x((d.offset + d.sum/2)/ sum) + "," + y(1) + ")"; |
|
}); |
|
|
|
xtick.append("line") |
|
.attr("y2", 6) |
|
.style("stroke", "#000"); |
|
|
|
xtick.append("text") |
|
.attr("y", 8) |
|
.attr("text-anchor", "middle") |
|
.attr("dy", ".71em") |
|
.text(function(d){ |
|
return d.key |
|
}); |
|
|
|
// Add y-axis ticks. |
|
var ytick = svg.selectAll(".y") |
|
.data(y.ticks(10)) |
|
.enter().append("g") |
|
.attr("class", "y") |
|
.attr("transform", function(d) { return "translate(0," + y(1 - d) + ")"; }); |
|
|
|
ytick.append("line") |
|
.attr("x1", -6) |
|
.style("stroke", "#000"); |
|
|
|
ytick.append("text") |
|
.attr("x", -8) |
|
.attr("text-anchor", "end") |
|
.attr("dy", ".35em") |
|
.text(p); |
|
|
|
// Add a group for each segment. |
|
var segments = svg.selectAll(".segment") |
|
.data(segments) |
|
.enter().append("g") |
|
.attr("class", "segment") |
|
.attr("xlink:title", function(d) { return d.key; }) |
|
.attr("transform", function(d) { return "translate(" + x(d.offset / sum) + ")"; }); |
|
|
|
// Add a rect for each market. |
|
var markets = segments.selectAll(".market") |
|
.data(function(d) { return d.values; }) |
|
.enter().append("a") |
|
.attr("class", "market") |
|
.attr("xlink:title", function(d) { return d.market + " " + d.parent.key + ": " + n(d.value); }) |
|
.append("rect") |
|
.attr("y", function(d) { return y(d.offset / d.parent.sum); }) |
|
.attr("height", function(d) { return y(d.value / d.parent.sum); }) |
|
.attr("width", function(d) { return x(d.parent.sum / sum); }) |
|
.style("fill", function(d) { return z(d.market); }); |
|
}); |
|
|
|
</script> |