megaSvg = {
const minX = x(total_by_city[0].city) + margin.left;
const maxX = x(total_by_city[total_by_city.length - 1].city) + width / 8;
const overwidth = maxX - minX + margin.left + margin.right;
const path = d3.geoPath().projection(projection);
const mega = d3.create("div");
var div = mega.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
mega.append("svg")
.attr("width", width/2)
.attr("height", height)
.style("position", "absolute")
.style("z-index", 1)
.call(svg => svg.append("g").call(whiteSquare))
.call(svg => ready(svg));
const parent = mega.append("svg")
.attr("transform", `translate(${width/ 2},0)`)
.attr("width", width/2)
.attr("height", height)
.style("position", "absolute")
.style("pointer-events", "none")
.style("display", "block")
.style("z-index", 1)
.call(svg => svg.append("g").call(yAxis))
.call(svg => svg.append("g").call(percent_yAxis))
.call(svg => svg.append("g").call(leg))
.call(svg => addTitles(svg))
const body = mega.append("div")
.style("overflow-x", "scroll")
.style("-webkit-overflow-scrolling", "touch");
let svg = body.append("svg")
.attr("transform", `translate(${width/ 2},0)`)
.attr("width", overwidth)
.attr("height", height/2)
.style("display", "block")
.call(svg => svg.append("g").call(xAxis))
.append("g")
.selectAll("g")
.attr("class", "bars")
.data(stackedData)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", (d) => x(d.data.city))
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth())
let svg2 = body.append("svg")
.attr("transform", `translate(${width/ 2},0)`)
.attr("width", overwidth)
.attr("height", height/2)
.style("display", "block")
.call(svg => svg.append("g").call(xAxis))
.append("g")
.selectAll("g")
.attr("class", "bars")
.data(percent_stackedData)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
svg2.join("rect")
.attr("x", (d) => x(d.data.city))
.attr("y", d => percent_y(d[1]))
.attr("height", d => percent_y(d[0]) - percent_y(d[1]))
.attr("width", x.bandwidth()/2)
svg2.join("text")
.attr("x", (d) => x(d.data.city) + x.bandwidth()/4)
.attr("y", percent_y(100) -5)
.attr("fill", "gray")
.attr("font-family", "sans-serif")
.attr("font-size", "10")
.attr("text-anchor", "middle")
.text("Victims")
let svg3 = body.append("svg")
.attr("transform", `translate(${width/ 2},-${height/2})`)
.attr("width", overwidth)
.attr("height", height/2)
.style("display", "block")
.append("g")
.selectAll("g")
.attr("class", "bars")
.data(percent_stacked_demographicsData)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
svg3.join("rect")
.attr("x", (d) => x(d.data.city)+x.bandwidth()/2)
.attr("y", d => percent_y(d[1]))
.attr("height", d => percent_y(d[0]) - percent_y(d[1]))
.attr("width", x.bandwidth()/2)
.style("opacity", d => {return 0.5
//return d.data.stateOrCity==="state"? 0.5 :1
})
svg3.join("text")
.attr("x", (d) => x(d.data.city) + (x.bandwidth() * 3)/4)
.attr("y", percent_y(100) -5)
.attr("fill", "gray")
.attr("font-family", "sans-serif")
.attr("font-size", "10")
.attr("text-anchor", "middle")
.text((d) => d.data.stateOrCity === "state" ? "State" : "City")
yield mega.node();
// Initialize the scroll offset after yielding the chart to the DOM.
body.node().scrollBy(0, 0);
}
html`<meta charset="utf-8">
<style>
.states {
stroke: #fff;
}
.states:hover {
stroke: #fff;
fill-opacity: .8;
}
.symbol {
fill-opacity: .8;
stroke: #fff;
}
.symbol:hover {
fill-opacity: .8;
stroke: #fff;
fill:#f00
}
</style>`
logTail(10)
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.
