27:null 28:["$","title",null,{"children":"Land guzzlers - d3 | Data Visualization | Observable"}] 2d: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 }2e:[{"id":"c1a8ee9adff873233e6077d25cc49624bf51a9ba81c2598bc490cae6adcffa30880c91fab66d6ce8e76ccc2692c503f6aafa0b41dbff641484b57f4576c0ccf3","href":"https://static.observableusercontent.com/files/c1a8ee9adff873233e6077d25cc49624bf51a9ba81c2598bc490cae6adcffa30880c91fab66d6ce8e76ccc2692c503f6aafa0b41dbff641484b57f4576c0ccf3","name":"land_guzzlers.csv","type":"text/csv","lastModified":1712023212145.091,"size":410}] 2b:{"id":"fb9027a3950dbe04","slug":null,"title":"Land guzzlers - d3","thumbnail":"4518d0859df162b0f557f0a1355031f969efad9b04564cbb9f4b837c9d655049","access_level":"public","create_time":"$D2024-04-02T02:00:12.145Z","update_time":"$D2024-04-02T18:07:07.294Z","view_time":null,"first_public_time":"$D2024-04-02T18:07:38.327Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b860213016226a08","login":"dataviz1","name":"Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/d61dece81d2d9cff38569c3f73692a8577e3d81999e6f46bf764c9e7857c617c","tier":"starter_2024"},"version":283,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a3e3033eda0bb65f","login":"oshen-burgess","name":"O'Shen Burgess","avatar_url":"https://avatars-next.observableusercontent.com/8605ce74618e15f0965d3ec288460cfb3e2b81158833cc5eac9334010ae8a43a","tier":null}],"members":[{"type":"team","id":"b860213016226a08","login":"dataviz1","name":"Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/d61dece81d2d9cff38569c3f73692a8577e3d81999e6f46bf764c9e7857c617c","tier":"starter_2024","role":"editor"},{"type":"individual","id":"a3e3033eda0bb65f","login":"oshen-burgess","name":"O'Shen Burgess","avatar_url":"https://avatars-next.observableusercontent.com/8605ce74618e15f0965d3ec288460cfb3e2b81158833cc5eac9334010ae8a43a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svgContainer","database":"$undefined"},{"id":36,"value":"---------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"### Hints and notes:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"### reference stuff:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"land_guzzlers = await FileAttachment(\"land_guzzlers.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"land_guzzlers","database":"$undefined"},{"id":260,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":248,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"