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}) rotate(180)`
);
g.append("path")
.attr("d", background)
.attr("fill", "#eee");
g.append("path")
.attr("d", axisLine)
.attr("fill", "#777");
g.append("g")
.attr("fill", "none")
.selectAll("path")
.data(data.map(d => d.values))
.join("path")
.attr("d", line)
.attr("stroke", (d, i) => color(i));
return svg.node();
}
data = [
{
name: "New York",
values: [
{ month: 1, temperature: 39 },
{ month: 2, temperature: 43 },
{ month: 3, temperature: 52 },
{ month: 4, temperature: 64 },
{ month: 5, temperature: 72 },
{ month: 6, temperature: 80 },
{ month: 7, temperature: 84 },
{ month: 8, temperature: 84 },
{ month: 9, temperature: 76 },
{ month: 10, temperature: 64 },
{ month: 11, temperature: 55 },
{ month: 12, temperature: 44 }
]
},
{
name: "San Francisco",
values: [
{ month: 1, temperature: 58 },
{ month: 2, temperature: 61 },
{ month: 3, temperature: 62 },
{ month: 4, temperature: 63 },
{ month: 5, temperature: 64 },
{ month: 6, temperature: 67 },
{ month: 7, temperature: 67 },
{ month: 8, temperature: 68 },
{ month: 9, temperature: 71 },
{ month: 10, temperature: 70 },
{ month: 11, temperature: 64 },
{ month: 12, temperature: 58 }
]
}
]
height = 250
r = perimeter / (2 * Math.PI)
perimeter = Math.min(width, 640)
perimeterDifference = d3.scaleLinear().range([perimeter, 0.1])
diff = perimeterDifference(t)
innerRadius = r * (perimeter / diff) - r
wedgeAngle = diff / r
line = d3
.lineRadial()
.angle(d => angle(d.month))
.radius(d => radius(d.temperature))
radius = d3
.scaleRadial()
.domain([0, 100])
.range([innerRadius, innerRadius + r])
angle = d3
.scalePoint()
.domain(data[0].values.map(d => d.month))
.range([Math.PI + wedgeAngle / 2, Math.PI - wedgeAngle / 2])
color = d3
.scaleOrdinal()
.domain(d3.range(data.length))
.range(d3.schemeCategory10)
background = d3
.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + r)
.startAngle(angle.range()[0])
.endAngle(angle.range()[1])()
axisLine = d3
.arc()
.innerRadius(innerRadius)
.outerRadius(innerRadius + 1)
.startAngle(angle.range()[0])
.endAngle(angle.range()[1])()
d3 = require("d3@6")
import { Scrubber } from "@mbostock/scrubber"
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.
