Public
Edited
Apr 18, 2023
1 fork
<svg width="1100" height="1100"> <!-- you can modify these values if you need -->
<style>
/* put styles in here. */
.guzzlerrects{
stroke:white;
stroke-width:2px;
}
.guzzlertitles{
text-anchor:end;
fill:white;
font: 25px arial;
}
.guzzlersubtitles{
text-anchor:end;
fill:white;
font: 15px arial;
}
}
</style>
<!-- Title -->
<text text-anchor="start" x=0 y="30" style="fill: black; font: 32pt arial">Land guzzlers</text>
<text text-anchor="start" x=0 y="50" style="fill: black; font: 12pt arial">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>
<!-- 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.
{
let colors=["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"];
let scale = 1000
landguzzlers.selectAll(".guzzlerrects")
.data(data)
.join("rect")
.attr("x", 0)
.attr("y", d => 1100-Math.sqrt(d['footprint']) * scale)
.attr("width", d=> Math.sqrt(d['footprint'])* scale)
.attr("height", d=> Math.sqrt(d['footprint'])* scale)
.style("fill", (data,i) => colors[i])
.attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement
landguzzlers.selectAll(".guzzlertitles")
.data(data)
.join("text")
.attr("x", d=> Math.sqrt(d['footprint'])* scale - 5)
.attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 25)
.text(d => d["title"])
.attr("class", "guzzlertitles");
landguzzlers.selectAll(".guzzlersubtitles")
.data(data)
.join("text")
.attr("x", d=> Math.sqrt(d['footprint'])* scale - 30)
.attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 50)
.text(d => d["subtitle"])
.attr("class", "guzzlersubtitles");
landguzzlers.selectAll(".guzzlersubtitles2")
.data(data)
.join("text")
.attr("x", d=> Math.sqrt(d['footprint'])* scale - 30)
.attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 70)
.text(d => d["subtitle2"])
.attr("class", "guzzlersubtitles");
landguzzlers.selectAll(".guzzlersubtitles3")
.data(data)
.join("text")
.attr("x", d=> Math.sqrt(d['footprint'])* scale - 30)
.attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 90)
.text(d => d["subtitle3"])
.attr("class", "guzzlersubtitles");
landguzzlers.selectAll(".sidetext")
.data(data)
.join("text")
.attr("transform" ,function(d,i){
var x = Math.sqrt(d['footprint'])* scale - 15;
var y = 1100 - Math.sqrt(d['footprint'])* scale + 215;
return "translate(" + x + "," + y + ") rotate(90)";})
.text(d => "Eco-footprint: " + d["footprint"] + " hectares")
.attr("class", "guzzlersubtitles");
}
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.
