Public
Edited
Apr 19, 2023
Insert cell
Insert cell
land_guzzlers.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
guzzlerdata= FileAttachment("land_guzzlers.csv").csv()
Insert cell
Insert cell
Insert cell
viz = d3.select(svgContainer)
Insert cell
boxes = viz.selectAll("rect")
.data(guzzzlerdata2)
.join("rect")
.attr("width", d.footprint => d.footprint*10)
.attr("height", d => d*10)
.attr("x", 50)
.attr("y", 20)
.style("opacity", 0.2)

Insert cell
<svg width="1000" height="1200">
<rect width="700" height= 700" x="0" y="0" style="fill:white"/>
<text text-anchor="start" x="0" y="100" style="font-family:Arial; font-size:20px; font-weight:200; fill:white">Land guzzlers </text>
<text text-anchor="start" x="0" y="130" style="font-family:Arial; font-size:8px; font-weight:300; fill:white">The ecological footprints of our pets can make SUVs look positively eco-friendly </text>

<rect width="656" height="656" x="0" y="144" style="fill:#a5620b"/>
<text text-anchor="end" x="656" y="174" style="font-family:Arial; font-size:16px; font-weight:300; fill:white">LARGE DOG </text/>
<text text-anchor="start" x="666" y="192" style="font-family:Arial; font-size:8px; font-weight:300; fill:white" transform="rotate(90,656,174)">Eco-footprint:1.1 hectares </text>

<rect width="600" height="600" x="0" y="200" style="stroke:white; stroke-width: 1px; fill:#c29657"/>
<text text-anchor="end" x="600" y="230" style="font-family:Arial; font-size:14px; fill:white">MEDIUM-SIZED DOG </text/>
<text text-anchor="start" x="720" y="250" style="font-family:Arial; font-size:9px; font-weight:300; fill:white" transform="rotate(90,656,174)">Eco-footprint:0.84 hectares </text>

<rect width="420" height="420" x="0" y="380" style="stroke:white; stroke-width: 1px; fill:#cc1f5e"/>
<text text-anchor="end" x="420" y="410" style="font-family:Arial; font-size:12px; fill:white">TOYOTA LAND CRUISER </text/>
<text text-anchor="end" x="386" y="436" style="font-family:Arial; font-size:6.5px; fill:white">10,000km DRIVEN PER YEAR</text>
<text text-anchor="end" x="386" y="452" style="font-family:Arial; font-size:6.5px; fill:white">55.1 gigajoules(includes energy required to fuel and construct)</text>
<text text-anchor="start" x="900" y="426" style="font-family:Arial; font-size:8px; font-weight:300; fill:white" transform="rotate(90,656,174)">Eco-footprint:0.41 hectares </text>

CONSUMPTION PER YEAR</text>
<text text-anchor="end" x="570" y="276" style="font-family:Arial; font-size:6.5px; fill:white">164kg of meat, 95kg of cereals</text>
<text text-anchor="end" x="570" y="292" style="font-family:Arial; font-size:6.5px; fill:white">43.3m2 of land per 1kg of chicken (more for beef and lamb), 13.4m2 of land per 1kg of cereals</text>
<rect width="280" height="280" x="0" y="520" style="stroke:white; stroke-width: 1px; fill:#a71949; stroke-opacity:0.5"/>
<text text-anchor="end" x="280" y="542" style="font-family:Arial; font-size:10px; fill:white; opacity:0.5">VOLKSWAGEN GOLF </text/>
<rect width="254" height="254" x="0" y="546" style="stroke:white; stroke-width: 1px; fill:#f7991d"/>
<text text-anchor="end" x="254" y="576" style="font-family:Arial; font-size:12px; fill:white">CAT </text/>
<text text-anchor="start" x="1060" y="594" style="font-family:Arial; font-size:8px; font-weight:300; fill:white" transform="rotate(90,656,174)">Eco-footprint:0.84 hectares </text>

<rect width="76" height="76" x="0" y=
"724" style="stroke:white; stroke-width: 1px; fill:#231f20"/>
<text text-anchor="start" x="76" y="754" style="font-family:Arial; font-size:12px; fill:white">HAMSTER</text/>
<text text-anchor="start" x="76" y="774" style="font-family:Arial; font-size:10px; fill:white">Eco-footprint</text>
<text text-anchor="start" x="76" y="796" style="font-family:Arial; font-size:10px; fill:white">0.014 hectares</text>
Insert cell
img_7847 = FileAttachment("IMG_7847.jpg").image()

Insert cell

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.
Learn more