Title = md`# A timeline of UK building Codes
## PROOF OF CONCEPT ##
### NOT FOR PRODUCTION ###
`
viewof styling = html` <style>svg{font: 10px sans-serif;}></style>`
cselehart = {
let filteredData;
if(sorting !== "Time") {
filteredData = [].concat.apply([], dataByType.map(d=>d.values));
} else {
filteredData = data.sort((a,b)=> a.start-b.start);
}
filteredData.forEach(d=> d.color = d3.color(color(d.region)))
let parent = this;
if (!parent) {
parent = document.createElement("div");
const svg = d3.select(DOM.svg(width, height));
const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`);
const groups = g
.selectAll("g")
.data(filteredData)
.enter()
.append("g")
.attr("class", "civ")
const tooltip = d3.select(document.createElement("div")).call(createTooltip);
const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none");
groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`)
groups
.each(getRect)
.on("mouseover", function(d) {
d3.select(this).select("rect").attr("fill", d.color.darker())
tooltip
.style("opacity", 1)
.html(getTooltipContent(d))
})
.on("mouseleave", function(d) {
d3.select(this).select("rect").attr("fill", d.color)
tooltip.style("opacity", 0)
})
svg
.append("g")
.attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`)
.call(axisTop)
svg
.append("g")
.attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`)
.call(axisBottom)
svg.on("mousemove", function(d) {
let [x,y] = d3.mouse(this);
line.attr("transform", `translate(${x} 0)`);
y +=20;
if(x>width/2) x-= 100;
tooltip
.style("left", x + "px")
.style("top", y + "px")
})
parent.appendChild(svg.node());
parent.appendChild(tooltip.node());
parent.groups = groups;
} else {
const civs = d3.selectAll(".civ")
civs.data(filteredData, d=>d.civilization)
.transition()
// .delay((d,i)=>i*10)
.ease(d3.easeCubic)
.attr("transform", (d,i)=>`translate(0 ${y(i)})`)
}
return parent
}
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"
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.
