Public
Edited
Apr 30, 2023
<svg width="1000" height="1000"> <!-- you can modify these values if you need -->
<style>
<style>
.title {
font-family: 'Lucida Grande', monospace;
font-size: 32px;
fill: black;
}
.title-sub {
font-family: 'Lucida Grande', monospace;
font-size: 15px;
fill: black;
}
.logo {
font-family: 'Verdana', sans-serif;
font-size: 14px;
fill: '#d4d4d4';
}
.label {
font-family:Arial, Helvetica, sans-serif;
font-size: 8px;
fill: black;
}
.category {
font-family: 'Lucida Grande', monospace;
font-size: 25px;
fill: white;
}
.category-2 {
font-family: 'Lucida Grande', monospace;
font-size: 16px;
fill: white;
}
.category-sub {
font-family: 'Lucida Grande', monospace;
font-size: 12px;
fill: white;
</style>
</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. -->
<!--TITLE: start at x=9.5 -->
<text text-anchor="start" x=9.5 y=38 class="title">Land guzzlers</text>
<text text-anchor="start" x=9.5 y=60 class="title-sub">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>
<text x="560" y="30" class="logo">©NewScientist</text>
!--LARGE DOG TXT -->
<text text-anchor="end" x=670.2222 y=91.4688 class="category">LARGE DOG</text>
<text text-anchor="start" class="category-sub" transform="translate(660,96)rotate(90)">Eco-footprint: 0.84</text>
<!--MED DOG-->
<text text-anchor="end" x=585.4089 y=177.4688 class="category">MEDIUM-SIZED DOG</text>
<text text-anchor="end" x =565.4089 y=202 class="category-sub">CONSUMPTION PER YEAR</text>
<text text-anchor="end" x =565.4089 y=217 class="category-sub">164kg of meat, 95kg of cereals</text>
<text text-anchor="end" x =565.4089 y=232 class="category-sub">43.3m of land per 1kg of chicken (more for beef and lamb), 13.4m of land per 1kg of cereals</text>
<text text-anchor="start" class="category-sub" transform="translate(575.4089,185.468) rotate(90)">Eco-footprint: 0.84 hectares</text>
<!--TOYOTA-->
<text text-anchor="end" x=408.8448 y=354 class="category">TOYOTA LAND CRUISER</text>
<text text-anchor="end" x=388.8448 y=372 class="category-sub">10,000km DRIVEN PER YEAR</text>
<text text-anchor="end" x=388.8448 y=382 class="category-sub">55.1 gigajoules (includes energy required to fuel and construct)</text>
<text text-anchor="start" class="category-sub" transform="translate(398.8448,360) rotate(90)">Eco-footprint: 0.41 hectares</text>
<!--VOLKSWAGEN-->
<text text-anchor="end" x=275 y=485 class="category-2">VOLKSWAGEN GOLF</text>
<!--CAT-->
<text text-anchor="middle" x=225 y=515.7734 class="category">CAT</text>
<text text-anchor="start" class="category-sub" transform="translate(238,518) rotate(90)">Eco-footprint: 0.15 hectares</text>
<!--HAMSTER: left aligned next to black square-->
<text text-anchor="left" x=61 y=706 class="category-2">HAMSTER</text>
<text text-anchor="left" x=61 y=716 class="category-sub">Eco-footprint:</text>
<text text-anchor="left" x=61 y=726 class="category-sub">0.014 hectares</text>
</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.
{
landguzzlers.selectAll(".guzzlerrects")
.data(data)
.join("rect")
.attr("x", 9.5)
.attr("y", replace_this_with_some_value_or_calculation_from_d)
.attr("width", replace_this_with_some_value_or_calculation_from_d)
.attr("height", replace_this_with_some_value_or_calculation_from_d)
.style("propertyname", replace_this_with_some_value_or_calculation_from_d)
.attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement
myViz.selectAll(".guzzlerrects")
.data(data)
.join("rect")
.attr("x", 0)
.attr("y", d => d["footprint"] *69)
.attr("width", d => d["footprint"]*605.45)
.attr("height", ...)
.style("property_name", value) // this could also be from a d => d["column name"]
.attr("class", "guzzlerrects") // or use other classes that you define in <style>
landguzzlers.selectAll(".guzzlertitles")
.data(data)
.join("text")
.attr("x", replace_this_with_some_value_or_calculation)
// ...
.attr("class", "guzzlertitles");
}
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.
