27:null 28:["$","title",null,{"children":"Land guzzlers (part 2) | Kelsey Matsik | Observable"}] 2d:Tb11,// this is the part that does the drawing { landguzzlers.selectAll(".guzzlerrects") //WHERE IS GUZZLERECTS COMING FROM? .data(data) //HOW DO I SPECIFY ONLY ONE RECTANGLE? .join("rect") .attr("x", basepointX) .attr("y", d => basepointY - Math.sqrt(d["footprint"]) * 1000) //WHY IS THIS SO HIGH UP? CORRECT CALCULATION? .attr("width", d => Math.sqrt(d["footprint"]) * 1000) .attr("height", d => Math.sqrt(d["footprint"]) * 1000) .style("fill", (d,i) => colors[i]) .attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement landguzzlers.selectAll(".title") .data(data) .join("text") .attr("x", d => Math.sqrt(d["footprint"]) * 1000) .attr("text-anchor", d => {if(d["title"]!="HAMSTER") {return "end"}}) .attr("y", d=> basepointY - Math.sqrt(d["footprint"]) * 1000 + 28) .text(d=> d["title"]) //don't need "text" argument .attr("class", "title"); landguzzlers.selectAll(".smalltitle1") .data(data) .join("text") .attr("x", d => Math.sqrt(d["footprint"]) * 1000) .attr("y", d=> basepointY - Math.sqrt(d["footprint"]) * 1000 + 50) .text(d=> "Eco-footprint: " + d["footprint"] + " hectares") //don't need "text" argument //.attr("transform", d => "rotate(90 " + (Math.sqrt(d["footprint"]) * 1000 - 17) + "," + (basepointY - Math.sqrt(d["footprint"]) * 1000 + 24) + ")") // transform = "rotate(angle x,y)" .attr("transform", d => {if(d["title"]!="HAMSTER") {return("rotate(90 " + (Math.sqrt(d["footprint"]) * 1000 - 4) + "," + (basepointY - Math.sqrt(d["footprint"]) * 1000 + 32) + ")")}}) .attr("class", "smalltitle1"); landguzzlers.selectAll(".smalltitle2") .data(data) .join("text") .attr("x", d => Math.sqrt(d["footprint"]) * 1000 - 30) .attr("text-anchor", d => {if(d["title"]!="HAMSTER") {return "end"}}) .attr("y", d=> basepointY - Math.sqrt(d["footprint"]) * 1000 + 53) .text(d=> d["subtitle"]) //don't need "text" argument .attr("class", "smalltitle2"); landguzzlers.selectAll(".smalltitle3") .data(data) .join("text") .attr("x", d => Math.sqrt(d["footprint"]) * 1000 - 30) .attr("text-anchor", d => {if(d["title"]!="HAMSTER") {return "end"}}) .attr("y", d=> basepointY - Math.sqrt(d["footprint"]) * 1000 + 73) .text(d=> d["subtitle2"]) //don't need "text" argument .attr("class", "smalltitle3"); landguzzlers.selectAll(".smalltitle4") .data(data) .join("text") .attr("x", d => Math.sqrt(d["footprint"]) * 1000 - 30) .attr("text-anchor", d => {if(d["title"]!="HAMSTER") {return "end"}}) .attr("y", d=> basepointY - Math.sqrt(d["footprint"]) * 1000 + 93) .text(d=> d["subtitle3"]) //don't need "text" argument .attr("class", "smalltitle4"); }2e:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1681844393450.044,"size":410}] 2b:{"id":"4128b86e1d352934","slug":null,"title":"Land guzzlers (part 2)","thumbnail":"7bd2a16f08eb42d818a5e0849d4403cedfe280b4b1e53f6866aead9a9c338744","access_level":"public","create_time":"$D2023-04-18T18:59:53.450Z","update_time":"$D2023-04-18T18:59:53.450Z","view_time":null,"first_public_time":"$D2023-04-18T18:59:53.450Z","has_unpublished_edits":null,"fork":{"id":"a257211269bb6106","slug":null,"title":"Land guzzlers (part 2) Error","owner":{"id":"3a250540e32fc4a3","login":"kcm7zp","name":"Kelsey Matsik"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3a250540e32fc4a3","login":"kcm7zp","name":"Kelsey Matsik","avatar_url":"https://avatars-next.observableusercontent.com/087274b5df91839f6552703a070aa445a2f2a8665e2cd83b7a5615bed1e1da0e","tier":"starter_2024"},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b997944b5a70ab9d","login":"kcm7zp","name":"Kelsey Matsik","avatar_url":"https://avatars-next.observableusercontent.com/087274b5df91839f6552703a070aa445a2f2a8665e2cd83b7a5615bed1e1da0e","tier":null}],"members":[{"type":"individual","id":"b997944b5a70ab9d","login":"kcm7zp","name":"Kelsey Matsik","avatar_url":"https://avatars-next.observableusercontent.com/087274b5df91839f6552703a070aa445a2f2a8665e2cd83b7a5615bed1e1da0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Land guzzlers (part 2)","cells":[{"id":0,"value":"# Land guzzlers (part 2)","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":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":160,"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":173,"value":"basepointX = 0 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"basepointY = 1200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"colors = [\"#a5620b\", \"#c29657\", \"#cc1f5e\", \"#a71949\", \"#f7991d\", \"#231f20\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"