<style>

<style>

.title {

font-family: 'Lucida Grande', monospace;

font-size: 32px;

fill: black;

}

.title-sub {

font-family: 'Lucida Grande', monospace;

font-size: 15px;

fill: black;

}

.logo {

font-family: 'Verdana', sans-serif;

font-size: 14px;

fill: '#d4d4d4';

}

.label {

font-family:Arial, Helvetica, sans-serif;

font-size: 8px;

fill: black;

}

.category {

font-family: 'Lucida Grande', monospace;

font-size: 25px;

fill: white;

}

.category-2 {

font-family: 'Lucida Grande', monospace;

font-size: 16px;

fill: white;

}

.category-sub {

font-family: 'Lucida Grande', monospace;

font-size: 12px;

fill: white;

</style>

</style>

<!-- You can also put some things static in here, like the main Landguzzlers title and subtitle at the top. Those are not drawn from data, so can be static. -->

<!--TITLE: start at x=9.5 -->

<text text-anchor="start" x=9.5 y=38 class="title">Land guzzlers</text>

<text text-anchor="start" x=9.5 y=60 class="title-sub">The ecological footprints of our pets can make SUVs look positively eco-friendly</text>

<text x="560" y="30" class="logo">&copyNewScientist</text>

!--LARGE DOG TXT -->

<text text-anchor="end" x=670.2222 y=91.4688 class="category">LARGE DOG</text>

<text text-anchor="start" class="category-sub" transform="translate(660,96)rotate(90)">Eco-footprint: 0.84</text>

<!--MED DOG-->

<text text-anchor="end" x=585.4089 y=177.4688 class="category">MEDIUM-SIZED DOG</text>

<text text-anchor="end" x =565.4089 y=202 class="category-sub">CONSUMPTION PER YEAR</text>

<text text-anchor="end" x =565.4089 y=217 class="category-sub">164kg of meat, 95kg of cereals</text>

<text text-anchor="end" x =565.4089 y=232 class="category-sub">43.3m of land per 1kg of chicken (more for beef and lamb), 13.4m of land per 1kg of cereals</text>

<text text-anchor="start" class="category-sub" transform="translate(575.4089,185.468) rotate(90)">Eco-footprint: 0.84 hectares</text>

<!--TOYOTA-->

<text text-anchor="end" x=408.8448 y=354 class="category">TOYOTA LAND CRUISER</text>

<text text-anchor="end" x=388.8448 y=372 class="category-sub">10,000km DRIVEN PER YEAR</text>

<text text-anchor="end" x=388.8448 y=382 class="category-sub">55.1 gigajoules (includes energy required to fuel and construct)</text>

<text text-anchor="start" class="category-sub" transform="translate(398.8448,360) rotate(90)">Eco-footprint: 0.41 hectares</text>

<!--VOLKSWAGEN-->

<text text-anchor="end" x=275 y=485 class="category-2">VOLKSWAGEN GOLF</text>

<!--CAT-->

<text text-anchor="middle" x=225 y=515.7734 class="category">CAT</text>

<text text-anchor="start" class="category-sub" transform="translate(238,518) rotate(90)">Eco-footprint: 0.15 hectares</text>

<!--HAMSTER: left aligned next to black square-->

<text text-anchor="left" x=61 y=706 class="category-2">HAMSTER</text>

<text text-anchor="left" x=61 y=716 class="category-sub">Eco-footprint:</text>

<text text-anchor="left" x=61 y=726 class="category-sub">0.014 hectares</text>

</svg>

landguzzlers.selectAll(".guzzlerrects")

.data(data)

.join("rect")

.attr("x", 9.5)

.attr("y", replace_this_with_some_value_or_calculation_from_d)

.attr("width", replace_this_with_some_value_or_calculation_from_d)

.attr("height", replace_this_with_some_value_or_calculation_from_d)

.style("propertyname", replace_this_with_some_value_or_calculation_from_d)

.attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement

myViz.selectAll(".guzzlerrects")

.data(data)

.join("rect")

.attr("x", 0)

.attr("y", d => d["footprint"] *69)

.attr("width", d => d["footprint"]*605.45)

.attr("height", ...)

.style("property_name", value) // this could also be from a d => d["column name"]

.attr("class", "guzzlerrects") // or use other classes that you define in <style>

landguzzlers.selectAll(".guzzlertitles")

.data(data)

.join("text")

.attr("x", replace_this_with_some_value_or_calculation)

// ...

.attr("class", "guzzlertitles");