Public
Edited
Apr 13
<svg width="1100" height="1100">
<style>
/* edit these styles as you need - this is a starting point*/
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;}
.title1 {text-anchor: end; font-size: 32px;}
.title2 {font-size: 32px;}
.subtext1, .subtext2, .subtext3 {text-anchor: end; font-size: 17px;}
.footprint1, .footprint2-1, .footprint2-2 {font-size: 17px;}
line {stroke: white; stroke-width: 2px;}
.line1, .line2 {}
</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.
let maxfp = Math.sqrt(d3.max(land_guzzlers, d => d.footprint))
let fp_guzzlers = land_guzzlers.filter((d, i, arr) => {
if (i === arr.length - 1) return true;
return d.footprint - arr[i + 1].footprint >= 0.05;
});
// draw Rectangles first - get this section to work before you try the others.
landguzzlersViz.selectAll("rect")
.data(land_guzzlers) // the name of the data object (see table below)
.join("rect")
.attr("width", d => (Math.sqrt(d.footprint)/maxfp)*1040)
.attr("height", d => (Math.sqrt(d.footprint)/maxfp)*1040)
.attr("x", 0)
.attr("y", d => 1100 - (Math.sqrt(d.footprint)/maxfp)*1040)
.style("fill", (d,i) => colors[i]); // I'll give you this one. Can you see how it works? See colors array below.
// uncomment lines below as you go to make them live, and edit.
// Command-slash(/) or Control-slash(/) on a line or selection of lines will comment / uncomment.
// // Now add the Large Dog, Toyota, etc. titles
// // notice that I'm selectingAll objects of a class called .title to only get those text elements.
landguzzlersViz.selectAll(".title1")
.data(land_guzzlers.filter(d => d.footprint >= 0.1)) // same dataset used again
.join("text") // new object type created
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)-5)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+30)
.text(d => d.title) // this is the text contents, eg. LARGE DOG
.attr("class", "title1"); // tag it with the style class 'title' so the selectAll above works.
// // Now the rotated Eco-Footprint text and values. Note the rotation transform.
landguzzlersViz.selectAll(".footprint1") // selecting a .class of objects again.
.data(fp_guzzlers.filter(d => d.footprint >= 0.1))
.join("text")
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)-15)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+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.
// // transform is "rotate(angle xPivotPoint yPivotPoint)" This is an SVG transform.
.attr("class", "footprint1"); // tag it with the style class 'footprint'
landguzzlersViz.selectAll(".title2")
.data(land_guzzlers.filter(d => d.footprint < 0.1)) // same dataset used again
.join("text") // new object type created
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)+5)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+30)
.text(d => d.title) // this is the text contents, eg. LARGE DOG
.attr("class", "title2"); // tag it with the style class 'title' so the selectAll above works.
// // Now the rotated Eco-Footprint text and values. Note the rotation transform.
landguzzlersViz.selectAll(".footprint2-1") // selecting a .class of objects again.
.data(fp_guzzlers.filter(d => d.footprint < 0.1))
.join("text")
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)+5)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+50)
.text("Eco-footprint:")
.attr("class", "footprint2-1"); // tag it with the style class 'footprint'
landguzzlersViz.selectAll(".footprint2-2") // selecting a .class of objects again.
.data(fp_guzzlers.filter(d => d.footprint < 0.1))
.join("text")
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)+5)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+70)
.text(d => d["footprint"] + " hectares")
.attr("class", "footprint2-2");
// ... what other objects do we need and how do we get them. Use the same approaches.
landguzzlersViz.selectAll(".subtext1")
.data(land_guzzlers) // same dataset used again
.join("text") // new object type created
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)-25)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+55)
.text(d => d.subtitle)
.attr("class", "subtext1");
landguzzlersViz.selectAll(".subtext2")
.data(land_guzzlers) // same dataset used again
.join("text") // new object type created
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)-25)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+75)
.text(d => d.subtitle2)
.attr("class", "subtext2");
landguzzlersViz.selectAll(".subtext3")
.data(land_guzzlers) // same dataset used again
.join("text") // new object type created
.attr("x", d => ((Math.sqrt(d.footprint)/maxfp)*1040)-25)
.attr("y", d => 1100-((Math.sqrt(d.footprint)/maxfp)*1040)+95)
.text(d => d.subtitle3)
.attr("class", "subtext3");
landguzzlersViz.selectAll(".line1")
.data(land_guzzlers.filter(d => d.subtitle !== "")) // the name of the data object (see table below)
.join("line")
.attr("x1", (d) => ((Math.sqrt(d.footprint)/maxfp)*1040)-300)
.attr("y1", (d) => 1100 - ((Math.sqrt(d.footprint)/maxfp)*1040)+35)
.attr("x2", (d) => ((Math.sqrt(d.footprint)/maxfp)*1040)-20)
.attr("y2", (d) => 1100 -((Math.sqrt(d.footprint)/maxfp)*1040)+35)
.attr("class", "line1");
landguzzlersViz.selectAll(".line2")
.data(land_guzzlers.filter(d => d.subtitle !== "")) // the name of the data object (see table below)
.join("line")
.attr("x1", (d) => ((Math.sqrt(d.footprint)/maxfp)*1040)-20)
.attr("y1", (d) => 1100 - ((Math.sqrt(d.footprint)/maxfp)*1040)+35)
.attr("x2", (d) => ((Math.sqrt(d.footprint)/maxfp)*1040)-20)
.attr("y2", (d) => 1100 -((Math.sqrt(d.footprint)/maxfp)*1040)+235)
.attr("class", "line2");
}
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.
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
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.
