2f:T120a,{ 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) - 2.5) .attr("y", d => 1100 - (Math.sqrt(d.footprint) * 1000) + 26) .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 => (Math.sqrt(d.footprint) * 1000) - 15) .attr("y", d => 1100 - (Math.sqrt(d.footprint) * 1000) + 33) .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 landguzzlersViz.selectAll(".subtext1") // 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) - 27) .attr("y", d => 1100 - (Math.sqrt(d.footprint) * 1000) + 55) .text(d => d.subtitle) // this is how we actually write the text content .attr("class", "subtext1"); // tag it with the style class 'title' landguzzlersViz.selectAll(".subtext2") // 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) - 27) .attr("y", d => 1100 - (Math.sqrt(d.footprint) * 1000) + 70) .text(d => d.subtitle2) // this is how we actually write the text content .attr("class", "subtext1"); // tag it with the style class 'title' landguzzlersViz.selectAll(".subtext3") // 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) - 27) .attr("y", d => 1100 - (Math.sqrt(d.footprint) * 1000) + 90) .text(d => d.subtitle3) // this is how we actually write the text content .attr("class", "subtext1"); // tag it with the style class 'title' // MEDIUM-SIZED DOG landguzzlersViz.append("line") //horizonta line .attr("x1", "640") //left part of horizontal line. Larger # the shorter line gets from left .attr("y1", "219") //horizontal, larger # lower it gets .attr("x2", "896") //right part of horizontal line. Larger # the longer line gets from the right .attr("y2", "219") //horizontal, larger # lower it gets landguzzlersViz.append("line") //vertical line .attr("x1", "895") // vertical line, lesser #= shift left .attr("y1", "218") //top part of the vertical line, smaller # the line gets longer on the top .attr("x2", "895") // vertical line, less #= shiftleft .attr("y2", "270") // bottom part of vertica line, larger the line gets longer in the bottom // TOYOTA LAND CRUISER lines landguzzlersViz.append("line") .attr("x1", "320") .attr("y1", "490") .attr("x2", "620") .attr("y2", "490") landguzzlersViz.append("line") .attr("x1", "620") .attr("y1", "490") .attr("x2", "620") .attr("y2", "530") }30:[{"id":"c1a8ee9adff873233e6077d25cc49624bf51a9ba81c2598bc490cae6adcffa30880c91fab66d6ce8e76ccc2692c503f6aafa0b41dbff641484b57f4576c0ccf3","href":"https://static.observableusercontent.com/files/c1a8ee9adff873233e6077d25cc49624bf51a9ba81c2598bc490cae6adcffa30880c91fab66d6ce8e76ccc2692c503f6aafa0b41dbff641484b57f4576c0ccf3","name":"land_guzzlers.csv","type":"text/csv","lastModified":1711836566622.886,"size":410},{"id":"4f4b589b4b5a13b305f318e75a4c793944e1f5c21c624d13e261d74bf592bcef7b0e6baf0b380823b6e3cddfbc6a551c94343fdf69f78717bd3909a408db516e","href":"https://static.observableusercontent.com/files/4f4b589b4b5a13b305f318e75a4c793944e1f5c21c624d13e261d74bf592bcef7b0e6baf0b380823b6e3cddfbc6a551c94343fdf69f78717bd3909a408db516e","name":"IMG_0938.heic","type":"image/heic","lastModified":1711840139374.366,"size":57622},{"id":"4f4b589b4b5a13b305f318e75a4c793944e1f5c21c624d13e261d74bf592bcef7b0e6baf0b380823b6e3cddfbc6a551c94343fdf69f78717bd3909a408db516e","href":"https://static.observableusercontent.com/files/4f4b589b4b5a13b305f318e75a4c793944e1f5c21c624d13e261d74bf592bcef7b0e6baf0b380823b6e3cddfbc6a551c94343fdf69f78717bd3909a408db516e","name":"IMG_0938@1.heic","type":"image/heic","lastModified":1711840145823.555,"size":57622}] 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":248,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}