2f:T526,30:Tb58,{ let colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"] let viz_height = landguzzlers.attr("height") - 5 let viz_width = landguzzlers.attr("width") // creating the squares landguzzlers.selectAll("rect") .data(data) .join("rect") .attr("y", d => viz_height - d["pixel_footprint"]) .attr("width", d => d["pixel_footprint"]) .attr("height", d => d["pixel_footprint"]) .style("fill", (d, i) => colors[i]); // creating the titles within the squares landguzzlers.selectAll(".square_title") .data(data) .join("text") .text(d => d["title"]) .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"]) .attr("x", d => d["pixel_footprint"] - 5) .attr("class", d => d["title_class"]); // creating the eco-footprint subtitles (except for hamster and volkswagen) landguzzlers.selectAll(".eco") .data(data.filter(d => d["title"] != "HAMSTER").filter(d => d["title"] != "VOLKSWAGEN GOLF")) .join("text") .text(d => "Eco-footprint: " + d["footprint"] + " hectares") .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"] + 5) .attr("x", d => d["pixel_footprint"] - 15) .attr("class", "eco"); // creating the subtitles landguzzlers.selectAll(".detail1") .data(data) .join("text") .text(d => d["subtitle"]) .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"] + 25) .attr("x", d => d["pixel_footprint"] - 30) .attr("class", "detail1"); landguzzlers.selectAll(".detail2") .data(data) .join("text") .text(d => d["subtitle2"]) .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"] + 42) .attr("x", d => d["pixel_footprint"] - 30) .attr("class", "detail2"); landguzzlers.selectAll(".detail3") .data(data) .join("text") .text(d => d["subtitle3"]) .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"] + 60) .attr("x", d => d["pixel_footprint"] - 30) .attr("class", "detail3"); // dealing with "Hamster" title landguzzlers.selectAll(".hamster") .data(data) .join("text") .attr("dx", 10); // dealing with Hamster subtitles landguzzlers.selectAll(".eco_hamster1") .data(data.filter(d => d["title"] == "HAMSTER")) .join("text") .text("Eco footprint:") .attr("x", d => d["pixel_footprint"] + 5) .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"] + 20) .attr("class", "eco_hamster1 square_title"); landguzzlers.selectAll(".eco_hamster2") .data(data.filter(d => d["title"] == "HAMSTER")) .join("text") .text(d => d["footprint"] + " hectares") .attr("x", d => d["pixel_footprint"] + 5) .attr("y", d => viz_height - d["pixel_footprint"] + d["title_size"] + 40) .attr("class", "eco_hamster2 square_title"); }31:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1681654713787.491,"size":410}] 2d:{"title":"Land Guzzlers Drawn Procedurally","cells":[{"id":0,"value":"# Land Guzzlers Drawn Procedurally","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$2f","pinned":true,"hidden":false,"mode":"html"},{"id":142,"value":"\n \n","pinned":true,"hidden":false,"mode":"html"},{"id":36,"value":"---------","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"Connect data file:","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"data = FileAttachment(\"land_guzzlers.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"Define Pixel conversion:","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"data.forEach(d => {\n d[\"pixel_footprint\"] = (d[\"footprint\"]**.5) * 896.25483389098628;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"Define Functions for Text CSS Attributes:","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"title_size = (text) => {\n\tif (text == \"LARGE DOG\") {return 32;}\n\telse if (text == \"MEDIUM-SIZED DOG\") {return 30;}\n else if (text == \"TOYOTA LAND CRUISER\") {return 28;}\n else if (text == \"VOLKSWAGEN GOLF\") {return 26;}\n else if (text == \"CAT\") {return 26;}\n else if (text == \"HAMSTER\") {return 24;}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"title_class = (text) => {\n\tif (text == \"LARGE DOG\") {return \"inner square_title large_dog\";}\n\telse if (text == \"MEDIUM-SIZED DOG\") {return \"inner square_title medium_dog\";}\n else if (text == \"TOYOTA LAND CRUISER\") {return \"inner square_title toyota\";}\n else if (text == \"VOLKSWAGEN GOLF\") {return \"inner square_title volkswagen\";}\n else if (text == \"CAT\") {return \"inner square_title cat\";}\n else if (text == \"HAMSTER\") {return \"square_title hamster\";}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"data.forEach(d => {\n d[\"title_class\"] = title_class(d[\"title\"])\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"data.forEach(d => {\n d[\"title_size\"] = title_size(d[\"title\"])\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}