chart = {
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
const colors = ["tomato", "steelblue"];
const airports = svg.selectAll("g")
.data(data)
.enter()
.append("g");
airports.append("path")
.attr("fill", (d,i) => colors[i])
.attr("fill-opacity", 0.2)
.attr("d", area);
airports.append("path")
.attr("fill", "none")
.attr("stroke", (d,i) => colors[i])
.attr("stroke-width", 1.5)
.attr("d", line);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
height = width
margin = 10
innerRadius = width / 5
outerRadius = width / 2 - margin
x = d3.scaleUtc()
.domain([Date.UTC(2000, 0, 1), Date.UTC(2001, 0, 1) - 1])
.range([0, 2 * Math.PI])
y = d3.scaleLinear()
.domain([d3.min(d3.merge(data), d => d.min), d3.max(d3.merge(data), d => d.max)])
.range([innerRadius, outerRadius])
xAxis = g => g
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call(g => g.selectAll("g")
.data(x.ticks())
.join("g")
.each((d, i) => d.id = DOM.uid("month"))
.call(g => g.append("path")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("d", d => `
M${d3.pointRadial(x(d), innerRadius)}
L${d3.pointRadial(x(d), outerRadius)}
`))
.call(g => g.append("path")
.attr("id", d => d.id.id)
.datum(d => [d, d3.utcMonth.offset(d, 1)])
.attr("fill", "none")
.attr("d", ([a, b]) => `
M${d3.pointRadial(x(a), innerRadius)}
A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(x(b), innerRadius)}
`))
.call(g => g.append("text")
.append("textPath")
.attr("startOffset", 6)
.attr("xlink:href", d => d.id.href)
.text(d3.utcFormat("%B"))))
yAxis = g => g
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.call(g => g.selectAll("g")
.data(y.ticks(5).reverse())
.join("g")
.attr("fill", "none")
.call(g => g.append("circle")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.attr("r", y))
.call(g => g.append("text")
.attr("y", d => -y(d))
.attr("dy", "0.35em")
.attr("stroke", "#fff")
.attr("stroke-width", 5)
.text((x, i) => `${x.toFixed(0)}${i ? "" : "°F"}`)
.clone(true)
.attr("y", d => y(d))
.selectAll(function() { return [this, this.previousSibling]; })
.clone(true)
.attr("fill", "currentColor")
.attr("stroke", "none")))
line = d3.lineRadial()
.curve(d3.curveLinearClosed)
.defined(d => !isNaN(d.avg))
.angle(d => x(d.date))
.radius(d => y(d.avg))
area = d3.areaRadial()
.curve(d3.curveLinearClosed)
.defined(d => !isNaN(d.min) && !isNaN(d.max))
.angle(d => x(d.date))
.innerRadius(d => y(d.min))
.outerRadius(d => y(d.max))
rawdata = Promise.all(["https://gist.githubusercontent.com/veltman/0dbb5dbf33305ce95e84e6a852fa18ce/raw/e19ce18355e5f3ea6a8486758879f26f8540475f/ord-temperature.csv","https://gist.githubusercontent.com/mbostock/a68c07a2faada9ca47de90886d91deb9/raw/779b2c91d4699c0ab961e1b021049cb80d7292a9/sfo-temperature.csv"].map(file => d3.csv(file, d3.autoType)))
d3 = require("d3@5", "d3-array@2")
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.
