dataByTimeline = d3.nest().key(d=>d.timeline).entries(data);
dataByType = d3.nest().key(d=>d.region).entries(data);
axisBottom = d3.axisBottom(x)
.tickPadding(2)
.tickFormat(formatDate)
axisTop = d3.axisTop(x)
.tickPadding(2)
.tickFormat(formatDate)
d3 = require("d3@5")
csv =d3.csvParse(await FileAttachment("bldgdata@2.csv").text())
data = csv.map(d=>{
return {
...d,
start: +d.start,
end: +d.end
}
}).sort((a,b)=> a.start-b.start);
regions = d3.nest().key(d=>d.region).entries(data).map(d=>d.key)
timelines = dataByTimeline.map(d=>d.key)
color = d3.scaleOrdinal(d3.schemeSet2).domain(regions)
import {checkbox, select} from "@jashkenas/inputs"
html`CSS<style> svg{font: 10px sans-serif;}</style>`
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.
