A minimalist donut chart rendered to Canvas using d3-shape.
forked from mbostock's block: Canvas Donut
license: gpl-3.0 |
A minimalist donut chart rendered to Canvas using d3-shape.
forked from mbostock's block: Canvas Donut
age | population | |
---|---|---|
<5 | 2704659 | |
5-13 | 4499890 | |
14-17 | 2159981 | |
18-24 | 3853788 | |
25-44 | 14106543 | |
45-64 | 8819342 | |
≥65 | 612463 |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<canvas width="400" height="400"></canvas> | |
<script src="//d3js.org/d3.v4.0.0-alpha.4.min.js"></script> | |
<script> | |
var canvas = document.querySelector("canvas"), | |
context = canvas.getContext("2d"); | |
var width = canvas.width, | |
height = canvas.height, | |
radius = Math.min(width, height) / 2; | |
var colors = ["#5BC0EB", "#E55934", "#FDE74C", "#9BC53D"]; | |
var arc = d3.arc() | |
.outerRadius(radius - 10) | |
.innerRadius(radius - 70) | |
.context(context); | |
var labelArc = d3.arc() | |
.outerRadius(radius - 40) | |
.innerRadius(radius - 40) | |
.context(context); | |
var pie = d3.pie() | |
.sort(null) | |
.value(function(d) { return d.quantite; }); | |
context.translate(width / 2, height / 2); | |
d3.requestTsv("prepared_gravite", function(d) { | |
d.quantite = +d.quantite; | |
return d; | |
}, function(error, data) { | |
if (error) throw error; | |
var arcs = pie(data); | |
arcs.forEach(function(d, i) { | |
context.beginPath(); | |
arc(d); | |
context.fillStyle = colors[i]; | |
context.fill(); | |
}); | |
context.beginPath(); | |
arcs.forEach(arc); | |
context.strokeStyle = "#fff"; | |
context.stroke(); | |
context.textAlign = "center"; | |
context.textBaseline = "middle"; | |
context.fillStyle = "#000"; | |
arcs.forEach(function(d) { | |
var c = labelArc.centroid(d); | |
context.fillText(d.data.gravite, c[0], c[1]); | |
}); | |
}); | |
</script> |
gravite quantite | |
indemnes 54640 | |
tues 3655 | |
blesses_hosp 28376 | |
blesses_leger 46751 |