Public
Edited
Apr 18, 2023
<svg width="1050" height="1050"> <!-- you can modify these values if you need -->
<style>
.guzzlerrects {stroke: white; stroke-width: 1.5px;}
.guzzlertitles {font-size: 20px; fill: white; text-anchor: end;}
.guzzlersubtitles {font-size: 12px; fill: white; text-anchor: end;}
.guzzlersubtitles2 {font-size: 12px; fill: white; text-anchor: end;}
.guzzlersubtitle3 {font-size: 12px; fill: white; text-anchor: end;}
.guzzlerrotate {font-size: 12px; fill: white; text-anchor: start;}
.guzzlerhorzline {stroke: white; stroke-width: 1.5px;}
.guzzlervertline {stroke: white; stroke-width: 1.5px;}
</style>
<!-- You can also put some things static in here, like the main Landguzzlers title and subtitle at the top. Those are not drawn from data, so can be static. -->
</svg>
landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.
data = FileAttachment("land_guzzlers.csv").csv()
// this is the part that does the drawing.
// put a whole sequence of statements inside this { } code block.
{
let colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"]; // have to do 'let' to declare a variable
landguzzlers.selectAll(".guzzlerrects")
.data(data)
.join("rect")
.attr("x", 0)
.attr("y", d => 1050 - (1000 * Math.sqrt(d['footprint'])) )
.attr("width", d => Math.sqrt(d['footprint'])*1000)
.attr("height", d => Math.sqrt(d['footprint'])*1000)
.style("fill", (d,i) => colors[i]) // need to put the color in here
.attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement
landguzzlers.selectAll(".guzzlertitles")
.data(data)
.join("text")
.attr("x", d => (Math.sqrt(d['footprint'])*1000) -3)
.attr("y", d => (1050 - (1000 * Math.sqrt(d['footprint']))) + 20)
.attr("class", "guzzlertitles")
.text(d => d["title"])
landguzzlers.selectAll(".guzzlerssubtitles")
.data(data)
.join("text")
.attr("x", d =>(Math.sqrt(d['footprint'])*1000) -30 )
.attr("y", d => (1050 - (1000 * Math.sqrt(d['footprint']))) + 38 )
.attr("class", "guzzlersubtitles")
.text(d => d["subtitle"])
landguzzlers.selectAll(".guzzlersubtitles2")
.data(data)
.join("text")
.attr("x", d =>(Math.sqrt(d['footprint'])*1000) -30)
.attr("y", d => (1050 - (1000 * Math.sqrt(d['footprint']))) + 50 )
.attr("class", "guzzlersubtitles2")
.text(d => d["subtitle2"])
landguzzlers.selectAll(".guzzlersubtitle3")
.data(data)
.join("text")
.attr("x", d =>(Math.sqrt(d['footprint'])*1000) -30)
.attr("y", d => (1050 - (1000 * Math.sqrt(d['footprint']))) + 63 )
.attr("class", "guzzlersubtitle3")
.text(d => d["subtitle3"])
landguzzlers.selectAll(".guzzlerrotate")
.data(data)
.join("text")
.attr("transform", function(d){
var xText = 1000 * Math.sqrt(d['footprint']) - 15;
var yText =1080 - 1000 * Math.sqrt(d['footprint']);
return "translate(" + xText + "," + yText + ") rotate(90)";})
.attr("class", "guzzlerrotate")
.text(d => "Eco-footprint: " + d["footprint"] + " Hectares")
let xVar = [0, 890, 615, 0, 0, 0]
let yVar = [0, 158, 435, 0, 0, 0]
let yVar2 = [0, 50, 460]
landguzzlers.selectAll(".guzzlerhorzline")
.data(data)
.join("line")
.attr("x1", (d,i) => xVar[i])
.attr("y1", (d,i) => yVar[i])
.attr("x2", (d,i) => xVar[i] - 190)
.attr("y2", (d,i) => yVar[i])
.attr("class", "guzzlerhorzline");
landguzzlers.selectAll(".guzzlervertline")
.data(data)
.join("line")
.attr("x1", (d,i) => xVar[i])
.attr("y1", (d,i) => yVar[i])
.attr("x2", (d,i) => xVar[i])
.attr("y2", (d,i) => yVar[i] + 70)
.attr("class", "guzzlerhorzline");
}
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.
