Public
Edited
Mar 18, 2023
<svg width="1000" height="1060">
<text x=10 y=30 class="title">Land guzzlers</text>
<text x=10 y=55 class="subtitle">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>
<text x=995 y=30 class="newscientist">©NewScientist</text>
<rect width=1000 height=1000 x=0 y=60 style="fill: #a5620b" />
<text x=995 y=90 class="label" font-size=32>LARGE DOG</text>
<text class="eco" transform="translate(980,97) rotate(90)">Eco-footprint: 1.1 hectares</text>
<rect width=874 height=874 x=0 y=186 style="fill: #c29657" />
<text x=869 y=216 class="label" font-size=30>MEDIUM-SIZED DOG</text>
<text class="eco" transform="translate(854,223) rotate(90)">Eco-footprint: 0.84 hectares</text>
<line class="lines" x1="520" x2="845" y1="225" y2="225" />
<line class="lines" x1="845" x2="845" y1="225" y2="300" />
<text x=841 y=245 class="caption">CONSUMPTION PER YEAR</text>
<text x=841 y=265 class="caption">164kg of meat, 95kg of cereals</text>
<text x=841 y=287 class="caption">43.3m² of land per 1kg of chicken (more for beef and lamb), 13.4m² of land per 1kg of cereals</text>
<rect width=611 height=611 x=0 y=449 style="fill: #cc1f5e" />
<text x=606 y=479 class="label" font-size=26>TOYOTA LAND CRUISER</text>
<text class="eco" transform="translate(591,486) rotate(90)">Eco-footprint: 0.41 hectares</text>
<line class="lines" x1="270" x2="585" y1="488" y2="488" />
<line class="lines" x1="585" x2="585" y1="488" y2="540" />
<text x=580 y=510 class="caption">10,000km DRIVEN PER YEAR</text>
<text x=580 y=532 class="caption">55.1 gigajoules (includes energy required to fuel and construct)</text>
<rect width=405 height=405 x=0 y=655 style="fill: #a71949" />
<text x=400 y=681 class="label" font-size=22>VOLKSWAGEN GOLF</text>
<rect width=370 height=370 x=0 y=690 style="fill: #f7991d" />
<text x=365 y=721 class="label" font-size=26>CAT</text>
<text class="eco" transform="translate(350,728) rotate(90)">Eco-footprint: 0.15 hectares</text>
<rect width=74 height=74 x=0 y=986 style="fill: #231f20" />
<text x=75 y=1010 font-family=verdana fill=#fff text-anchor=start font-size=24>HAMSTER</text>
<text x=75 y=1032 font-size=17 font-family=verdana fill=white>Eco-footprint:</text>
<text x=75 y=1054 font-size=17 font-family=verdana fill=white>0.014 hectares</text>
</svg>
<style>
rect {
stroke: white;
stroke-width: 2px;
}
.label {
font-family:verdana, sans-serif;
fill: #fff;
text-anchor: end;
test-align: right-justify;
font-weight: light;
}
.eco {
font-family:verdana, sans-serif;
font-size: 20px;
fill: #fff;
text-anchor: start;
}
.lines {
stroke: white;
stroke-width: 1;
}
.caption {
font-family:verdana, sans-serif;
font-size: 16px;
fill: #fff;
text-anchor: end;
}
.title {
font-size: 42px;
font-family:TheSans Light, sans-serif;
margin-bottom:0;
}
.subtitle {
font-size: 18px;
font-family: verdana, sans-serif;
white-space: nowrap;
margin : 0;
padding-top:0;
}
.newscientist{
font-size: 22px;
font-family: verdana, sans-serif;
font-weight: bold;
text-anchor: end;
fill: #909090;
}
</style>
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.
