Public
Edited
Apr 18, 2023
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<svg width="1000" height="1000">
<style>
/* put style rules in this section. These will apply to the whole file */
/* you can also use inline style="property:value; property:value;" statements in the svg elements below. */
.yoursHere {fill: someColor; stroke: someColor; stroke-width: someSizeInPixels}
.header {font-size: 30px;}
text {font-family: 'Ubuntu Condensed', sans-serif; z-index:2;}
.title {font-size:25px;}
.sub-title {font-size:18px;}
.title, .sub-title {fill: white;}
rect {stroke: white; stroke-width: 2px;}
line {stroke: white; stroke-width: 1px;}
</style>
<!-- svg graphic elements go here, like <rect>, <line>, <text> -->
<!-- remember that 0,0 (x=0, y=0) is at the top-left of the svg drawing space -->
<rect x="0" y="0" width="1000" height="1000" style="fill:blue;"/>
<text x="20" y="40" class="header">Land guzzlers</text>
<text x="20" y="70" class="sub-header">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>
<rect x="20" y="80" width="900" height="900" style="fill:#a5620b;"/>
<text x="900" y="120" class="title" text-anchor="end">LARGE DOG</text>
<text x="900" y="130" class="sub-title" text-anchor="start" alignment-baseline="hanging" transform="rotate(90, 900, 130)">Eco-footprint: 1.1 hectares</text>
<rect x="20" y="162" width="818" height="818" style="fill:#c29657;"/>
<text x="818" y="200" class="title" text-anchor="end">MEDIUM-SIZED DOG</text>
<text x="818" y="210" class="sub-title" text-anchor="start" alignment-baseline="hanging" transform="rotate(90, 818, 210)">Eco-footprint: 0.84 hectares</text>
<line x1="400" y1="210" x2="800" y2="210"/>
<line x2="800" y2="300" x1="800" y1="210"/>
<text x="790" y="235" class="sub-title" text-anchor="end">CONSUMPTION PER YEAR</text>
<text x="790" y="255" class="sub-title" text-anchor="end">164kg of meat, 95kg or cereals</text>
<text x="790" y="275" class="sub-title" text-anchor="end">43.3m2 of land per 1kg of chicken (more for beef and lamb), 13.4m2 of land per 1kg of cereals</text>
<rect x="20" y="500" width="480" height="480" style="fill:#cc1f5e;"/>
<text x="480" y="540" class="title" text-anchor="end">TOYOTA LAND CRUISER</text>
<text x="480" y="550" class="sub-title" text-anchor="start" alignment-baseline="hanging" transform="rotate(90, 480, 550)">Eco-footprint: 0.41 hectares</text>
<line x1="240" y1="550" x2="460" y2="550"/>
<line x2="460" y2="660" x1="460" y1="550"/>
<text x="450" y="570" class="sub-title" text-anchor="end">10,000km DRIVEN PER YEAR</text>
<text x="450" y="590" class="sub-title" text-anchor="end">55.1 gigajoules (includes energy required to fuel and construct)</text>
<rect x="20" y="680" width="300" height="300" style="fill:#a71949;"/>
<text x="305" y="715" class="title" text-anchor="end">VOLKSWAGEN GOLF</text>
<rect x="20" y="730" width="250" height="250" style="fill:#f7991d;"/>
<text x="255" y="760" class="title" text-anchor="end">CAT</text>
<text x="255" y="770" class="sub-title" text-anchor="start" alignment-baseline="hanging" transform="rotate(90, 255, 770)">Eco-footprint: 0.15 hectares</text>
<rect x="20" y="900" width="80" height="80" style="fill:#231f20;"/>
<text x="105" y="920" class="title" text-anchor="start">HAMSTER</text>
<text x="105" y="940" class="sub-title" text-anchor="start">Eco-footprint:</text>
<text x="105" y="960" class="sub-title" text-anchor="start">0.014 hectares</text>
</svg>
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.
