Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
md`# Doughnut Chart`
w = 450
h = 450
margin = 40
radius = Math.min(w,h) / 2 - margin
dataset = [
{ name: "はい", value: 62 },
{ name: "いいえ", value: 52 },
{ name: "どちらとも言えない", value: 22 },
{ name: "無回答", value: 10 }
]
color = d3.scaleOrdinal()
.range(["red", "blue", "green", "#C1D765"])
pie = d3.pie().value(d => d.value)
data_ready = pie(dataset)
svg = {
const svg = DOM.svg(w, h);
d3.select(svg)
.selectAll("path")
.data(pie(dataset))
.enter()
.append("path")
.attr(
"d",
d3
.arc()
.innerRadius(10) // This is the size of the donut hole
.outerRadius(radius / 2)
)
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
.attr("fill", (d) => color(d.data.name))
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0)
.transition() // アニメーション
.duration(1000) // アニメーション時間
.delay((d, i) => i * 250) // 遅延時間（データ項目ごとに250msずらす）
.style("opacity", 0.7)
.attr(
"d",
d3
.arc()
.innerRadius(100) // This is the size of the donut hole
.outerRadius(radius)
);
return svg;
}
d3 = require('d3@5')
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.
