Public
Edited
Nov 20
chart = {
let roasters = new Map(coffeeData.map(o => [o.roaster, []]));
for (let {roaster, origin} of coffeeData) roasters.get(roaster).push(origin);
let data = Array.from(roasters.entries(), ([roaster, origin]) =>
({name: roaster, value: origin.length})
);
console.log(data)
const height = Math.min(width, 600);
const radius = Math.min(width, height) / 2;
const arc = d3.arc()
.innerRadius(radius * 0.67)
.outerRadius(radius - 1);
const pie = d3.pie()
.padAngle(1 / radius)
.sort(null)
.value(d => d.value);
const color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse());
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("style", "max-width: 100%; height: auto;");
svg.append("g")
.selectAll()
.data(pie(data))
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "left")
.selectAll()
.data(pie(data))
.join("text")
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString("en-US")));
return svg.node();
}
coffeeCSV = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRSu18hUBF1GSimz05Czx_T6HKLexTzRidVCSdqOJ8AQ5dXibu2tCU-JbxiD151oyUaG8rBfsPVE6YP/pub?gid=1204727116&single=true&output=csv"
coffeeData = d3.csv(coffeeCSV)
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.
