2f:Tc22,{ 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 => Math.sqrt(d["footprint"])*1000-5) .attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+32) .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(".subtitle") // notice that I'm selectingAll objects of a class called .subtitle, to only get those text. .data(land_guzzlers) // same dataset .join("text") // new object type created .attr("x", d => Math.sqrt(d["footprint"])*1000-30) .attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+60) .text(d => d["subtitle"]) // this is how we actually write the text content .attr("class", "subtitle"); // tag it with the style class 'subtitle' landguzzlersViz.selectAll(".subtitle2") .data(land_guzzlers) .join("text") .attr("x", d => Math.sqrt(d["footprint"])*1000-30) .attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+78) .text(d => d["subtitle2"]) .attr("class", "subtitle"); landguzzlersViz.selectAll(".subtitle3") .data(land_guzzlers) .join("text") .attr("x", d => Math.sqrt(d["footprint"])*1000-30) .attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+96) .text(d => d["subtitle3"]) .attr("class", "subtitle"); landguzzlersViz.selectAll(".footprint") .data(land_guzzlers) .join("text") .attr("x", d => Math.sqrt(d["footprint"])*1000-15) .attr("y", d => 1100-Math.sqrt(d["footprint"])*1000+40) .text(d => "Eco-footprint " + d["footprint"] + " hectares") .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 'title' // ... what other objects }30:[{"id":"c1a8ee9adff873233e6077d25cc49624bf51a9ba81c2598bc490cae6adcffa30880c91fab66d6ce8e76ccc2692c503f6aafa0b41dbff641484b57f4576c0ccf3","href":"https://static.observableusercontent.com/files/c1a8ee9adff873233e6077d25cc49624bf51a9ba81c2598bc490cae6adcffa30880c91fab66d6ce8e76ccc2692c503f6aafa0b41dbff641484b57f4576c0ccf3","name":"land_guzzlers.csv","type":"text/csv","lastModified":1712023212145.091,"size":410}] 2d:{"title":"Land guzzlers - d3","cells":[{"id":0,"value":"# Land guzzlers - d3\nFork this file (see [ ... ] menu at top right > Fork) to make a copy for yourself. \nPlease read all the way down first.","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":36,"value":"---------","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"Now build instructions to calculate and build the objects, from data. \nBuild a new statement set for each, join the graphic object type, and set and calculate attribute values from `d`.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"To get you started, I'm giving you the basic **svgContainer** object already, including some starting styles and two static `` objects. \n\nThe code above starts with d3.select() to grab the svgContainer object, to then put other things into it. \n\nEach type of element (`rect`, `title`, `subtext`, etc.) is most easily constructed in it's own d3 `selectAll().data().join()` statement, each of which loops through the dataset for each graphic type. Because this is `join`-ing the graphic object into the data table, this effectively embeds a forEach loop into each select-join to draw each graphic type across the entire set of data records. For those who know databases, this is an left-join of data (left) and graphics (right), to create one unified new dataset of both, but removing any excess graphic objects that do not match data.","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"### Hints and notes:","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"- Hectare values are area of the squares. Squares are rectangles.\n- `width x height = area`\n- squares have width = height\n- thereby `width = Math.sqrt(area)`\n- Math.sqrt() is javascript's square root function\n\n- x,y 0,0 is at the left,top of the page.\n- thus all y values get larger as you go DOWN the page\n- and so if you're measuring from the bottom, you need to subtract to go up.\n\n- lines: you can approximate the length. It actually is built based on the length of the text title above, and we CAN get that, but it's a bit trickier. If you're really interested, check out the getBBox() function in javascript. For the rest of you, just estimate it.\n ","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"### reference stuff:","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"colors = [\"#a5620b\",\"#c29657\",\"#cc1f5e\",\"#a71949\",\"#f7991d\",\"#231f20\"]; // in order Large Dog to Hamster. Reference as colors[i]","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"land_guzzlers = await FileAttachment(\"land_guzzlers.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"null","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}