40:null 41:["$","title",null,{"children":"Land guzzlers - d3 starting point | Ali Rivera | Observable"}] 47:T89f,// this is the part that does the drawing. // put a whole sequence of statements inside this { } code block. { let colors=["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"]; let scale = 1000 landguzzlers.selectAll(".guzzlerrects") .data(data) .join("rect") .attr("x", 0) .attr("y", d => 1100-Math.sqrt(d['footprint']) * scale) .attr("width", d=> Math.sqrt(d['footprint'])* scale) .attr("height", d=> Math.sqrt(d['footprint'])* scale) .style("fill", (data,i) => colors[i]) .attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement landguzzlers.selectAll(".guzzlertitles") .data(data) .join("text") .attr("x", d=> Math.sqrt(d['footprint'])* scale - 5) .attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 25) .text(d => d["title"]) .attr("class", "guzzlertitles"); landguzzlers.selectAll(".guzzlersubtitles") .data(data) .join("text") .attr("x", d=> Math.sqrt(d['footprint'])* scale - 30) .attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 50) .text(d => d["subtitle"]) .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".guzzlersubtitles2") .data(data) .join("text") .attr("x", d=> Math.sqrt(d['footprint'])* scale - 30) .attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 70) .text(d => d["subtitle2"]) .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".guzzlersubtitles3") .data(data) .join("text") .attr("x", d=> Math.sqrt(d['footprint'])* scale - 30) .attr("y", d=> 1100 - Math.sqrt(d['footprint'])* scale + 90) .text(d => d["subtitle3"]) .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".sidetext") .data(data) .join("text") .attr("transform" ,function(d,i){ var x = Math.sqrt(d['footprint'])* scale - 15; var y = 1100 - Math.sqrt(d['footprint'])* scale + 215; return "translate(" + x + "," + y + ") rotate(90)";}) .text(d => "Eco-footprint: " + d["footprint"] + " hectares") .attr("class", "guzzlersubtitles"); }48:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1681834000162.28,"size":410},{"id":"1f336d83083592f74c48162d4a4093f0248ac9de76111ba47e9ce35fef980dd633012a50f6f0702524c4a5e6b5932870f9307338083eb85db64641f43993e27c","href":"https://static.observableusercontent.com/files/1f336d83083592f74c48162d4a4093f0248ac9de76111ba47e9ce35fef980dd633012a50f6f0702524c4a5e6b5932870f9307338083eb85db64641f43993e27c","name":"land_guzzlers.json","type":"application/json","lastModified":1681834018621.757,"size":962},{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers@1.csv","type":"text/csv","lastModified":1681834119015.842,"size":410}] 45:{"id":"13f5a8d5549205a8","slug":null,"title":"Land guzzlers - d3 starting point","thumbnail":"d3d8402ba47f6216b95206d3af11ae370d695ad994c358cad0c331ddb48c4501","access_level":"public","create_time":"$D2023-04-18T16:05:36.819Z","update_time":"$D2023-04-18T20:05:50.727Z","view_time":null,"first_public_time":"$D2023-04-18T16:05:36.819Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"681713ab43118252","login":"alirivera","name":"Ali Rivera","avatar_url":"https://avatars-next.observableusercontent.com/d20e1d4a8e2784869f5ca02bf929404083f31799cac5d98b6c0574925a7d6483","tier":"starter_2024","bio":"","following":false},"version":203,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bbb1f646b8089b9","login":"alirivera","name":"Ali Rivera","avatar_url":"https://avatars-next.observableusercontent.com/d20e1d4a8e2784869f5ca02bf929404083f31799cac5d98b6c0574925a7d6483","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0bbb1f646b8089b9","login":"alirivera","name":"Ali Rivera","avatar_url":"https://avatars-next.observableusercontent.com/d20e1d4a8e2784869f5ca02bf929404083f31799cac5d98b6c0574925a7d6483","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Land guzzlers - d3 starting point","cells":[{"id":0,"value":"# Land guzzlers - d3 starting point\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"svgContainer","database":"$undefined"},{"id":36,"value":"---------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"data = FileAttachment(\"land_guzzlers.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"