chart.update(data.slice().sort(order))
data = d3.csvParse(await FileAttachment("candidates.csv").text(), d3.autoType).sort(orders.End)
data
Type Table, then Shift-Enter. Ctrl-space for more options.
orders = ({
Start: (a, b) => d3.ascending(a.start, b.start),
End: (a, b) => d3.descending(a.end || today, b.end || today) || d3.descending(a.start, b.start),
Duration: (a, b) => d3.descending((a.end || today) - a.start, (b.end || today) - b.start)
})
today = new Date(Date.UTC(2020, 2, 6))
x = d3.scaleUtc()
.domain([d3.min(data, d => d.start), today])
.rangeRound([margin.left, width - margin.right])
y = d3.scalePoint()
.domain(data.map(d => d.name))
.rangeRound([margin.top, height - margin.bottom])
.padding(1)
xAxis = g => g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
.call(g => g.append("g")
.attr("stroke", "white")
.attr("stroke-width", 2)
.selectAll("line")
.data(x.ticks())
.join("line")
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("y2", height - margin.bottom - margin.top))
margin = ({top: 30, right: 10, bottom: 0, left: 70})
height = 540
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.
