40:null 41:["$","title",null,{"children":"Land guzzlers - d3 starting point | Land Guzzlers | Observable"}] 47:T4d5,48:Tc79,// this is the part that does the drawing. // put a whole sequence of statements inside this { } code block. { landguzzlers.selectAll(".guzzlerrects") .data(data_full) .join("rect") .attr("x", 0) .attr("y", d => 1000 - Math.sqrt(d['footprint'])*scale) .attr("width", d=> Math.sqrt(d['footprint'])*scale) .attr("height", d=> Math.sqrt(d['footprint'])*scale) .attr("class", "guzzlerrects") .style("fill", (d,i) => colors[i]); landguzzlers.selectAll(".guzzlertitles") .data(data) .join("text") .text(d => d["title"]) .attr("x", d=> Math.sqrt(d['footprint'])*scale - 5) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 25) .attr("class", "guzzlertitles"); landguzzlers.selectAll(".guzzlersubtitles") .data(data) .join("text") .text(d => d["subtitle"]) .attr("x", d=> Math.sqrt(d['footprint'])*scale - 25) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 55) .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".guzzlersubtitles2") .data(data) .join("text") .text(d => d["subtitle2"]) .attr("x", d=> Math.sqrt(d['footprint'])*scale - 25) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 70) .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".guzzlersubtitles3") .data(data) .join("text") .text(d => d["subtitle3"]) .attr("x", d=> Math.sqrt(d['footprint'])*scale - 25) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 85) .attr("class", "guzzlersubtitles"); landguzzlers.selectAll(".guzzlerverttitles") .data(data) .join("text") .text(d => {if(d['title']!='VOLKSWAGEN GOLF'){ return 'Eco-footprint: ' + d["footprint"] + ' hectares'}else{return ''}}) .attr("x", d=> Math.sqrt(d['footprint'])*scale - 20) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 10) .attr('transform', d=> "rotate(90 " + (Math.sqrt(d['footprint'])*scale - 30) + ", " + (1000 - Number(Math.sqrt(d["footprint"])) * scale + 25) + ")") .attr("class", "guzzlerverttitles"); // HAMSTER TEXT landguzzlers.selectAll(".hamstertitles") .data(data_full.filter(d => d.title == "HAMSTER")) .join("text") .text(d => d["title"]) .attr("x", d=> Math.sqrt(d['footprint'])*scale + 2) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 20) .attr("class", "hamstertitles"); landguzzlers.selectAll(".hamstersubtitles") .data(data_full.filter(d => d.title == "HAMSTER")) .join("text") .text('Eco-footprint:') .attr("x", d=> Math.sqrt(d['footprint'])*scale + 2) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 35) .attr("class", "hamstersubtitles"); landguzzlers.selectAll(".hamstersubtitles2") .data(data_full.filter(d => d.title == "HAMSTER")) .join("text") .text(d => d["footprint"] + ' hectares') .attr("x", d=> Math.sqrt(d['footprint'])*scale + 2) .attr("y", d => 1000 - Number(Math.sqrt(d["footprint"])) * scale + 50) .attr("class", "hamstersubtitles"); }49:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1681656435069.267,"size":410}] 45:{"id":"b2828a00209bc277","slug":null,"title":"Land guzzlers - d3 starting point","thumbnail":"2cd78b799a19c26b25d2c56ea352ac8f97f677f23c12b323be86326a4d83305d","access_level":"public","create_time":"$D2023-04-16T14:43:00.579Z","update_time":"$D2023-04-16T17:14:21.934Z","view_time":null,"first_public_time":"$D2023-04-16T14:43:00.579Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d6814485155c0aa8","login":"landguzzlersdanek","name":"Land Guzzlers","avatar_url":"https://avatars-next.observableusercontent.com/71f69a493cbe70bba6625db7c38c6c664f27dc78cce6eed1e0d2b08264296681","tier":"starter_2024","bio":"","following":false},"version":289,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0f71acb82f8bebf","login":"brennandanek","name":"brennandanek","avatar_url":"https://avatars-next.observableusercontent.com/762b3f79b24424e79076c6b0003d4c28e3b84773f38cc5318e8318b3497fa631","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b0f71acb82f8bebf","login":"brennandanek","name":"brennandanek","avatar_url":"https://avatars-next.observableusercontent.com/762b3f79b24424e79076c6b0003d4c28e3b84773f38cc5318e8318b3497fa631","tier":null,"role":"editor"},{"type":"team","id":"d6814485155c0aa8","login":"landguzzlersdanek","name":"Land Guzzlers","avatar_url":"https://avatars-next.observableusercontent.com/71f69a493cbe70bba6625db7c38c6c664f27dc78cce6eed1e0d2b08264296681","tier":"starter_2024","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":"$47","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_full = 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":123,"value":"data = data_full.filter(d => d.title != \"HAMSTER\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"scale = 900 / Math.sqrt(Number(data[0]['footprint']))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"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":202,"value":"Math.sqrt(data[0]['footprint'])*scale-5","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":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"