Public
Edited
Apr 17, 2023
landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.
data = FileAttachment("land_guzzlers.csv").csv()
colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"]
// 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-Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)))
.attr("width", d => Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)))
.attr("height", d => Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)))
.style("stroke", "white")
.style("stroke-width", 2)
.style("propertyname", d => d["title"])
.style("fill", (d,i) => colors[i]) // finds the i_th color in the set, matched to the i_th element in the data
.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("x", d => Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) - 5)
.attr("y", d => 1000-Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) + 30)
.style("text-anchor", d => {if (d.title != "HAMSTER") {return "end"}})
.style("fill","white")
.style("font-size", 35)
.style("font-family", "Ubuntu")
.attr("class", "guzzlertitles");
landguzzlers.selectAll(".guzzlersubtitle1")
.data(data)
.join("text")
.text(d => d["subtitle"])
.attr("x", d => Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) - 25 )
.attr("y", d => 1000-Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) + 60)
.style("text-anchor", "end")
.style("fill", "white")
.style("font-size", 18)
.style("font-family", "Ubuntu")
.attr("class", "guzzlersubtitle1");
landguzzlers.selectAll(".guzzlersubtitle2")
.data(data)
.join("text")
.text(d => d["subtitle2"])
.attr("x", d => Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) - 25 )
.attr("y", d => 1000-Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) + 80)
.style("text-anchor", "end")
.style("fill", "white")
.style("font-size", 18)
.style("font-family", "Ubuntu")
.attr("class", "guzzlersubtitle2");
landguzzlers.selectAll(".guzzlersubtitle3")
.data(data)
.join("text")
.text(d => d["subtitle3"])
.attr("x", d => Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) - 25 )
.attr("y", d => 1000-Math.sqrt(Number(d["footprint"]))*(1000/Math.sqrt(1.1)) + 100)
.style("text-anchor", "end")
.style("fill", "white")
.style("font-size", 18)
.style("font-family", "Ubuntu")
.attr("class", "guzzlersubtitle3");
landguzzlers.selectAll(".guzzlerrotatetext")
.data(data)
.join("text")
.text(d => ("Eco-footprint: " + d["footprint"] + " hectares"))
.attr("transform", d => "translate(" + (Math.sqrt(Number(d['footprint']))*(1000/Math.sqrt(1.1)) - 18) + "," + (1000-Math.sqrt(Number(d['footprint']))*(1000/Math.sqrt(1.1)) + 40) + ") rotate(90)")
.style("fill", "white")
.style("font-size", 18)
.style("font-family", "Ubuntu")
.attr("class", "guzzlerrotatetext");
}
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.
