<style>

/* edit these styles as you need */

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

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

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

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

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

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

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

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

.footprint {font-size: 17px;}

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

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

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

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

</style>

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

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

<!-- the rest will be drawn by the data using D3 below -->

let landguzzlersViz = d3.select(svgContainer) // select the cell called svgContainer and make it a d3 object.

landguzzlersViz.selectAll("rect")

.data(land_guzzlers) // the name of the data object (see table below)

.join("rect")

.attr("width", d => Math.sqrt(d["footprint"])*1000)

.attr("height", d => Math.sqrt(d["footprint"])*1000)

.attr("x", 0)

.attr("y", d => 1100 - Math.sqrt(d["footprint"])*1000)

.style("fill", (d,i) => colors[i]); // I'll give you this one. Can you see how it works? See colors below.

landguzzlersViz.selectAll(".title") // notice that I'm selectingAll objects of a class called .title, to only get those text.

.data(land_guzzlers) // same dataset

.join("text") // new object type created

.attr("x", d => (d["footprint"] > .1) * Math.sqrt(d["footprint"])*1000 - 5)

.attr("y", d => (d["footprint"] > .1) * 1100 - Math.sqrt(d["footprint"])*1000 + 30)

.text(d => d["title"]) // this is how we actually write the text content

.attr("class", "title"); // tag it with the style class 'title'

landguzzlersViz.selectAll(".footprint")

.data(land_guzzlers)

.join("text")

.attr("x", d => (d["footprint"] > .1) * Math.sqrt(d["footprint"])*1000 - 20) //checks if hectares is large enough, if false, it not will not follow this format because we multiply by this boolean value

.attr("y", d => (d["footprint"] > .1) * 1100 - Math.sqrt(d["footprint"])*1000 + 35)//checks if hectares is large enough, if false, it not will not follow this format because we multiply by this boolean value

.text(d => "Eco-footprint: " + d["footprint"])

.attr("transform", (d,i,nodes) => "rotate(90 " + nodes[i].getAttribute("x") + " " + nodes[i].getAttribute("y") + ")")

// ^^ OK, so you would not have gotten this one on your own easily. See if you can figure it out.

// also compare this back against your manual SVG code for the rotate. Similar?

.attr("class", "footprint"); // tag it with the style class 'footprint'

landguzzlersViz.selectAll(".small_title") // notice that I'm selectingAll objects of a class called .small_title, to only get those text.

.data(land_guzzlers) // same dataset

.join("text") // new object type created

.attr("x", d => (d["footprint"] < .1) * Math.sqrt(d["footprint"])*1000) //checks if hectares is small, if false, it not will not follow this format because we multiply by this boolean value

.attr("y", d => (d["footprint"] < .1) * 1100 - Math.sqrt(d["footprint"])*1000 + 30) //checks if hectares is small, if false, it not will not follow this format because we multiply by this boolean value

.text(d => d["title"]) // this is how we actually write the text content

.attr("class", "small_title"); // tag it with the style class 'small_title'

landguzzlersViz.selectAll(".small_footprint") // notice that I'm selectingAll objects of a class called .small_footprint, to only get those text.

.data(land_guzzlers) // same dataset

.join("text") // new object type created

.attr("x", d => (d["footprint"] < .1) * Math.sqrt(d["footprint"])*1000) //checks if hectares is small, if false, it not will not follow this format because we multiply by this boolean value

.attr("y", d => (d["footprint"] < .1) * 1100 - Math.sqrt(d["footprint"])*1000 + 45) //checks if hectares is small, if false, it not will not follow this format because we multiply by this boolean value

.text(d => "Eco-footprint:")

.attr("class", "small_footprint"); // tag it with the style class 'small_footprint'

landguzzlersViz.selectAll(".small_footprint2")

.data(land_guzzlers)

.join("text")

.attr("x", d => (d["footprint"] < .1) * Math.sqrt(d["footprint"])*1000) //checks if hectares is small, if false, it not will not follow this format because we multiply by this boolean value

.attr("y", d => (d["footprint"] < .1) * 1100 - Math.sqrt(d["footprint"])*1000 + 60) //checks if hectares is small, if false, it not will not follow this format because we multiply by this boolean value

.text(d => d["footprint"])

.attr("class", "small_footprint2"); // tag it with the style class 'small_footprint2'

landguzzlersViz.selectAll(".subtext") // notice that I'm selectingAll objects of a class called .subtext, to only get those text.

.data(land_guzzlers) // same dataset

.join("text") // new object type created

.attr("x", d => Math.sqrt(d["footprint"])*1000 - 35)

.attr("y", d => 1100 - Math.sqrt(d["footprint"])*1000 + 50)

.text(d => d["subtitle"]) // this is how we actually write the text content

.attr("class", "subtext"); // tag it with the style class 'subtext'

landguzzlersViz.selectAll(".subtext2") // notice that I'm selectingAll objects of a class called .subtext2, to only get those text.

.data(land_guzzlers) // same dataset

.join("text") // new object type created

.attr("x", d => Math.sqrt(d["footprint"])*1000 - 35)

.attr("y", d => 1100 - Math.sqrt(d["footprint"])*1000 + 65)

.text(d => d["subtitle2"]) // this is how we actually write the text content

.attr("class", "subtext2"); // tag it with the style class 'subtext2'

landguzzlersViz.selectAll(".subtext3") // notice that I'm selectingAll objects of a class called .subtext3, to only get those text.

.data(land_guzzlers) // same dataset

.join("text") // new object type created

.attr("x", d => Math.sqrt(d["footprint"])*1000 - 35)

.attr("y", d => 1100 - Math.sqrt(d["footprint"])*1000 + 80)

.text(d => d["subtitle3"]) // this is how we actually write the text content

.attr("class", "subtext3"); // tag it with the style class 'subtext3'

landguzzlersViz.selectAll("line1") // notice that I'm selectingAll objects of a class called .line1, to only get those text.

.data(land_guzzlers) // same dataset

.join("line") // new object type created

.attr("x1", d => !isEmpty(d["subtitle"]) * Math.sqrt(d["footprint"])*1000 - 320)

.attr("y1", d => !isEmpty(d["subtitle"]) * 1100 - Math.sqrt(d["footprint"])*1000 + 33) // new object type created

.attr("x2", d => !isEmpty(d["subtitle"]) * Math.sqrt(d["footprint"])*1000 - 24)

.attr("y2", d => !isEmpty(d["subtitle"]) * 1100 - Math.sqrt(d["footprint"])*1000 + 33)

.attr("class", "line1"); // tag it with the style class 'line1'

landguzzlersViz.selectAll("line2") // notice that I'm selectingAll objects of a class called .line2, to only get those text.

.data(land_guzzlers) // same dataset

.join("line") // new object type created

.attr("x1", d => !isEmpty(d["subtitle"]) * Math.sqrt(d["footprint"])*1000 - 24)

.attr("y1", d => !isEmpty(d["subtitle"]) * 1100 - Math.sqrt(d["footprint"])*1000 + 33) // new object type created

.attr("x2", d => !isEmpty(d["subtitle"]) * Math.sqrt(d["footprint"])*1000 - 24)

.attr("y2", d => !isEmpty(d["subtitle"]) * 1100 - Math.sqrt(d["footprint"])*1000 + 48 + 67)

.attr("class", "line2"); // tag it with the style class 'line2'

}

if (strIn === undefined)

{

return true;

}

else if(strIn == null)

{

return true;

}

else if(strIn == "")

{

return true;

}

else

{

return false;

}

https://stackoverflow.com/questions/19592721/isempty-is-not-defined-error