Public
Edited
Apr 2, 2024
<svg width="1100" height="1100">
<style>
rect {stroke: white; stroke-width: 2px;}
text {fill: white; font-family: 'Rajdhani', sans-serif;}
.maintitle {font-size: 39px; fill: black;}
.mainsubtitle {font-size: 17px; fill: black;}
.title {text-anchor: end; font-size: 32px;}
.title2 {font-size: 32px;}
.subtitle {text-anchor: end; font-size: 18px;}
.footprint {font-size: 18px;}
line {stroke: white; stroke-width: 1px;}
</style>
<text x="0" y="27" class="maintitle">Land guzzlers</text>
<text x="0" y="50" class="mainsubtitle">The ecological footprints of our pets can make SUVs look positively eco-friendly
</text>
<!-- the rest will be drawn by the data using D3 below -->
</svg>
{
let landguzzlersViz = d3.select(svgContainer) // select the cell called svgContainer and make it a d3 object.
landguzzlersViz.selectAll("rect")
.data(land_guzzlers) // the name of the data object (see table below)
.join("rect")
.attr("width", d => Math.sqrt(d["footprint"])*1000)
.attr("height", d => Math.sqrt(d["footprint"])*1000)
.attr("x", 0)
.attr("y", d => 1100-Math.sqrt(d["footprint"])*1000)
.style("fill", (d,i) => colors[i]); // I'll give you this one. Can you see how it works? See colors below.
landguzzlersViz.selectAll(".title") // notice that I'm selectingAll objects of a class called .title, to only get those text.
.data(land_guzzlers) // same dataset
.join("text") // new object type created
.attr("x", d => Math.sqrt(d["footprint"])*1000-5)
.attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+32)
.text(d => d["title"]) // this is how we actually write the text content
.attr("class", "title"); // tag it with the style class 'title'
landguzzlersViz.selectAll(".subtitle") // notice that I'm selectingAll objects of a class called .subtitle, to only get those text.
.data(land_guzzlers) // same dataset
.join("text") // new object type created
.attr("x", d => Math.sqrt(d["footprint"])*1000-30)
.attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+60)
.text(d => d["subtitle"]) // this is how we actually write the text content
.attr("class", "subtitle"); // tag it with the style class 'subtitle'
landguzzlersViz.selectAll(".subtitle2")
.data(land_guzzlers)
.join("text")
.attr("x", d => Math.sqrt(d["footprint"])*1000-30)
.attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+78)
.text(d => d["subtitle2"])
.attr("class", "subtitle");
landguzzlersViz.selectAll(".subtitle3")
.data(land_guzzlers)
.join("text")
.attr("x", d => Math.sqrt(d["footprint"])*1000-30)
.attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+96)
.text(d => d["subtitle3"])
.attr("class", "subtitle");
landguzzlersViz.selectAll(".footprint")
.data(land_guzzlers)
.join("text")
.attr("x", d => Math.sqrt(d["footprint"])*1000-15)
.attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+40)
.text(d => "Eco-footprint " + d["footprint"] + " hectares")
.attr("transform", (d,i,nodes) => "rotate(90 " + nodes[i].getAttribute("x") + " " + nodes[i].getAttribute("y") + ")")
// ^^ OK, so you would not have gotten this one on your own easily. See if you can figure it out.
// also compare this back against your manual SVG code for the rotate. Similar?
.attr("class", "footprint"); // tag it with the style class 'title'
// ... what other objects
}
colors = ["#a5620b","#c29657","#cc1f5e","#a71949","#f7991d","#231f20"]; // in order Large Dog to Hamster. Reference as colors[i]
land_guzzlers.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
