<style>

rect {stroke: white; stroke-width: 3px;}

text {fill: white; font-family: 'Rajdhani', sans-serif;}

.maintitle {font-size: 39px; fill: black;}

.mainsubtitle {font-size: 19.5px; fill: black;}

.title {text-anchor: end; font-size: 32px;}

.subtext {text-anchor:end; font-size: 17px}

.footprint {font-size: 17px;}

line {stroke: white; stroke-width: 1px;}

</style>

<text x="0" y="25" class="maintitle">Land guzzlers</text>

<text x="0" y ="44.5" class="mainsubtitle">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>

<rect x="0" y="51.2" width="1048.8" height="1048.8" fill="#a5620b"></rect>

<text x="1043.8" y="81.2" class="title">LARGE DOG</text>

<text x="1028.8" y="86.2" class="footprint" transform="rotate(90 1028.8,86.2)">Eco-footprint: 1.1 hectares</text>

<!-- Look for the structure in the numbers here. And how did I get 1048.8 from the Large Dog data? -->

<!-- fill="black" transform="rotate(90,100,100) (90, 1028.8,86.2) -->

<!-- medium dog -->

<rect x="0" y="183" width="916" height="916" fill="#c29657"></rect>

<text x="911" y="213" class="title">MEDIUM-SIZED DOG</text>

<text x="1161.4" y="218" class="footprint" transform="rotate(90 1028.8,86.2)">Eco-footprint: 0.84 hectares</text>

<text x="891" y = "238" class="subtext">CONSUMPTION PER YEAR</text>

<text x="891" y = "258" class="subtext">164kg of meat, 95kg or cereals</text>

<text x="891" y = "278" class="subtext">43.3m2 of land per 1kg of chicken (more for beef and lamb), 13.4m2 of land per 1kg of cereals</text>

<line x1="590.7" y1="218" x2="891" y2="218"></line>

<line x1="891" y1="218" x2="891" y2="288"></line>

<!-- toyota -->

<rect x="0" y="459.69" width="640.31" height="640.31" fill="#cc1f5e"></rect>

<text x="635.31" y="489.69" class="title">TOYOTA LAND CRUISER</text>

<text x="1437.09" y="494.69" class="footprint" transform="rotate(90 1028.8,86.2)">Eco-footprint: 0.41 hectares</text>

<text x="605.31" y = "514.69" class="subtext">10,000km DRIVEN PER YEAR</text>

<text x="605.31" y = "534.69" class="subtext">55.1 gigajoules (includes energy required to fuel and construct)</text>

<line x1="314.47" y1="494.69" x2="605.31" y2="494.69"></line>

<line x1="605.31" y1="494.69" x2="605.31" y2="544.69"></line>

<!-- golf -->

<rect x="0" y="675.74" width="424.26" height="424.26" fill="#a71949"></rect>

<text x="419.26" y="705.74" class="title">VOLKSWAGEN GOLF</text>

<!--text x="1653.14" y="710.74" class="footprint" transform="rotate(90 1028.8,86.2)">Eco-footprint: 0.18 hectares</text-->

<!-- cat -->

<rect x="0" y="712.70" width="387.30" height="387.30" fill="#f7991d"></rect>

<text x="382.3" y="742.7" class="title">CAT</text>

<text x="1690.3" y="747.7" class="footprint" transform="rotate(90 1028.8,86.2)">Eco-footprint: 0.15 hectares</text>

<!-- hamster -->

<rect x="0" y="981.68" width="118.32" height="118.32" fill="#231f20"></rect>

<text x="246.64" y="1011.68" class="title">HAMSTER</text>

<text x="124.32" y="1031.68" class="footprint">Eco-footprint:</text>

<text x="124.32" y="1051.68" class="footprint">0.014 hectares</text>

</svg>

How did I calculate that first object's numbers? What is the equation given 1.1 hectares, the first data value? How do you use that to calculate the rest?

Write out some explanation, thoughts, or rough equations here. This can be notes, questions, discussion.

The size of the svg was 1100 pixels by 1100 pixels, indicating a 1 hectare:1000 pixels ratio. Giving a size of 51.2 pixels for the title and the main subtitle, leaves a length of 1048.8 pixels. The first object started at (0,51.2) since it took into account the header. 51.2+1048.2=1100. I calculated the rest by taking sqrt(hectare of object/1.1 hectares)*1048.8= length and width of new object. The x-coordinate was always at 0, and for the y-coordinate, I subtracted the calculated width (or length) from 1100. For the name text: x=width-5, y= y-coordinate of said rectangle+30. For the vertical text, I subtracted 20 from the width for the x-coordinate and added 5 to the y-coordinate of its title for the vertical y-coordinate. For the horizontal lines, I averaged the coordinates from its rectangle and the rectangle below it. The vertical rectangle started at the ending point of the horizontal rectangle and its ending point was arbitrary.