Public
Edited
Apr 16, 2023
<svg width="1200" height="1200"> <!-- you can modify these values if you need -->
<style>
.maintext {font-size:26px; fill:white; font-family:helvetica; font-weight:lighter;}
.subtext {font-size:18px; fill:white; font-family:helvetica; font-weight:lighter;}
.subtext2 {font-size:18px; fill:white; font-family:helvetica; font-weight:lighter;}
.hamtext {font-size:20px; fill:white; font-family:helvetica; font-weight:lighter;}
.rect {stroke: white; stroke-width: 2px;}
</style>
<text text-anchor="start" x= "5" y="30" font-size = "26" fill = "black" class = "font"> Land guzzlers </text>
<text text-anchor="start" x= "5" y="45" font-size = "14" fill = "black" class = "font"> 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>
// this is the part that does the drawing.
// put a whole sequence of statements inside this { } code block.
{
landguzzlers.selectAll(".guzzlerects")
.data(data.filter(d => d["title"] != "HAMSTER"))
.join("rect")
.attr("x", 0)
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000))
.attr("width", d => Math.sqrt(Number(d["footprint"]))*1000)
.attr("height", d => Math.sqrt(Number(d["footprint"]))*1000)
.style("fill", (d, i) => colors[i])
.attr("class", "rect");
landguzzlers.selectAll(".guzzlerects")
.data(data.filter(d => d["title"] == "HAMSTER"))
.join("rect")
.attr("x", 0)
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*600))
.attr("width", d => Math.sqrt(Number(d["footprint"]))*600)
.attr("height", d => Math.sqrt(Number(d["footprint"]))*600)
.style("fill", (d, i) => colors[5])
.attr("class", "rect");
landguzzlers.selectAll(".textminusham")
.data(data.filter(d => d["title"] != "HAMSTER"))
.enter()
.append('text')
.join(".textminusham")
.text(d=>d["title"])
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*1000 - 6))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000) + 29)
.attr("text-anchor", "end")
.attr("class", "maintext");
landguzzlers.selectAll(".textham")
.data(data.filter(d => d["title"] == "HAMSTER"))
.enter()
.append('text')
.join(".textham")
.text(d=>d["title"])
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*600 + 2))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*600) + 20)
.attr("text-anchor", "start")
.attr("class", "hamtext");
landguzzlers.selectAll(".subtext")
.data(data)
.enter()
.append("text")
.join(".subtext")
.text(d=>d["subtitle"])
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*1000 - 30))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000 + 50))
.attr("text-anchor", "end")
.attr("class", "subtext");
landguzzlers.selectAll(".subtext2")
.data(data)
.enter()
.append("text")
.join(".subtext2")
.text(d=>d["subtitle2"])
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*1000 - 30))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000 + 70))
.attr("text-anchor", "end")
.attr("class", "subtext");
landguzzlers.selectAll(".subtext3")
.data(data)
.enter()
.append("text")
.join(".subtext3")
.text(d=>d["subtitle3"])
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*1000 - 30))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000 + 90))
.attr("text-anchor", "end")
.attr("class", "subtext");
landguzzlers.selectAll(".ecoprint")
.data(data.filter(d => (d["title"] != "HAMSTER" && d["title"] != "VOLKSWAGEN GOLF")))
.join("text")
.text((d) => "Eco-footprint: " + d.footprint + " hecares")
.attr("x", (d) => 1100 - Math.sqrt(d.footprint) * 1000 + 32)
.attr("y", (d) => 1100 - Math.sqrt(d.footprint) * 1000 - 1080)
.attr("transform", "rotate(90)")
.attr("class", "subtext2");
landguzzlers.selectAll(".ecoprint")
.data(data.filter(d => d["title"] == "HAMSTER"))
.join("text")
.text((d) => "Eco-footprint:")
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*600 + 2))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*600) + 40)
.attr("text-anchor", "start")
.attr("class", "subtext2");
landguzzlers.selectAll(".ecoprint")
.data(data.filter(d => d["title"] == "HAMSTER"))
.join("text")
.text((d) => d.footprint)
.attr("x", d => (Math.sqrt(Number(d["footprint"]))*600 + 2))
.attr("y", d => (1100 - Math.sqrt(Number(d["footprint"]))*600) + 60)
.attr("text-anchor", "start")
.attr("class", "subtext2");
landguzzlers.selectAll(".horlines")
.data(data.filter(d => d["subtitle"] != ""))
.join("line")
.attr("x1", d => (Math.sqrt(Number(d["footprint"]))*1000 - 26))
.attr("x2", d => (Math.sqrt(Number(d["footprint"]))*1000 -350))
.attr("y1", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000) + 31)
.attr("y2", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000) + 31)
.style("stroke", "#fff4ee")
.style("stroke-width", 2)
.style("fill", "none");
landguzzlers.selectAll(".vertlines")
.data(data.filter(d => d["subtitle"] != ""))
.join("line")
.attr("x1", d => (Math.sqrt(Number(d["footprint"]))*1000 - 26))
.attr("x2", d => (Math.sqrt(Number(d["footprint"]))*1000 -26))
.attr("y1", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000) + 31)
.attr("y2", d => (1100 - Math.sqrt(Number(d["footprint"]))*1000) + 101)
.style("stroke", "#fff4ee")
.style("stroke-width", 2)
.style("fill", "none");
}
landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.
data = FileAttachment("land_guzzlers.csv").csv();
colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"];
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.
