makeChart1 = (dataset) => {
// set the dimensions and margins of the graph
const width = 600,
height = 500,
margin = 50;
// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
const radius = Math.min(width, height) / 2 - margin
// append the svg object to the div called 'my_dataviz'
const svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${width/2},${height/2})`);
// Create dummy data
const data = {Manhattan: 60001, Staten_Island: 1, Bronx:19421, Queens:36722, Brooklyn:90797}
// set the color scale
const color = d3.scaleOrdinal()
.domain(["Manhattan", "Staten_Island", "Bronx", "Queens", "Brooklyn"])
.range(d3.schemeDark2);
// Compute the position of each group on the pie:
const pie = d3.pie()
.sort(null) // Do not sort group by size
.value(d => d[1])
const data_ready = pie(Object.entries(data))
// The arc generator
const arc = d3.arc()
.innerRadius(radius * 0.4) // This is the size of the donut hole
.outerRadius(radius * 0.6)
// The arc generator
const innerArc = d3.arc()
.innerRadius(radius * 0.6) // This is the size of the donut hole
.outerRadius(radius * 0.6)
// Another arc that won't be drawn. Just for labels positioning
const outerArc = d3.arc()
.innerRadius(radius * 0.6+10)
.outerRadius(radius * 0.6+10)
// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg
.selectAll('allSlices')
.data(data_ready)
.join('path')
.attr('d', arc)
.attr('fill', d => color(d.data[1]))
.attr("stroke", "white")
.style("stroke-width", "2px")
.style("opacity", 0.7)
// Add the polylines between chart and labels:
svg
.selectAll('allPolylines')
.data(data_ready)
.join('polyline')
.attr("stroke", d => color(d.data[1]))
.style("fill", "none")
.attr("stroke-width", 1)
.attr('points', function(d) {
const posA = innerArc.centroid(d) // line insertion in the slice
const posB = outerArc.centroid(d) // line break: we use the other arc generator that has been built only for that
const posC = outerArc.centroid(d); // Label position = almost the same as posB
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2 // we need the angle to see if the X position will be at the extreme right or extreme left
posC[0] = radius * 0.95 * (midangle < Math.PI ? 1 : -1); // multiply by 1 or -1 to put it on the right or on the left
return [posA, posB, posC]
})
// Add the polylines between chart and labels:
svg
.selectAll('allLabels')
.data(data_ready)
.join('text')
.text(d => d.data[0])
.attr('transform', function(d) {
const pos = outerArc.centroid(d);
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
pos[0] = (radius * 0.95 + 4) * (midangle < Math.PI ? 1 : -1);
return `translate(${pos})`;
})
.style('text-anchor', function(d) {
const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2
return (midangle < Math.PI ? 'start' : 'end')
})
.style("alignment-baseline", "middle")
.style("fill", d => color(d.data[1]));
}
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
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.
