CodePen https://codepen.io/dobladov
StackOverflow: https://stackoverflow.com/users/2498992/daniel-doblado
Published
Edited
Jan 14, 2020
1 fork
chart = {
const width = 700
const height = 400
const padding = 10
const color = d3.scaleOrdinal()
.domain(data)
.range(['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56'])
var pieGenerator = d3.pie()
.value(([key, value]) => {
return value
})
// .sort((a, b) => {
// return a.name.localeCompare(b.name);
// })
const areaWidth = (width - padding) / 2
const r = Math.min(areaWidth, height - 10) / 2;
const total = Object.values(data).reduce((acc, i) => acc+i)
var arcGenerator = d3.arc()
.outerRadius(r)
.innerRadius(r - 45)
var arcData = pieGenerator(Object.entries(data));
const svg = d3.create('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('width', width)
.attr('height', height)
const g = svg.append('g')
.attr('class', 'graph')
.attr('transform', `translate(${r + padding}, ${height/2})`)
// Arcs
g.selectAll('path')
.data(arcData)
.enter()
.append('path')
.attr('d', arcGenerator)
.attr('fill', d => {
return color(d.data[1])
})
.attr('stroke', 'white')
.append('title')
.html(d => `${d.data[0]} (${d.data[1]})`)
// Labels
g.selectAll('text')
.data(arcData)
.enter()
.append('text')
.each(function(d, i, nodes) {
var centroid = arcGenerator.centroid(d)
d3.select(nodes[i])
.attr('x', centroid[0])
.attr('y', centroid[1])
.attr('dy', '0.33em')
.attr('fill', 'white')
.text(d => {
const percentage = ~~(d.data[1] * 100 / total)
return (percentage > 3 ? `${percentage}%` : '')
})
.attr('text-anchor', 'middle')
.attr('font-weight', 400)
})
// Legend
const legend = svg.append('g')
.attr('class', 'legend')
.attr('transform', `translate(${areaWidth + padding * 3}, -${height})`);
const lg = legend.selectAll('g')
.data(arcData)
.enter()
.append('g')
.attr('class', 'legendGroup')
.attr('transform', (d,i) => `translate(0, ${(height + 15) + 20 * i})`);
lg.append('rect')
.attr('fill', d => {
return color(d.data[1])
})
.attr('x', 0)
.attr('y', 0)
.attr('width', 10)
.attr('height', 10)
.append('title')
.html(d => d.data[1])
lg.append('text')
.style('font-family', 'Georgia')
.style('font-size', '13px')
.attr('x', 17.5 + 10)
.attr('y', 10)
.text(d => d.data[0])
.append('title')
.html(d => d.data[1])
return svg.node()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
