Public
Edited
Mar 17, 2023
<h1>Land guzzlers</h1>
<h6> The ecological footprints of our pets can make SUVs look positively eco-friendly</h5>
<svg width="850" height="600">
<rect width=524.404 height=524.404 x=0 y=0 style="fill: #a5620b" />
<rect width=458.257 height=458.257 x=0 y=65 style="fill: #c29657" />
<rect width=320.156 height=320.156 x=0 y=204 style="fill: #cc1f5e" />
<rect width=221.132 height=212.132 x=0 y=312 style="fill: #a71949" />
<rect width=193.649 height=193.649 x=0 y=330 style="fill: #f7991d" />
<rect width=59.161 height=59.161 x=0 y=465 style="fill: #231f20" />
<text text-anchor="start" x="60" y="480" class="smalltitle" >HAMSTER</text>
<text text-anchor="start" x=60 y="500" class="smalltitle" >Eco-footprint</text>
<text text-anchor="start" x=60 y="520" class="smalltitle" >0.014 hectares</text>
<text text-anchor="end" x="190" y="348" class="medtitle" >CAT</text>
<text text-anchor="end" x=218 y="326" class="subtitle" >VOLKSWAGEN GOLF</text>
<text text-anchor= "end" x=317 y=222 class="medtitle" >TOYOTA LAND CRUISER</text>
<text text-anchor= "end" x=455 y=85 class="title" >MEDIUM-SIZED DOG</text>
<text text-anchor= "end" x=435 y=102 class="tinytitle" >CONSUMPTION PER YEAR</text>
<text text-anchor= "end" x=435 y=114 class="tinytitle" >164kg of meat, 95kg of cereals</text>
<text text-anchor= "end" x=435 y=126 class="tinytitle" >43.3m² of land per 1kg of chicken (more for beef and lamb),13.4² of land per 1kg of cereals</text>
<text text-anchor= "end" x=521 y=22 class="title">LARGE DOG</text>
<text text-anchor= "end" x=297 y=237 class="tinytitle">10,000km DRIVEN PER YEAR</text>
<text text-anchor= "end" x=297 y=250 class="tinytitle">55.1 gigajoules(includes energy required to fuel and construct)</text>
# text anchoring useful for lining up and the placement of the text
# subtracted constant number of 3 from the x coordinates for padding but used the width of the square to help with placement of text
<text text-anchor="start" class="subtitle" transform="translate(305,225) rotate(90)">Eco-footprint:0.41 hectares</text>
<text text-anchor="start" class="subtitle" transform="translate(445,86) rotate(90)">Eco-footprint:0.84 hectares</text>
<text text-anchor="start" class="subtitle" transform="translate(510,26) rotate(90)">Eco-footprint:1.1 hectares</text>
<text text-anchor="start" class="subtitle" transform="translate(180,350) rotate(90)">Eco-footprint:0.15 hectares</text>
# this subtext the same size so i made a class for them
<line x1="300" y1="226" x2="300" y2="253" style=(255,0,0);stroke-width:1" />
<line x1="110" y1="226" x2="300" y2="226" style=(255,0,0);stroke-width:1" />
<line x1="211" y1="90" x2="440" y2="90" style=(255,0,0);stroke-width:1" />
<line x1="440" y1="90" x2="440" y2="132" style=(255,0,0);stroke-width:1" />
# create classes
<style>
line{stroke:white}
rect {stroke:white; fill: white; stroke-width:2px}
.title {font-size: 24px; fill: white;}
.subtitle {font-size: 13px; fill: white}
.medtitle {font-size: 18px ; fill:white}
.smalltitle {font-size: 14px ; fill: white;}
.tinytitle {font-size:10px ; fill:white}
</style>
sarc5400Part1BritneyHoang1 = FileAttachment("SARC5400 Part 1 - Britney Hoang@1.pdf")
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.
