<style>

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

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

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

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

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

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

.footprint {font-size: 17px;}

.small_title {text-anchor: start; font-size: 32px;}

.small_subtext {text-anchor: start; font-size: 16px;}

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

</style>

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

<text x="0" y="47" 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? -->

<!-- this is a comment in xml. -->

<rect x="0" y="183.5" width="916.5" height="916.5" fill="#c29657"></rect>

<text x="911.5" y="213.5" class="title">MEDIUM-SIZED DOG</text>

//916.5 - 5

<text x="896.5" y="218.5" class="footprint" transform="rotate(90 896.5,218.5)">Eco-footprint: 0.84 hectares</text>

<text x="881.5" y="228.5" class="subtext">CONSUMPTION PER YEAR</text>

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

<text x="881.5" y="258.5" 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="596.5" y1="216.5" x2="892.5" y2="216.5"></line>

<line x1="892.5" y1="216.5" x2="892.5" y2="283.5"></line>

<rect x="0" y="459.7" width="640.3" height="640.3" fill="#cc1f5e"></rect>

<text x="635.3" y="489.7" class="title">TOYOTA LAND CRUISER</text>

//916.5 - 5

<text x="620.3" y="494.7" class="footprint" transform="rotate(90 620.3,494.7)">Eco-footprint: 0.41 hectares</text>

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

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

<line x1="316.5" y1="492.7" x2="616.3" y2="492.7"></line>

<line x1="616.3" y1="492.7" x2="616.5" y2="559.7"></line>

<rect x="0" y="675.7" width="424.3" height="424.3" fill="#a71949"></rect>

<text x="419.3" y="705.7" class="title">VOLKSWAGEN GOLF</text>

<rect x="0" y="712.7" width="387.3" height="387.3" fill="#f7991d"></rect>

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

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

<rect x="0" y="981.7" width="118.3" height="118.3" fill="#231f20"></rect>

<text x="123.3" y="1011.7" class = "small_title">HAMSTER</text>

<text x="123.3" y="1026.7" class="small_subtext">Eco-footprint:</text>

<text x="123.3" y="1041.7" class="small_subtext">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?

The width and height of the square for each land guzzler is the square root of the number of hectares multiplied by 1000. For example, the square root of 1.1 is 1.0488. Multiplying 1.0488 by 1000 equals 1048.8, which is the width and height of the first object. The value for "x" for the first object is 0 because the object should be lined up with the left-hand side of the graphic. The value for "y" for the first object is 51.2 because that is the height of the page (1100) minus the height of the first object (1048.8). (1100 - 1048.8 = 51.2) Regarding the title for the first object/land guzzler, the value for x is 1043.8, which is the width of the object minus 5. (1048.8 - 5 = 1043.5) Since the text anchor is "end," this decision was made so that the title does not line up directly against the edge of the first object, but instead, 5 pixels over. Meanwhile, the value for y is the y-value of the rectangle plus 30. This means that the title will be shifted 30 pixels closer to the bottom of the page, which places the title within the rectangle. (51.2 + 30 = 81.5) Regarding the vertical text with the number of hectares, the value for x is 1028.8, which is 20 less than the width of the object. (1048.8 - 20 = 1028.8) This horizontally shifts the text closer to the right-hand side of the object. Meanwhile, the value for y is the y-value of the rectangle plus 35. (51.2 + 35 = 86.5) This means that the title will be shifted 35 pixels closer to the bottom of the page, which places the title within the rectangle and lower from the top of the page than the title, as in the original image. This vertical text needs to be rotated 90 degrees so it appears vertical. This rotation needs to happen from the text starting point, which since the text is anchored to the end, is the 1028.8. The y-value in the rotate function (86.5) is where the "new" text will start from.

For the rest of the objects, I use the same logic except I start with the hectares value of a different land guzzler. For example, for the medium-sized dog, I calculate the width and height of the object to be the square root of 0.84 multiplied by 1000 to be 916.5. Then, its value of x is 0 and value of y is 1100 - 916.5 = 183.5, and so on and so forth.

There are a few values that I determine on my own. For example, to choose the x and y coordinates for those objects that have subtext (medium-sized dog and Toyota land cruiser), I do some trial and error to see what looks best. However, I know the x coordinate has to be further left than the footprint text and the y coordinate has to be greater than that of the title. Using these benchmarks, I have a solid estimate of where the coordinates go. After one iteration, I can see if it needs to be shifted left/right or up/down and then I update accordingly until I am satisfied. Additionally, I create the white lines for the land guzzlers with subtitles through this trial and error process, relying on known information to guide me.

The "Hamster" land guzzler has different formatting from the others since it is outside the tiny square. To re-create this, I create a class for both the title and subtext so that it is left-aligned instead of right-aligned. Furthermore, I do not need to rotate this subtext since the original image does not have it rotated.

This approach is slightly different than what I thought initially. I was planning on setting up a direct variation function (y = kx) where y = height/width of the object, x is the hectares of the land guzzler, and k is a constant multiplier. This could be determined by first determining how large I want the largest object to be, thus pre-determining one instance of y. Then I could solve for k by taking this pre-determined y and dividing by the highest number of hectares for any land guzzler to obtain k. (y/x = k) Then, the remaining hectares can be multiplied by k to determine the width/height of each object.