Part of the video course: D3.js in Motion.
This donut chart shows the estimated number of adherents to various religions in 2010. The data is from the Pew Research Center Global Religious Landscape data set.
license: mit |
Part of the video course: D3.js in Motion.
This donut chart shows the estimated number of adherents to various religions in 2010. The data is from the Pew Research Center Global Religious Landscape data set.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> | |
<title>Pie Chart</title> | |
<style> | |
body { | |
margin: 0px; | |
} | |
.domain { | |
display: none; | |
} | |
.legendCells text { | |
fill: #8E8883; | |
font-size: 28pt; | |
font-family: sans-serif; | |
} | |
.legend-label { | |
fill: #635F5D; | |
font-size: 50pt; | |
font-family: sans-serif; | |
} | |
</style> | |
</head> | |
<body> | |
<svg width="960" height="500"></svg> | |
<script> | |
const pieValue = d => d.population; | |
const colorValue = d => d.religion; | |
const colorLabel = 'Religion'; | |
const margin = { left: 20, right: 400, top: 1, bottom: 1 }; | |
const svg = d3.select('svg'); | |
const width = svg.attr('width'); | |
const height = svg.attr('height'); | |
const innerWidth = width - margin.left - margin.right; | |
const innerHeight = height - margin.top - margin.bottom; | |
const pie = d3.pie().value(pieValue); | |
const arc = d3.arc() | |
.innerRadius(innerHeight / 4) | |
.outerRadius(innerHeight / 2); | |
const g = svg.append('g') | |
.attr('transform', `translate(${margin.left},${margin.top})`); | |
const pieG = g.append('g') | |
.attr('transform', `translate(${innerWidth / 2},${innerHeight / 2})`); | |
const colorLegendG = g.append('g') | |
.attr('transform', `translate(${innerWidth + 60}, 150)`); | |
colorLegendG.append('text') | |
.attr('class', 'legend-label') | |
.attr('x', -30) | |
.attr('y', -40) | |
.text(colorLabel); | |
const colorScale = d3.scaleOrdinal() | |
.range(d3.schemeCategory10); | |
const colorLegend = d3.legendColor() | |
.scale(colorScale) | |
.shape('circle'); | |
const row = d => { | |
d.population = +d.population; | |
return d; | |
}; | |
d3.csv('religionWorldTotals.csv', row, data => { | |
colorScale.domain(data.map(colorValue)); | |
const arcs = pie(data); | |
pieG.selectAll('path').data(arcs) | |
.enter().append('path') | |
.attr('d', arc) | |
.attr('fill', d => colorScale(colorValue(d.data))); | |
colorLegendG.call(colorLegend) | |
.selectAll('.cell text') | |
.attr('dy', '0.1em'); | |
}); | |
</script> | |
</body> | |
</html> |
�PNG | |