Published
Edited
Sep 14, 2022
Insert cell
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height));

svg
.attr("width", width + margin + margin)
.attr("height", height + margin + margin);

const g = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

const color = d3.scaleOrdinal()
.domain(dataset)
.range(colors)

const pie = d3.pie().value((d) => d.value);

const arc = d3.arc().innerRadius(50).outerRadius(200);

const part = g
.selectAll(".part")
.data(pie(d3.entries(dataset)))
.enter()
.append("path")
.attr("d", arc)
.attr('fill', (d, i) => color(i))
g.selectAll(".part")
.data(pie(d3.entries(dataset)))
.enter()
.append("text")
.attr("transform", (d) => "translate(" + arc.centroid(d) + ")")
.text((d) => d.data.key)
.attr("fill", "white")
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
return svg.node();
}
Insert cell
d3 = require("d3@5")
Insert cell
dataset = ({samsung: 18.8, apple: 14.8, huawei: 13.5, xiaomi: 10.8, oppo: 8.3, others: 33.7})
Insert cell
colors = ['#003f5c','#444e86','#955196','#dd5182','#ff6e54','#ffa600']
Insert cell
margin = 50
Insert cell
height = 500
Insert cell

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.
Learn more