<style>

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

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

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

.mainsubtitle {font-size: 17px; 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" class="mainsubtitle">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>

#Brown Rectangle

<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. -->

#Tan Rectange

<rect x="0" y="234.7" width="916.5" height="916.5" fill="#D2B48C"></rect>

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

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

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

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

<text x="881.5" y="334.7" class="subtext">43.3m^2 of land per 1kg of chicken (more for beef and lamb), 13.4m^2 of land per 1kg of cereals</text>

#Pink Rectange

<rect x="0" y="510.9" width="640.3" height="640.3" fill="#E92B6D"></rect>

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

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

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

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

#Red Rectange

<rect x="0" y="726.9" width="424.3" height="424.3" fill="#95294E"></rect>

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

#Orange Rectange

<rect x="0" y="763.9" width="387.3" height="387.3" fill="#F6A543"></rect>

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

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

#Black Rectange

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

<text x="250" y="1010" class="title">HAMSTER</text>

<text x="130" y="1030" class="footprint">Eco-footprint:</text>

<text x="130" y="1050" class="footprint">0.014 hectares</text>

#Tan Rect Lines

<line x1="611.5" y1="274.7" x2="891.5" y2="274.7"></line>

<line x1="891.5" y1="274.7" x2="891.5" y2="349.7"></line>

#Pink Rect Lines

<line x1="335.29999999999995" y1="550.9" x2="615.3" y2="550.9"></line>

<line x1="615.3 " y1="550.9" x2="615.3" y2="625.9"></line>

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?

Please see rules in the following cell.

def viz(hectare):

width = round((hectare**0.5) * 1000, 1)

rect_y = round((1100 - width) + 51.2, 1)

title_x = round(width - 5, 1)

title_y = round(rect_y + 30, 1)

subtitle_x = round(width - 20, 1)

subtitle_y = round(rect_y + 35, 1)

print("rect_x = ", 0)

print("rect_y = ", rect_y)

print("Width =", width)

print("Height = ", width)

print("title_x = ", title_x)

print("title_y = ", title_y)

print("subtitle_x = ", subtitle_x)

print("subtitle_y = ", subtitle_y)

Here is an example of the output:

rect_x = 0

rect_y = 234.7

Width = 916.5

Height = 916.5

title_x = 911.5

title_y = 264.7

subtitle_x = 896.5

subtitle_y = 269.7

Then, I calculated the horizontal lines following these rules:

def line_hor(title_x, title_y):

x1 = title_x - 300

y1 = title_y + 10

x2 = title_x - 20

y2 = y1

print(x1, y1, x2, y2)

def line_vert(x2, y2):

x2 = x2

y2 = y2

x3 = x2

y3 = y2 + 75

print(x2, y2, x3, y3)

Then, I calculated the positions of the comments using the following rules:

def comments(x2, y2):

x = x2 - 10

y = y2 + 20

xx = x

yy = y + 20

xxx = x

yyy = yy + 20

print(x, y)

print(xx, yy)

print(xxx, yyy)