Public
Edited
Jun 3, 2023
1 fork
chart = {
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
svg
.append("path")
.attr("fill", "lightsteelblue")
.attr("fill-opacity", 0.2)
.attr(
"d",
area.innerRadius((d) => y(d.hsMin)).outerRadius((d) => y(d.maxMax))(data)
);
svg
.append("path")
.attr("fill", "steelblue")
.attr("fill-opacity", 0.2)
.attr(
"d",
area.innerRadius((d) => y(d.hsMin)).outerRadius((d) => y(d.hsMax))(data)
);
svg
.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr(
"d",
line.radius((d) => {
return y(d.hsMean);
})(data)
);
return svg.node();
}
(line.radius((d) => {
return y(d.hsMean);
})(data)).split("L").map(d => d.split(','))
viewof selectionYear = Inputs.range([2006, 2023], {value: 2022, step: 1, label: "Year"})
outerRadius = width / 2 - margin
innerRadius = width / 5
margin = 10
height = width
line = d3
.lineRadial()
.curve(d3.curveLinear)
.angle((d) => {
return x(d.dayOfYear);
})
y(1)
y = d3
.scaleLinear()
.domain([d3.min(data, (d) => d.hsMin), d3.max(data, (d) => d.maxMax)])
.range([innerRadius, outerRadius])
x = d3
.scaleLinear()
.domain([1, 366])
.range([0, 2 * Math.PI])
area = d3
.areaRadial()
.curve(d3.curveBasis)
.angle((d) => x(d.dayOfYear))
data = rawdata.filter(d => d.year === selectionYear)
rawdata = FileAttachment("dailySubset.json").json()
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.
