Published
Edited
Oct 16, 2021
Basics
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.numconf)])
.range([height - margin.bottom, margin.top])
arc = d3.arc()
.innerRadius(210)
.outerRadius(310)
.startAngle(([startAngle, endAngle]) => startAngle)
.endAngle(([startAngle, endAngle]) => endAngle)
arc([Math.PI / 2, Math.PI])
viewof n = {
const form = html`<form style="font: 12px var(--sans-serif); display: flex; align-items: center; min-height: 33px;">
<label style="display: block;">
<input name="input" type="range" min="1" max="50" value="12" step="1" style="width: 180px;">
n = <output name="output"></output>
</label>
</form>`;
form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;
form.oninput();
return form;
}
html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;">
${Array.from({length: n}, (_, i) => svg`<path stroke="black" fill="${d3.interpolateRainbow(i / n)}" d="${arc([i / n * 2 * Math.PI, (i + 1) / n * 2 * Math.PI])}"></path>`)}
</svg>`
pieArcData = d3.pie()
.value(d => d.numconf)
(data)
vl = require('@observablehq/vega-lite')
margin = ({top: 20, right: 0, bottom: 0, left: 150})
height = 240
xAxis = (g, x) => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80, "%"))
.call(g => (g.selection ? g.selection() : g).select(".domain").remove())
yAxis = (g, y) => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
data = FileAttachment("covid19-data@1.csv").csv()
d3 = require("d3@6")
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.
