Public
Edited
Apr 19, 2023
<svg width="1000" height="1000"> <!-- you can modify these values if you need -->
<style>
colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"]
<text text-anchor="end" style="font-family:Arial; font-size:12px; fill:white">".guzzlertitles" </text/>
<text transform="rotate(90 myX, myY) x= tjosRectWidth-10 y= thisRectY+18>
".guzzlersubtitles"</text>
</style>
<!-- You can also put some things static in here, like the main Landguzzlers title and subtitle at the top. Those are not drawn from data, so can be static. -->
</svg>
landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.
data = FileAttachment("land_guzzlers.csv").csv()
// this is the part that does the drawing.
// put a whole sequence of statements inside this { } code block.
{
const colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"];
landguzzlers.selectAll(".guzzlerrects")
.data(data)
.join("rect")
.attr("x", 0)
.attr("y", d => 1000 - d["footprint"] * 500)
.attr("width", d => d["footprint"] * 500)
.attr("height", d => d["footprint"] * 500)
.style("fill", (d, i) => colors[i])
.attr("class", "guzzlerrects");
landguzzlers.selectAll(".guzzlertitles")
.data(data)
.join("text")
.attr("x", d => d["footprint"] * 500 - 5)
.attr("y", d => d["footprint"] * 500 + 15)
.attr("class", "guzzlertitles");
landguzzlers.selectAll(".guzzlersubtitle2s")
.data(data)
.join("text")
.attr("x", d => d["footprint"] * 500 - 5)
.attr("y", d => d["footprint"] * 500 + 15)
.attr("class", ".guzzlersubtitle2s");
landguzzlers.selectAll(".guzzlersubtitle3s")
.data(data)
.join("text")
.attr("x", d => d["footprint"] * 500 - 5)
.attr("y", d => d["footprint"] * 500 + 15)
.attr("class", ".guzzlersubtitle3s");
}
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.
