data = FileAttachment("land_guzzlers.csv").csv()
viewof table = Inputs.table(data)
lgDog = Math.sqrt(+data[0]["footprint"])* 600;
medDog = Math.sqrt(+data[1]["footprint"])* 600;
toyota = Math.sqrt(+data[2]["footprint"])*600;
golf = Math.sqrt(+data[3]["footprint"])*600;
cat = Math.sqrt(+data[4]["footprint"])*600;
hamster = Math.sqrt(+data[5]["footprint"])*600;
<svg width = 800px height = 800 px>
<text x= 0 y= 165 style="font-family:Helvetica; font-size: 40px">Land Guzzlers</text>
<text x = 0 y =190 style="font-family:Helvetica; font-size: 18px">The ecological footprints of our pets can make SUVs look positively environmentally friendly</text>
<rect id ="mdDog" width=629 height=629 x=0 y=200 style="fill:#a5620b; stroke-width:2;stroke:white" />
<rect id = "mdDog" width = 550 height = 550 x=0 y =250 style="fill:#c29657; stroke-width:2;stroke:white" />
<rect width = 384 height = 384 x = 0 y = 416 style="fill:#cc1f5e; stroke-width:2;stroke:white" />
<rect width = 255 height = 255 x= 0 y = 544 style = "fill:#a71949; stroke-width:2;stroke:white" />
<rect width = 232 height = 232 x = 0 y = 568 style = "fill:#f7991d; stroke-width:2;stroke:white" />
<rect width = 71 height = 71 x = 0 y = 729 style = "fill:#231f20; stroke-width:2;stroke:white" />
<text text-anchor="end" x=625 y=222 style= "font-family:Helvetica; font-size: 22px; fill:white">LARGE DOG</text>
<text text-anchor="start" x=625 y=222 style= "font-family:Helvetica; font-size: 12px; fill:white" transform="rotate(90 616 222)">Eco-footprint: 1.1 hectares</text>
<text text-anchor="end" x=545 y=273 style= "font-family:Helvetica; font-size: 22px; fill:white">MEDIUM-SIZED DOG</text>
<text text-anchor="start" x=545 y=273 style= "font-family:Helvetica; font-size: 12px; fill:white" transform="rotate(90 535 272)">Eco-footprint: 0.84 hectares</text>
<line x1="230" y1="278" x2="525" y2="278" style="stroke:white;" />
<line x1="525" y1="350" x2="525" y2="278" style="stroke:white;" />
<text text-anchor="end" x = 515 y= 290 style= "font-family:Helvetica; font-size: 12px; fill:white">CONSUMPTION PER YEAR </text>
<text text-anchor="end" x = 515 y= 305 style= "font-family:Helvetica; font-size: 12px; fill:white">164kg of meat, 95kg of cereals</text>
<text text-anchor="end" x = 515 y= 320 style= "font-family:Helvetica; font-size: 12px; fill:white">43.3 m of land per 1kg of chicken (more for beef and lamb), 13.4 m of land per 1kg of cereals</text>
<text text-anchor="end" x=380 y=438 style= "font-family:Helvetica; font-size: 22px; fill:white">TOYOTA LAND CRUISER</text>
<text text-anchor="start" x=380 y=483 style= "font-family:Helvetica; font-size: 12px; fill:white" transform="rotate(90 390 460)">Eco-footprint: 0.41 hectares</text>
<line x1="100" y1="445" x2="362" y2="445" style="stroke:white;" />
<line x1="362" y1="445" x2="362" y2="490" style="stroke:white;" />
<text text-anchor="end" x = 355 y= 460 style= "font-family:Helvetica; font-size: 12px; fill:white">10,000KM DRIVEN PER YEAR </text>
<text text-anchor="end" x = 355 y= 480 style= "font-family:Helvetica; font-size: 12px; fill:white">55.1 gigajoules (includes energy required to fuel and construct)</text>
<text text-anchor="end" x=250 y=562 style= "font-family:Helvetica; font-size: 20px; fill:white">VOLKSWAGEN GOLF</text>
<text text-anchor="end" x=229 y=587 style= "font-family:Helvetica; font-size: 22px; fill:white">CAT</text>
<text text-anchor="start" x=220 y=590 style= "font-family:Helvetica; font-size: 12px; fill:white" transform="rotate(90 215 590)">Eco-footprint: 0.15 hectares</text>
<text text-anchor="end" x=170 y=745 style= "font-family:Helvetica; font-size: 20px; fill:white">HAMSTER</text>
<text text-anchor="end" x=144 y=760 style= "font-family:Helvetica; font-size: 12px; fill:white">Eco-footprint:</text>
<text text-anchor="end" x=152 y=775 style= "font-family:Helvetica; font-size: 12px; fill:white">0.014 hectares</text>
</svg>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.