Public
Edited
Mar 18, 2023
<svg width="1000" height="1000" id="guzzlers">
<style>
rect {stroke: white; stroke-width: 2px}
.title {font-family: "Verdana"; font-size:24px; fill: white;}
.subtitle {font-family: "Verdana"; font-size:16px; fill: white;}
</style>
</svg>
guzzler_data = FileAttachment("LandGuzzler_Data.csv").csv();
guzzler_data.forEach((d)=>{
d.Footprint = Number(d.Footprint);
});
Inputs.table(guzzler_data)
chart = {
let mySVG = d3.select(SVG);
let sq_dim = 1000
let scalar = 858.12357 // Calculated based on Large Dog footprint and desired 900x900 pixel area
// Rectangles
let squares = mySVG.selectAll('rect')
.data(guzzler_data)
.join('rect')
.attr('x', 0)
.attr('y', d => sq_dim - ((d.Footprint**0.5) * scalar))
.attr('height', d => (d.Footprint**0.5) * scalar)
.attr('width', d => (d.Footprint**0.5) * scalar)
.style('fill', d => d.Color);
// Rectangle Labels
let labels = mySVG.selectAll(".title")
.data(guzzler_data)
.join("text")
.text(d => d.Name)
.attr("text-anchor", d => {
if (d.Name == "HAMSTER") { // Different position relative to rectangle
return "start";
} else {
return "end";
}
})
.attr("x", d => {
if (d.Name == "HAMSTER") { // Different position relative to rectangle
return ((d.Footprint**0.5) * scalar) + 5;
} else {
return ((d.Footprint**0.5) * scalar) - 5;
}
})
.attr("y", d => sq_dim - ((d.Footprint**0.5) * scalar) + 24)
.classed("title", true);
// Additional rectangle text
let add_text = mySVG.selectAll(".subtitle")
.data(guzzler_data)
.join("text")
.text(d => {
if (d.Name == "VOLKSWAGON GOLF") { // No additional text
return "";
} else {
if (d.Name == "HAMSTER") { // Text split across lines (see below for conclusion)
return "Eco-footprint:";
} else {
return "Eco-footprint: " + d.Footprint + " hectares";
}
}
})
.attr("text-anchor", d => {
if (d.Name == "HAMSTER") { // Different anchor because position/orientation unique
return "start";
} else {
return "end";
}
})
.attr("transform", d => {
if (d.Name == "HAMSTER") { // No need to rotate
return "rotate(0)";
} else {
return "rotate(90 500,500)"; // Choice of (500,500 was arbitrary)
}
})
.attr("x", (d, i) => {
if (d.Name == "HAMSTER") {
return ((d.Footprint**0.5) * scalar) + 5;
} else {
return sq_dim - ((d.Footprint**0.5) * scalar) + 250 + 2*i;
//((d.Footprint**0.5) * scalar) - 5;
}
})
.attr("y", d => {
if (d.Name == "HAMSTER") {
return sq_dim - ((d.Footprint**0.5) * scalar) + 40;
} else {
return sq_dim - ((d.Footprint**0.5) * scalar) + 20;
}
})
.classed("subtitle", true);
// Finishing out Hamster text on new line
mySVG.append("text")
.text(guzzler_data[5].Footprint + " hectares")
.attr("text-anchor", "start")
.attr("x", ((guzzler_data[5].Footprint**0.5)*scalar) + 5)
.attr("y", sq_dim - ((guzzler_data[5].Footprint**0.5) * scalar) + 60)
.classed("subtitle", true);
// Figure Title
mySVG.append("text")
.text("Land guzzlers")
.attr("text-anchor", "start")
.attr("x", 5)
.attr("y", 50)
.style("font-size", "36px")
.style("font-family", "Verdana");
// Figure Subtitle
mySVG.append("text")
.text("The ecological footprints of our pets can make SUVs look positively eco-friendly")
.attr("text-anchor", "start")
.attr("x", 5)
.attr("y", 80)
.style("font-size", "16px")
.style("font-family", "Verdana");
// Accent lines - Set 1 (Medium Dog)
mySVG.append("line")
.attr("x1", ((guzzler_data[1].Footprint**0.5) * scalar) - 27)
.attr("x2", ((guzzler_data[1].Footprint**0.5) * scalar) - 27)
.attr("y1", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 28)
.attr("y2", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 80)
.style("stroke-width", "1")
.style("stroke", "white");
mySVG.append("line")
.attr("x1", ((guzzler_data[1].Footprint**0.5) * scalar) - 27)
.attr("x2", ((guzzler_data[1].Footprint**0.5) * scalar) - 200)
.attr("y1", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 28)
.attr("y2", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 28)
.style("stroke-width", "1")
.style("stroke", "white");
// Accent lines - Set 2 (Toyota)
mySVG.append("line")
.attr("x1", ((guzzler_data[2].Footprint**0.5) * scalar) - 27)
.attr("x2", ((guzzler_data[2].Footprint**0.5) * scalar) - 27)
.attr("y1", sq_dim - ((guzzler_data[2].Footprint**0.5) * scalar) + 28)
.attr("y2", sq_dim - ((guzzler_data[2].Footprint**0.5) * scalar) + 80)
.style("stroke-width", "1")
.style("stroke", "white");
mySVG.append("line")
.attr("x1", ((guzzler_data[2].Footprint**0.5) * scalar) - 27)
.attr("x2", ((guzzler_data[2].Footprint**0.5) * scalar) - 350)
.attr("y1", sq_dim - ((guzzler_data[2].Footprint**0.5) * scalar) + 28)
.attr("y2", sq_dim - ((guzzler_data[2].Footprint**0.5) * scalar) + 28)
.style("stroke-width", "1")
.style("stroke", "white");
// Medium Dog Commentary
mySVG.append("text")
.text("CONSUMPTION PER YEAR")
.attr("text-anchor", "end")
.attr("x", ((guzzler_data[1].Footprint**0.5) * scalar) - 30)
.attr("y", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 45)
.style("font-size", "14px")
.style("fill", "white")
.style("font-family", "Verdana");
mySVG.append("text")
.text("164kg of meat, 95kg of cereals")
.attr("text-anchor", "end")
.attr("x", ((guzzler_data[1].Footprint**0.5) * scalar) - 30)
.attr("y", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 60)
.style("font-size", "14px")
.style("fill", "white")
.style("font-family", "Verdana");
mySVG.append("text")
.text("43.3m2 of land per 1kg chicken (more for beef and lamb), 13.4m2 of land per 1kg of cereals")
.attr("text-anchor", "end")
.attr("x", ((guzzler_data[1].Footprint**0.5) * scalar) - 30)
.attr("y", sq_dim - ((guzzler_data[1].Footprint**0.5) * scalar) + 75)
.style("font-size", "14px")
.style("fill", "white")
.style("font-family", "Verdana");
// Land Cruiser Commentary
mySVG.append("text")
.text("10,000km DRIVEN PER YEAR")
.attr("text-anchor", "end")
.attr("x", ((guzzler_data[2].Footprint**0.5) * scalar) - 30)
.attr("y", sq_dim - ((guzzler_data[2].Footprint**0.5) * scalar) + 45)
.style("font-size", "14px")
.style("fill", "white")
.style("font-family", "Verdana");
mySVG.append("text")
.text("55.1 gigajoules (includes energy required to fuel and construct)")
.attr("text-anchor", "end")
.attr("x", ((guzzler_data[2].Footprint**0.5) * scalar) - 30)
.attr("y", sq_dim - ((guzzler_data[2].Footprint**0.5) * scalar) + 60)
.style("font-size", "14px")
.style("fill", "white")
.style("font-family", "Verdana");
}
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.
