40:null 41:["$","title",null,{"children":"Land guzzlers - d3 starting point | SARC 5400 Data Visualization | Observable"}] 47:T137c,// this is the part that does the drawing. // put a whole sequence of statements inside this { } code block. { // Colored Rectangles landguzzlers.selectAll(".guzzlerrects") .data(data) .join("rect") .attr("x", d => 0) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale) .attr("width", d => Number(Math.sqrt(d["footprint"])) * scale) .attr("height", d => Number(Math.sqrt(d["footprint"])) * scale) .style("fill", (d,i) => colors[i]) .style("stroke", d => d) .style("stroke-width", d => d) .attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement // Titles except Hamster landguzzlers.selectAll(".guzzlertitles") .data(noham_data) .join("text") .text(d => d["title"]) .attr("x", d => Number(Math.sqrt(d["footprint"])) * scale - (5 * Number(Math.sqrt(d["footprint"])))) .attr("y", d => 1000 + 21 - Number(Math.sqrt(d["footprint"])) * scale) .attr("font-size", 25) .attr("fill", "white") .attr("class", "guzzlertitles"); // Hamster Title landguzzlers.select(".guzzlertitles") .data(ham_data) .join("text") .text(d => d["title"]) .attr("x", d => Number(Math.sqrt(d["footprint"])) * scale + 110) .attr("y", d => 1000 + 21 - Number(Math.sqrt(d["footprint"])) * scale) .attr("front-size", 25) .attr("fill", "white") .attr("class", "guzzlertitles"); // Subtitle landguzzlers.selectAll(".guzzlersubtitles") .data(noham_data) .join("text") .text(d => d["subtitle"]) .attr("x", d => Number(Math.sqrt(d["footprint"])) * scale - (45 * Number(Math.sqrt(d["footprint"])))) .attr("y", d => 1000 + 50 - Number(Math.sqrt(d["footprint"])) * scale) .attr("font-size", 15) .attr("fill", "white") .attr("class", "guzzlertitles"); // Subtitle 2 landguzzlers.selectAll(".guzzlersubtitles") .data(noham_data) .join("text") .text(d => d["subtitle2"]) .attr("x", d => Number(Math.sqrt(d["footprint"])) * scale - (45 * Number(Math.sqrt(d["footprint"])))) .attr("y", d => 1000 + 65 - Number(Math.sqrt(d["footprint"])) * scale) .attr("font-size", 15) .attr("fill", "white") .attr("class", "guzzlertitles") // Subtitle 3 landguzzlers.selectAll(".guzzlersubtitles") .data(noham_data) .join("text") .text(d => d["subtitle3"]) .attr("x", d => Number(Math.sqrt(d["footprint"])) * scale - (45 * Number(Math.sqrt(d["footprint"])))) .attr("y", d => 1000 + 80 - Number(Math.sqrt(d["footprint"])) * scale) .attr("font-size", 15) .attr("fill", "white") .attr("class", "guzzlertitles"); // Vertical Ecofootprint landguzzlers.selectAll(".verticalecofootprint") .data(noham_data) .join("text") .text(d => "Eco-footprint: " + d["footprint"] + " hectares") .attr("x", d => 1100 - (Math.sqrt(Number(d["footprint"])) * 900) - 67) .attr("y", d => 1000 - (Math.sqrt(Number(d["footprint"])) * 900) - 985) .attr("font-size", 18) .attr("transform", "rotate(90)") .style("text-anchor", "start") .attr("fill", "white") .attr("class", "guzzlertitles"); // Hamster Eco-footprint Subtitle landguzzlers.selectAll(".hamecofootprint") .data(ham_data) .join("text") .text(d => "Eco-footprint:") .attr("x", d => Math.sqrt(Number(d.footprint)) * 900 + 2) .attr("y", d => 1000 - (Math.sqrt(Number(d.footprint)) * 900) + 46) .attr("font-size", 18) .style("text_anchor", "start") .attr("fill", "white") .attr("class", "guzzlersubtitles") // Hamster Hectares Subtitle landguzzlers.selectAll(".hamhectares") .data(ham_data) .join("text") .text(d => d["footprint"] + " hectares") .attr("x", d => Math.sqrt(Number(d.footprint)) * 900 + 2) .attr("y", d => 1000 - (Math.sqrt(Number(d.footprint)) * 900) + 66) .attr("font-size", 15) .style("text-anchor", "start") .attr("fill", "white") .attr("class", "guzzlertitles") // Horizontal Lines landguzzlers.selectAll(".horizontalline") .data(data.filter(d => d["subtitle"] != "")) .join("line") .attr("x1", d => (Math.sqrt(Number(d["footprint"])) * 900) - 300) .attr("x2", d => (Math.sqrt(Number(d["footprint"])) * 900) - 25) .attr("y1", d => 1000 - (Math.sqrt(Number(d["footprint"])) * 900) + 30) .attr("y2", d => 1000 - (Math.sqrt(Number(d.footprint)) * 900) + 30) .attr("class", "line"); // Vertical Lines landguzzlers.selectAll(".verticalline") .data(data.filter(d => d["subtitle"] != "")) .join("line") .attr("x1", d => (Math.sqrt(Number(d["footprint"])) * 900) - 25) .attr("x2", d => (Math.sqrt(Number(d["footprint"])) * 900) - 25) .attr("y1", d => 1000 - (Math.sqrt(Number(d["footprint"])) * 900) + 29) .attr("y2", d => 1000 - (Math.sqrt(Number(d["footprint"])) * 900) + 90) .attr("class", "line"); }48:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1681762017608.629,"size":410}] 45:{"id":"0dc920a30b963bfe","slug":null,"title":"Land guzzlers - d3 starting point","thumbnail":"a32a02b9ba8d7ae3cc3b63e2362c2f4b7a2dc3a93e0d9653f905091f674cf82c","access_level":"public","create_time":"$D2023-04-17T20:05:57.256Z","update_time":"$D2023-04-18T01:30:43.501Z","view_time":null,"first_public_time":"$D2023-04-17T20:05:57.256Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c5fa3a4c165d75a3","login":"datavisualization5400","name":"SARC 5400 Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/a224600ac0f830d1137d75a98bfdd5011c71fa1e501354c4ca22a9063e69367a","tier":"starter_2024","bio":"","following":false},"version":266,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"987771b7b6208fed","login":"jasminewang","name":"Jasmine Wang","avatar_url":"https://avatars-next.observableusercontent.com/af1ceed07b64765cd12db9fcb4adac760f1a3c0dd41b588559b690e26f2b20d1","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"c5fa3a4c165d75a3","login":"datavisualization5400","name":"SARC 5400 Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/a224600ac0f830d1137d75a98bfdd5011c71fa1e501354c4ca22a9063e69367a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"987771b7b6208fed","login":"jasminewang","name":"Jasmine Wang","avatar_url":"https://avatars-next.observableusercontent.com/af1ceed07b64765cd12db9fcb4adac760f1a3c0dd41b588559b690e26f2b20d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":151,"value":"noham_data = [data[0], data[0], data[1], data[2], data[3], data[4]] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"ham_data = [data[5]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"colors = [\"#a5620b\", \"#c29657\", \"#cc1f5e\", \"#a71949\", \"#f7991d\", \"#231f20\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"scale = 900","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"