Published
Edited
Feb 28, 2021
1 fork
md`# Teste Arc Chart`
chart = {
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.style("font", "10px sans-serif");
svg.selectAll("path")
.data(arcs)
.join("path")
.attr("d",arc)
.attr("fill", d => color(d.data.name));
return svg.node();
}
height = 500
data = d3.csvParse(await FileAttachment("population-by-age.csv").text(), d3.autoType)
color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
arc = {
return d3.arc().innerRadius(radius*0.6).outerRadius(radius+3)
};
pie = d3.pie()
.padAngle(0.01)
.sort(null)
.value(d => d.value)
radius = Math.min(width / 2, height / 2)
width = 500
d3 = require("d3@6")
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.
