27:null 28:["$","title",null,{"children":"Land guzzlers (pt. 2) | Victoria Ok | Observable"}] 2d:T45e,2e:T1134,// this is the part that does the drawing. // put a whole sequence of statements inside this { } code block. { const basepointX = 0; const basepointY = 1000; const colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"] landguzzlers.selectAll(".guzzlerrects") .data(data) .join("rect") .attr("x", basepointX) .attr("y", d => basepointY - (Math.sqrt(d["footprint"]) * 875)) .attr("width", d => Math.sqrt(d["footprint"]) * 875) .attr("height", d => Math.sqrt(d["footprint"]) * 875) .style("fill", (d,i) => colors[i]) // finds the i_th color in the set, matched to the i_th element in the data .attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement landguzzlers.selectAll(".guzzlertitles") .data(data) .join("text") .attr("x", function(d) { if (d["title"] == "HAMSTER") { return (Math.sqrt(d["footprint"]) * 875) + 5 } else { return (Math.sqrt(d["footprint"]) * 875) - 5 } ;}) .attr("y", d => basepointY - (Math.sqrt(d["footprint"]) * 875) + 26) .text(d => d["title"]) // ... .attr("text-anchor", function(d) { if (d["title"] == "HAMSTER") { return "start" } else { return "end" } ;}) .attr("class", "guzzlertitles"); landguzzlers.selectAll(".guzzlersubtitle1") .data(data) .join("text") .attr("x", d => (Math.sqrt(d["footprint"]) * 875) - 35) .attr("y", d => basepointY - (Math.sqrt(d["footprint"]) * 875) + 50) .text(d => d["subtitle"]) // ... .attr("text-anchor", "end") .attr("class", "guzzlersubtitle1"); landguzzlers.selectAll(".guzzlersubtitle2") .data(data) .join("text") .attr("x", d => (Math.sqrt(d["footprint"]) * 875) - 35) .attr("y", d => basepointY - (Math.sqrt(d["footprint"]) * 875) + 70) .text(d => d["subtitle2"]) // ... .attr("text-anchor", "end") .attr("class", "guzzlersubtitle2"); landguzzlers.selectAll(".guzzlersubtitle3") .data(data) .join("text") .attr("x", d => (Math.sqrt(d["footprint"]) * 875) - 35) .attr("y", d => basepointY - (Math.sqrt(d["footprint"]) * 875) + 90) .text(d => d["subtitle3"]) // ... .attr("text-anchor", "end") .attr("class", "guzzlersubtitle3"); landguzzlers.selectAll(".guzzlerfootprint") .data(data) .join("text") .attr("x", function(d) { if (d["title"] == "HAMSTER") { return (Math.sqrt(d["footprint"]) * 875) + 5 } else { return (Math.sqrt(d["footprint"]) * 875) - 20 } ;}) .attr("y", function(d) { if (d["title"] == "HAMSTER") { return basepointY - (Math.sqrt(d["footprint"]) * 875) + 47 } else { return basepointY - (Math.sqrt(d["footprint"]) * 875) + 33 } ;}) .text(function(d) { if (d["title"] == "HAMSTER") { return "Eco-footprint: \n" } else { return "Eco-footprint: " + d["footprint"] + " hectares" } ;}) .attr("transform", function(d) { if (d["title"] == "HAMSTER") { return } else { return "rotate(90 " + ((Math.sqrt(d["footprint"]) * 875) - 20) + "," + (basepointY - (Math.sqrt(d["footprint"]) * 875) + 33) + ")" } ;}) .attr("class", "guzzlerfootprint"); landguzzlers.selectAll(".guzzlerfootprintHAMSTER") .data(data) .join("text") .attr("x", function(d) { if (d["title"] == "HAMSTER") { return (Math.sqrt(d["footprint"]) * 875) + 5 } else { return } ;}) .attr("y", function(d) { if (d["title"] == "HAMSTER") { return basepointY - (Math.sqrt(d["footprint"]) * 875) + 70 } else { return } ;}) .text(function(d) { if (d["title"] == "HAMSTER") { return d["footprint"] + " hectares" } else { return } ;}) .attr("class", "guzzlerfootprintHAMSTER"); landguzzlers.append('line') .attr("x1", "510") .attr("x2", "773") .attr("y1", "230") .attr("y2", "230") .style(""); landguzzlers.append('line') .attr("x1", "773") .attr("x2", "773") .attr("y1", "230") .attr("y2", "295"); landguzzlers.append('line') .attr("x1", "240") .attr("x2", "531") .attr("y1", "471") .attr("y2", "471"); landguzzlers.append('line') .attr("x1", "531") .attr("x2", "531") .attr("y1", "471") .attr("y2", "518"); }2f:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1681704262372.872,"size":410}] 2b:{"id":"9ded71152e5f0d46","slug":null,"title":"Land guzzlers (pt. 2)","thumbnail":"ca57b23659e359c25ee04f39177133dec410aadd8864eeff13921d304f9fa070","access_level":"public","create_time":"$D2023-04-17T03:58:58.156Z","update_time":"$D2023-05-08T08:39:12.773Z","view_time":null,"first_public_time":"$D2023-04-17T03:58:58.156Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1a1a36b86df429e6","login":"vyo7tv","name":"Victoria Ok","avatar_url":"https://avatars-next.observableusercontent.com/20842b298900500b6ffc849cc98a6080baa5673642a71fcab490dd694e4a85fb","tier":"starter_2024"},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4209726d3b9cf6e0","login":"vyo7tv","name":"Victoria Ok","avatar_url":"https://avatars-next.observableusercontent.com/20842b298900500b6ffc849cc98a6080baa5673642a71fcab490dd694e4a85fb","tier":null}],"members":[{"type":"individual","id":"4209726d3b9cf6e0","login":"vyo7tv","name":"Victoria Ok","avatar_url":"https://avatars-next.observableusercontent.com/20842b298900500b6ffc849cc98a6080baa5673642a71fcab490dd694e4a85fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Land guzzlers (pt. 2)","cells":[{"id":0,"value":"# Land guzzlers (pt. 2)\nTemplate notebook. Fork this file (see [ ... ] menu at top right > Fork) to make a copy for yourself to work in for the Land guzzlers assignment. \nFeel free to modify any component. This is just a starting point. \nRemember to use the [examples and reference notebooks](https://observablehq.com/collection/@emfielduva/the-basics), especially D3 Baby Steps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"\n \n ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$2d","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":40,"value":"To get you started, I'll connect you to the SVG cell above using D3. \nClick in the svg cell above, and at the very bottom-left you'll see that this cell is named **svgContainer**. That's what we're grabbing. \nAnd this now makes landguzzlers a d3-enabled object to work with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"landguzzlers = d3.select(svgContainer) // selects the cell called svgContainer and make it a d3 object.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"**Now bring in the data.** See the paperclip icon top-right? Go upload the data file, from the ones provided in the assignment. You only need one of them. (csv or json).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"Then here we connect that data file to the code, and name it \"data\" to use later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"data = FileAttachment(\"land_guzzlers.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"Then from here, start to build your code rules to build the objects, from the data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"