Published
Edited
Dec 2, 2020
2 forks
1 star
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
const g = svg
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2 - innerRadius})`);
g.selectAll("path")
.data(data)
.join("path")
.attr("d", arc)
.attr("fill", (d, i) => color(i));
return svg.node();
}
Insert cell
data = [
{ x0: 0, x1: 0.4, y0: 0, y1: 0.2 },
{ x0: 0.4, x1: 0.7, y0: 0, y1: 0.2 },
{ x0: 0.7, x1: 1.0, y0: 0, y1: 0.2 }
]
Insert cell
height = 320
Insert cell
r = perimeter / (2 * Math.PI)
Insert cell
perimeter = width
Insert cell
perimeterDifference = d3.scaleLinear().range([perimeter, 0.1])
Insert cell
diff = perimeterDifference(t)
Insert cell
innerRadius = r * (perimeter / diff) - r
Insert cell
wedgeAngle = diff / r
Insert cell
arc = d3
.arc()
.startAngle(d => angle(d.x0))
.endAngle(d => angle(d.x1))
.innerRadius(d => radius(d.y0))
.outerRadius(d => radius(d.y1))
Insert cell
radius = d3.scaleSqrt().range([innerRadius, innerRadius + r])
Insert cell
angle = d3
.scaleLinear()
.range([Math.PI + wedgeAngle / 2, Math.PI - wedgeAngle / 2])
Insert cell
color = d3
.scaleOrdinal()
.domain(d3.range(data.length))
.range(d3.schemeCategory10)
Insert cell
d3 = require("d3@6")
Insert cell
import { Scrubber } from "@mbostock/scrubber"
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