Public
Edited
Oct 8, 2024
data = Array.from({ length: Math.ceil(Math.PI * 8 * 100) }, (_, i) => [
i,
(i < 630 ? (630 - i) / 100 : 0) +
Math.sin(((Math.PI / 2) * -100 + i) / 100) +
1.5
])
blues = d3.schemeBlues[d3.max([Math.ceil(bands / 2), 3])]
oranges = d3.schemeOranges[d3.max([Math.floor(bands / 2), 3])]
scheme = d3
.merge(blues.map((d, i, a) => [d, oranges[i]]))
.filter((d) => d != undefined)
a = [
Math.sin((now + 0) / 500) * 5 + 5,
Math.sin((now + 100) / 500) * 5 + 5,
Math.cos(now / 500) * 2 + 8,
-Math.sin(now / 500) * 5 + 5,
-Math.cos(now / 500) * 5 + 5
]
Plot.plot({
y: { domain: [0, 10] },
x: { axis: "top" },
marks: [Plot.barY(a), Plot.ruleY([0])]
})
d3.scaleSequential()
viewof chartHeight = Inputs.range([0, 800], { step: 1 })
viewof markHeight = Inputs.range([0, 800], { step: 1 })
chart = Plot.plot({
marginLeft: 100,
height: 556,
width: 1152,
marginTop: 556 - chartHeight,
axis: null,
x: { axis: "bottom" },
y: { domain: [0, step] },
color: {
type: "ordinal",
range: scheme,
label: "Vehicles per hour",
tickFormat: (i) => ((i + 1) * step).toLocaleString("en"),
legend: true
},
marks: [
d3.range(bands).map((i) =>
Plot.areaY(data, {
x: (d) => d[0],
y: (d) => (i % 2 ? step - d[1] + i * step : d[1] - i * step),
y2: (d) => (i % 2 ? step : 0),
fill: i,
stroke: i % 2 ? "red" : "blue",
clip: true
})
),
Plot.axisY({ ticks: chartHeight / 40 }),
Plot.axisY({ dx: -40, tickFormat: (d) => step * 2 - d }),
Plot.axisY({ dx: -80, tickFormat: (d) => step * 2 + d })
]
})
Plot.plot({
height: chartHeight,
marks: [
Plot.areaY(data, { x: (d) => d[0], y: (d) => d[1] }),
Plot.axisY([1, 2])
]
})
bands = Math.ceil(markHeight / chartHeight)
step = (chartHeight / markHeight) * d3.max(data.map((d) => d[1]))
d3.range(1)
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.
