Public
Edited
Apr 1, 2024
svgContainer = htl.html`<svg width="1100" height="1100">
<style>
/* edit these styles as you need */
rect {stroke: white; stroke-width: 2px;}
text {fill: white; font-family: 'Rajdhani', sans-serif;}
.maintitle {font-size: 39px; fill: black;}
.mainsubtitle {font-size: 18px; fill: black;}
.title {text-anchor: end; font-size: 32px;}
.subtext1, .subtext2, .subtext3 {text-anchor: end; font-size: 17px;}
.footprint {font-size: 17px;}
line {stroke: white; stroke-width: 2px;}
.line1 {stroke: white; stroke-width: 2px;}
.line2 {stroke: white; stroke-width: 2px;}
</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 => 1000*Math.sqrt(d["footprint"]))
.attr("height", d => 1000*Math.sqrt(d["footprint"]))
.attr("x", 0)
.attr("y", d => 1100 - 1000*Math.sqrt(d["footprint"]))
.style("fill", (d,i) => colors[i]); // I'll give you this one. Can you see how it works? See colors below.
landguzzlersViz.selectAll(".line1")
.data(land_guzzlers.filter(d => d["subtitle1","subtitle2","subtitle3"] !="")) // the name of the data object (see table below)
.join("line")
.attr("x1", d => 1000*Math.sqrt(d["footprint"]) - 26.5)
.attr("x2", d => 1000*Math.sqrt(d["footprint"]) - 276.5)
.attr("y1", d => 1000*Math.sqrt(d["footprint"]) - 696.5)
.attr("y2", d => 1000*Math.sqrt(d["footprint"]) - 696.5)
.attr("class","line")
landguzzlersViz.selectAll(".line2")
.data(land_guzzlers.filter(d => d["subtitle1","subtitle2","subtitle3"] !="")) // the name of the data object (see table below)
.join("line")
.attr("x1", d => 1000*Math.sqrt(d["footprint"]) - 26.5)
.attr("x2", d => 1000*Math.sqrt(d["footprint"]) - 26.5)
.attr("y1", d => 1000*Math.sqrt(d["footprint"]) - 696.5)
.attr("y2", d => 1000*Math.sqrt(d["footprint"]) - 635.7)
.attr("class","line")
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 => 1000*Math.sqrt(d["footprint"]) - 5)
.attr("y", d => 1100 - 1000*Math.sqrt(d["footprint"]) + 30)
.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(".footprint")
.data(land_guzzlers)
.join("text")
.attr("x", d => 1000*Math.sqrt(d["footprint"]) - 20)
.attr("y", d => (1100 - 1000*Math.sqrt(d["footprint"])) + 35)
.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'
landguzzlersViz.selectAll(".subtext1") // 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 => 1000*Math.sqrt(d["footprint"]) - 31)
.attr("y", d => 1100 - 1000*Math.sqrt(d["footprint"]) + 57)
.text(d => d["subtitle"]) // this is how we actually write the text content
.attr("class", "subtext1"); // tag it with the style class 'title'
landguzzlersViz.selectAll(".subtext2") // 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 => 1000*Math.sqrt(d["footprint"]) - 31)
.attr("y", d => 1100 - 1000*Math.sqrt(d["footprint"]) + 75)
.text(d => d["subtitle2"]) // this is how we actually write the text content
.attr("class", "subtext2"); // tag it with the style class 'title'
landguzzlersViz.selectAll(".subtext3") // 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 => 1000*Math.sqrt(d["footprint"]) - 31)
.attr("y", d => 1100 - 1000*Math.sqrt(d["footprint"]) + 93)
.text(d => d["subtitle3"]) // this is how we actually write the text content
.attr("class", "subtext3"); // tag it with the style class 'title'
}
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.
land_guzzlers
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.