Public
Edited
May 30
Fork of Sunburst
1 fork
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
chart = {

// Specify the chart’s colors and approximate radius (it will be adjusted at the end).
const partition = data => {
const root = d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value);
return d3.partition()
.size([2 * Math.PI, radius])
.padding(1)(root);
};

const color = d3.scaleOrdinal()
.domain(data.children.map(d => d.name))
.range(d3.schemeSet2); // 柔和的颜色组

// 设置弧形颜色
attr("fill", d => {
while (d.depth > 1) d = d.parent;
return color(d.data.name);
})

// 文字样式设置
.attr("font-size", d => d.depth === 3 ? "10px" : d.depth === 2 ? "12px" : "14px")
.attr("font-weight", d => d.depth === 3 ? "normal" : "bold")
.attr("fill", "#333")

// 弧线边界
.attr("stroke-width", d => d.depth === 3 ? 1.5 : 0.5)

Insert cell
function autoBox() {
document.body.appendChild(this);
const {x, y, width, height} = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
Insert cell
data = ({
name: "root",
children: [
{
name: "China",
children: [
{
name: "FERMENT",
children: [
{ name: "fermented tofu", value: 99 }
]
},
{
name: "SMELLY",
children: [
{ name: "century egg", value: 88 }
]
}
]
},
{
name: "USA",
children: [
{
name: "MEAT",
children: [
{ name: "bacon", value: 95 }
]
},
{
name: "ALCOHOL",
children: [
{ name: "beer duck", value: 88 }
]
}
]
},
{
name: "UK",
children: [
{
name: "MEAT",
children: [
{ name: "beef stew", value: 76 }
]
},
{
name: "ORGAN",
children: [
{ name: "liver", value: 65 }
]
}
]
},
{
name: "Japan",
children: [
{
name: "SPICE",
children: [
{ name: "spicy sashimi", value: 82 }
]
}
]
},
{
name: "South Korea",
children: [
{
name: "SPICE",
children: [
{ name: "kimchi stew", value: 90 }
]
},
{
name: "BEEF",
children: [
{ name: "beef tartare", value: 85 }
]
}
]
}
]
})

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