Public
Edited
Apr 16, 2023
sqrd = [Math.sqrt(data[5])*500-600, Math.sqrt(data[4])*500-600, Math.sqrt(data[3])*500-600, Math.sqrt(data[2])*500-600, Math.sqrt(data[1])*500-600, Math.sqrt(data[0])*500-600]
names = ["HAMPSTER", "CAT", "VOLKSWAGEN GOLF", "TOYOTA LAND CRUISER", "MEDIUM-SIZED DOGS", "LARGE DOG"];
<svg width="600" height="600">
<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. */
.large {fill: #A5620B;}
.med {fill: #c29657;}
.toy {fill: #cc1f5e;}
.golf {fill: #a71949;}
.cat {fill: #f7991d;}
.ham {fill: #231f20;}
.title {font-size:24px; fill: white;}
.rect {stroke: white; stroke-width: 2px;}
.font {font-family:helvetica;}
.subtext {font-size:10px; fill:white;font-family:helvetica;}
.maintext {font-size:16px; fill:white;font-family:helvetica;}
.largetext{font-size:20px; fill:white;font-family:helvetica;}
</style>
<rect width = 524.4044240850758 height = 524.4044240850758 x = 5 y = 70.59557591492421 class = "large"/>
<rect width = 458.257569495584 height = 458.257569495584 x = 5 y = 136.742430504416 class = "med rect"/>
<rect width = 320.1562118716424 height = 320.1562118716424 x = 5 y = 274.8437881283576 class = "toy rect" />
<rect width = 212.13203435596427 height = 212.13203435596427 x = 5 y = 382.86796564403573 class = "golf rect" />
<rect width = 193.64916731037084 height = 193.64916731037084 x = 5 y = 401.35083268962916 class = "cat rect" />
<rect width = 45.16079783099616 height = 45.16079783099616 x = 5 y = 549.8392021690038 class = "ham rect" />
<text text-anchor="start" x= "53" y="562" class = "maintext font"> HAMSTER </text>
<text text-anchor="start" x= "165" y="419" class = "maintext font"> CAT </text>
<text text-anchor="start" x= "53" y="398" font-size = "15" fill-opacity = ".5" font-weight = "lighter" class = "maintext font"> VOLKSWAGEN GOLF </text>
<text text-anchor="start" x= "135" y="294" class = "maintext font"> TOYOTA LAND CRUISER </text>
<text text-anchor="start" x= "262" y="156" font-weight = "lighter" class = "largetext font"> MEDIUM-SIZED DOG </text>
<text text-anchor="start" x= "408" y="90" font-weight = "light" class = "largetext font"> LARGE DOG </text>
<text text-anchor="start" x= "5" y="30" font-size = "26" fill = "black" class = "font"> Land guzzlers </text>
<text text-anchor="start" x= "5" y="55" font-size = "14" fill = "black" class = "font"> The ecological footprints of our pets can make SUVs look positively eco-friendly </text>
<text text-anchor="start" x= "53" y="575" class = "subtext font"> Eco-footprint: </text>
<text text-anchor="start" x= "53" y="589" class = "subtext font"> 0.014 hectares </text>
<text text-anchor="start" transform="translate(187, 420) rotate(90)" class = "subtext font"> Eco-footprint: 0.15 hectares </text>
<line x1 = "115" y1="297" x2="308" y2="297" stroke = "white"/>
<line x1 = "308" y1="297" x2="308" y2="330" stroke = "white"/>
<text text-anchor="start" transform="translate(312, 296) rotate(90)" class = "subtext font"> Eco-footprint: 0.41 hectares </text>
<text text-anchor="end" x= "306" y="310" class = "subtext font"> 10,000km DRIVEN PER YEAR </text>
<text text-anchor="end" x= "306" y="324" class = "subtext font"> 55.1 gigajoules (includes energy required to fuel and construct) </text>
<line x1 = "242" y1="158" x2="446" y2="158" stroke = "white"/>
<line x1 = "446" y1="158" x2="446" y2="220" stroke = "white"/>
<text text-anchor="start" transform="translate(450, 157) rotate(90)" class = "subtext font"> Eco-footprint: 0.84 hectares </text>
<text text-anchor="end" x= "444" y="170" class = "subtext font"> CONSUMPTION PER YEAR </text>
<text text-anchor="end" x= "444" y="184" class = "subtext font"> 164kg of meat. 95kg of cereals </text>
<text text-anchor="end" x= "444" y="198" class = "subtext font"> <tspan> <tspan>43.3m<tspan baseline-shift = "super" font-size = "8">2</tspan> of land per 1kg of chicken (more for beef and lamb), 13.4m<tspan baseline-shift = "super" font-size = "8">2</tspan> of land per 1kg of cereals </text>
<text text-anchor="start" transform="translate(518, 93) rotate(90)" class = "subtext font"> Eco-footprint: 1.1 hectares </text>
<!-- 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 -->
</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.
