Public
Edited
Apr 16, 2023
<svg width="1000" height="1000"> <!-- you can modify these values if you need -->
<style>
rect {stroke: white; stroke-width: 2px}
.guzzlertitle {font-family: "Verdana"; font-size:22px; fill: white;}
.guzzlersubtitle {font-family: "Verdana"; font-size:14px; fill: white;}
.guzzlersubtitle2 {font-family: "Verdana"; font-size:14px; fill: white;}
.guzzlersubtitle3 {font-family: "Verdana"; font-size:14px; fill: white;}
.guzzlerrotate {font-family: "Verdana"; font-size:15px; fill: white;}
</style>
<!-- Static Items -->
<text x = "5" y = "50" font-size = "36px" font-family = "Verdana">Land guzzlers</text>
<text x = "5" y = "80" font-size = "16px" font-family = "Verdana">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>
</svg>
landguzzlers = d3.select(svgContainer) // now a d3 object.
data = FileAttachment("land_guzzlers@1.csv").csv()
// this is the part that does the drawing.
// put a whole sequence of statements inside this { } code block.
{
landguzzlers.selectAll(".guzzlerrects")
.data(data)
.join("rect")
.attr("x", 0)
.attr("y", d => 1000 - ((d.footprint**0.5) * 858.12357))
.attr("width", d => (d.footprint**0.5) * 858.12357)
.attr("height", d => (d.footprint**0.5) * 858.12357)
.style("fill", d => d.color)
.attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement
landguzzlers.selectAll(".guzzlertitles")
.data(data)
.join("text")
.text(d => d.title)
.attr("text-anchor", d => {
if (d.title == "HAMSTER") { // Different anchor because position/orientation unique
return "start";
} else {
return "end";
}
})
.attr("x", d => {
if (d.title == "HAMSTER") { // Different position relative to rectangle
return ((d.footprint**0.5) * 858.12357) + 5;
} else {
return ((d.footprint**0.5) * 858.12357) - 5;
}
})
.attr("y", d => 1000 - ((d.footprint**0.5) * 858.12357) + 24)
.attr("class", "guzzlertitle");
landguzzlers.selectAll(".guzzlersubtitle")
.data(data)
.join("text")
.text(d => d.subtitle)
.attr("text-anchor", d => {
if (d.title == "HAMSTER") { // Different anchor because position/orientation unique
return "start";
} else {
return "end";
}
})
.attr("x", d => {
if (d.title == "HAMSTER") { // Different position relative to rectangle
return ((d.footprint**0.5) * 858.12357) + 5;
} else {
return ((d.footprint**0.5) * 858.12357) - 35;
}
})
.attr("y", d => 1000 - ((d.footprint**0.5) * 858.12357) + 45)
.attr("class", "guzzlersubtitle");
landguzzlers.selectAll(".guzzlersubtitle2")
.data(data)
.join("text")
.text(d => d.subtitle2)
.attr("text-anchor", d => {
if (d.title == "HAMSTER") { // Different anchor because position/orientation unique
return "start";
} else {
return "end";
}
})
.attr("x", d => {
if (d.title == "HAMSTER") { // Different position relative to rectangle
return ((d.footprint**0.5) * 858.12357) + 5;
} else {
return ((d.footprint**0.5) * 858.12357) - 35;
}
})
.attr("y", d => 1000 - ((d.footprint**0.5) * 858.12357) + 60)
.attr("class", "guzzlersubtitle2");
landguzzlers.selectAll(".guzzlersubtitle3")
.data(data)
.join("text")
.text(d => d.subtitle3)
.attr("text-anchor", d => {
if (d.title == "HAMSTER") { // Different anchor because position/orientation unique
return "start";
} else {
return "end";
}
})
.attr("x", d => {
if (d.title == "HAMSTER") { // Different position relative to rectangle
return ((d.footprint**0.5) * 858.12357) + 5;
} else {
return ((d.footprint**0.5) * 858.12357) - 35;
}
})
.attr("y", d => 1000 - ((d.footprint**0.5) * 858.12357) + 75)
.attr("class", "guzzlersubtitle3");
landguzzlers.selectAll(".guzzlerrotate")
.data(data)
.join("text")
.text(d => {
if (d.title == "VOLKSWAGON GOLF") { // No additional text
return "";
} else {
return "Eco-footprint: " + d.footprint + " hectares";
}
})
.attr("text-anchor", d => "start")
.attr("x", d => {
if (d.title == "HAMSTER") {
return ((d.footprint**0.5) * 858.12357) + 5;
} else {
return 1000 - ((d.footprint**0.5) * 858.12357) + 30;
}
})
.attr("y", d => {
if (d.title == "HAMSTER") {
return 1000 - ((d.footprint**0.5) * 858.12357) + 40;
} else {
return 1000 - ((d.footprint**0.5) * 858.12357) + 20;
}
})
.attr("transform", d => {
if (d.title == "HAMSTER") { // No need to rotate
return "rotate(0)";
} else {
return "rotate(90 500,500)"; // Choice of (500,500) was arbitrary
}
})
.attr("class", "guzzlerrotate");
}
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.
