This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
forked from mbostock's block: Pie Chart
forked from lcastrogarcia's block: Pie Chart_hommes
license: gpl-3.0 |
This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
forked from mbostock's block: Pie Chart
forked from lcastrogarcia's block: Pie Chart_hommes
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"> | |
<style> | |
.arc text { | |
font: 10px sans-serif; | |
text-anchor: middle; | |
} | |
.arc path { | |
stroke: #fff; | |
} | |
</style> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"), | |
radius = Math.min(width, height) / 2, | |
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
var color = d3.scaleOrdinal(["#DC143C", "#008B8B", "#9ACD32", "#FFEFD5"]); | |
var pie = d3.pie() | |
.sort(null) | |
.value(function(d) { return d.valeur; }); | |
var path = d3.arc() | |
.outerRadius(radius - 10) | |
.innerRadius(0); | |
var label = d3.arc() | |
.outerRadius(radius - 40) | |
.innerRadius(radius - 40); | |
d3.csv("prepared_usagers_hommes", function(d) { | |
d.valeur = +d.valeur; | |
return d; | |
}, function(error, data) { | |
if (error) throw error; | |
var arc = g.selectAll(".arc") | |
.data(pie(data)) | |
.enter().append("g") | |
.attr("class", "arc"); | |
arc.append("path") | |
.attr("d", path) | |
.attr("fill", function(d) { return color(d.data.age); }); | |
arc.append("text") | |
.attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) | |
.attr("dy", "0.35em") | |
.text(function(d) { return d.data.age; }); | |
}); | |
</script> |
age,valeur | |
moins_25,4268 | |
entre_25_45,10715 | |
entre_45_70,7154 | |
plus_70,1482 |
age,valeur | |
moins_25,15653 | |
entre_25_45,33926 | |
entre_45_70,22155 | |
plus_70,3746 |
age,valeur | |
moins_25,19921 | |
entre_25_45,44641 | |
entre_45_70,29309 | |
plus_70,5228 |