Example things I like: geometry, trippy geometry, recursion, maps. 👌
tExt = d3.extent(selectedEvents.map(e => e.timestamp))
tMin = tExt[0]
tMax = tExt[1]
dt = tMax - tMin
getCs = t => getContestantSummarys(selectedEvents.filter(e => e.timestamp <= t))
chart.update(t)
tickDuration = 1500
viewof t = Player(
d3.range(tMin + 0.1 * dt, tMax - 0.3 * dt, (tMax - tMin) / 400),
{
width: 450,
delay: tickDuration,
// time: true,
loop: true
}
)
color = d3.scaleOrdinal()
.domain(checkpoints)
.range(d3.schemeSpectral[10])
.unknown("#ccc")
xAxis = (g, x) =>
g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x))
.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))
height = margin.top + 20 * 10
margin = ({top: 30, right: 20, bottom: 0, left: 30})
d3 = require("d3@5")
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.
