3e:null 3f:["$","title",null,{"children":"Land guzzlers - d3 starting point | SARC5400 | Observable"}] 45:T10dd,// this is the part that does the drawing. // put a whole sequence of statements inside this { } code block. { landguzzlers.selectAll(".guzzlerrects") .data(data) .join("rect") .attr("x", 0) .attr("y", d => 800 - (600* Math.sqrt(+d['footprint']))) .attr("width", d => 600 * Math.sqrt(+d['footprint'])) .attr("height", d => 600 * Math.sqrt(+d['footprint'])) .style("propertyname", d => d['title']) .style("fill", (d,i) => ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"][i]) .style("opacity", 1.0) .style("stroke-width", 2) .style("stroke", "white") .attr("class", "guzzlerrects"); // <- don't forget the ; at the end of the whole statement landguzzlers.selectAll(".guzzlertitles") .data(data) .join("text") .text(d => d['title']) .attr("x", d => { if (d['title'] != 'HAMSTER') { return -5 +(600* Math.sqrt(+d['footprint'])) } else { return 110 + (600* Math.sqrt(+d['footprint'])) } }) .attr("y", d => 820 - (600* Math.sqrt(+d['footprint']))) .style("text-anchor", "end") .style("font-size", 22) .style("fill", "white") .attr("class", "guzzlertitles"); landguzzlers.selectAll(".guzzlersubtitles") .data(data) .join("text") .text(d=> d['subtitle']) .attr("x", d => -15 + (600* Math.sqrt(+d['footprint']))) .attr("y", d => 835 - (600* Math.sqrt(+d['footprint']))) .style("text-anchor", "end") .style("font-size", 12) .style("fill", "white") .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".guzzlersubtitles2") .data(data) .join("text") .text(d=> d['subtitle2']) .attr("x", d => -15 + (600* Math.sqrt(+d['footprint']))) .attr("y", d => 850 - (600* Math.sqrt(+d['footprint']))) .style("text-anchor", "end") .style("font-size", 12) .style("fill", "white") .attr("class", "guzzlersubtitles2"); landguzzlers.selectAll(".guzzlersubtitles3") .data(data) .join("text") .text(d=> d['subtitle3']) .attr("x", d => -15 + (600* Math.sqrt(+d['footprint']))) .attr("y", d => 865 - (600* Math.sqrt(+d['footprint']))) .style("text-anchor", "end") .style("font-size", 12) .style("fill", "white") .attr("class", "guzzlersubtitles3"); landguzzlers.selectAll(".guzzlerfootprint") .data(data) .join("text") .text(d=> "Eco-footprint: " + d['footprint'] + " hectares") .attr("x", d => { if (d['title'] != 'HAMSTER') { return -12 + (600* Math.sqrt(+d['footprint'])) } else { return 3 +(600* Math.sqrt(+d['footprint'])) } }) .attr("y", d => 830 - (600* Math.sqrt(+d['footprint']))) .style("text-anchor", "start") .style("font-size", 12) .style("fill", "white") .attr("transform", d => { if (d['title'] != 'HAMSTER') { return "rotate(90 " + (-12 + (600* Math.sqrt(+d['footprint']))) + "," + (830 - (600* Math.sqrt(+d['footprint']))) + ")" } else { return "rotate(0 " + (-12 + (600* Math.sqrt(+d['footprint']))) + "," + (830 - (600* Math.sqrt(+d['footprint']))) + ")" } }) .attr("class", "guzzlerfootprint"); landguzzlers.selectAll(".guzzlerlines") .data(data) .join("line") .attr("x1", d => { if (d["title"] == "TOYOTA LAND CRUISER" || d["title"] == "MEDIUM-SIZED DOG") { return 0.5* (600* Math.sqrt(+d['footprint'])) } else { return 1000 } }) .attr("x2", d => { if (d["title"] == "TOYOTA LAND CRUISER" || d["title"] == "MEDIUM-SIZED DOG") { return (600* Math.sqrt(+d['footprint'])) } else { return 1000 } }) .attr("y1", d => { if (d["title"] == "TOYOTA LAND CRUISER" || d["title"] == "MEDIUM-SIZED DOG") return 800 - (600* Math.sqrt(+d['footprint'])) else { return 1000 } }) .attr("y2", d => { if (d["title"] == "TOYOTA LAND CRUISER" || d["title"] == "MEDIUM-SIZED DOG") return 800 - (600* Math.sqrt(+d['footprint'])) else { return 1000 } }) .style("stroke", "white") .style("stroke-width", 0.2) .attr("class", "guzzlerlines"); }46:[{"id":"1f336d83083592f74c48162d4a4093f0248ac9de76111ba47e9ce35fef980dd633012a50f6f0702524c4a5e6b5932870f9307338083eb85db64641f43993e27c","href":"https://static.observableusercontent.com/files/1f336d83083592f74c48162d4a4093f0248ac9de76111ba47e9ce35fef980dd633012a50f6f0702524c4a5e6b5932870f9307338083eb85db64641f43993e27c","name":"land_guzzlers@1.json","type":"application/json","lastModified":1681853007147.339,"size":962}] 43:{"id":"706b0b80b9b4db27","slug":null,"title":"Land guzzlers - d3 starting point","thumbnail":"62833fb2fc2b1a618ad541ca9b2c7d751a4835be98a9cc1905d4274c0e88d1d7","access_level":"public","create_time":"$D2023-04-18T15:02:44.672Z","update_time":"$D2023-04-18T22:33:56.007Z","view_time":null,"first_public_time":"$D2023-04-18T22:19:43.764Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4f1573877898fdec","login":"sarc5400-elb3dy","name":"SARC5400","avatar_url":"https://avatars-next.observableusercontent.com/478c454e67eb3dc302f81b2b8d6ac94e201dfcfbbfcb2dcdfdc6f74dc22ad2b0","tier":"starter_2024","bio":"","following":false},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02d79b4d33703c00","login":"elb3dy","name":"Emily Branch","avatar_url":"https://avatars-next.observableusercontent.com/4907efc05c3feb824cd8eca17f21e9ccf76ff2f49d4d5b0bb10c434ce996edca","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"02d79b4d33703c00","login":"elb3dy","name":"Emily Branch","avatar_url":"https://avatars-next.observableusercontent.com/4907efc05c3feb824cd8eca17f21e9ccf76ff2f49d4d5b0bb10c434ce996edca","tier":null,"role":"editor"},{"type":"team","id":"4f1573877898fdec","login":"sarc5400-elb3dy","name":"SARC5400","avatar_url":"https://avatars-next.observableusercontent.com/478c454e67eb3dc302f81b2b8d6ac94e201dfcfbbfcb2dcdfdc6f74dc22ad2b0","tier":"starter_2024","role":"viewer"}],"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@1.json\").json()","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":123,"value":"lgDog = Math.sqrt(+data[0][\"footprint\"])* 600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"medDog = Math.sqrt(+data[1][\"footprint\"])* 600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"toyota = Math.sqrt(+data[2][\"footprint\"])*600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"golf = Math.sqrt(+data[3][\"footprint\"])*600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"cat = Math.sqrt(+data[4][\"footprint\"])*600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"hamster = Math.sqrt(+data[5][\"footprint\"])*600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof table = Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"