chart = {
let filteredData;
if(sorting !== "time") {
filteredData = [].concat.apply([], dataByRegion.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
}
csv = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vSuR7ZetF-tNNtm2M8hLJub2rwdSiY_rgvG1refloI63CyjEWm60TGGglVXkLMT_QsifLk_lTP373VF/pub?output=csv")
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.
