Public
Edited
Apr 15
{
let landguzzlersViz = d3.select(svgContainer)
// select the cell called svgContainer and make it a d3 object.
// draw Rectangles first - get this section to work before you try the others.
land_guzzlers.sort((a, b) => b.footprint - a.footprint);
const scaleFactor = 980; // Tweak this until the largest block fits your SVG nicely.
const svgHeight = 1100;
landguzzlersViz.selectAll("rect")
.data(land_guzzlers) // the name of the data object (see table below)
.join("rect")
.attr("width", d => Math.sqrt(d.footprint) * 1000)
.attr("height", d => Math.sqrt(d.footprint) * 1000)
.attr("x", (d, i) => 50 + i * 110)
.attr("x", 0)
.attr("y", d => {
let side = Math.sqrt(d.footprint) * scaleFactor;
return svgHeight - side; // or svgHeight - side - 50 for margin
})
.style("fill", (d, i) => colors[i])
.style("stroke", "#fff")
.style("stroke-width", 2);
// 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(".title")
.data(land_guzzlers) // same dataset used again
.data(land_guzzlers.filter(d => d.title !== "HAMSTER")) // filter out "HAMSTER"
.join("text") // new object type created
.attr("x", d => Math.sqrt(d.footprint) * 1000 - 10)
.attr("y", d => svgHeight - Math.sqrt(d.footprint) * scaleFactor + 27)
.text(d => d.title) // this is the text contents, eg. LARGE DOG
.attr("class", "title"); // 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(".footprint")
.data(land_guzzlers)
.join("text")
.data(land_guzzlers.filter(d => d.footprint !== "0.014"))
.data(land_guzzlers.filter(d => d.title !== "HAMSTER"))
.attr("x", d => Math.sqrt(d.footprint) * 1000 -23)
.attr("y", d => svgHeight - Math.sqrt(d.footprint) * scaleFactor + 32)
.text(d => "Eco-footprint" + d.footprint + "hectacres")
// Rotate 90° around the computed (x, y) position.
.attr("transform", function(d, i, nodes) {
let x = nodes[i].getAttribute("x");
let y = nodes[i].getAttribute("y");
return "rotate(90 " + x + " " + y + ")";
})
.style("font-size", "24px") // Increase font size to 24px.
.attr("class", "footprint");
}
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.
