25:["$","title",null,{"children":"Land guzzlers - procedural | Brandtly Jones | Observable"}] 49:T1050,4a:T46a,4b:T125f,graphic={ let svg_p=d3.select(SVG_procedural); let total_width=svg_p.attr("width"); let total_height=svg_p.attr("height"); let basepointX = 0; let basepointY = total_height; let scaleFactor = total_width/Math.sqrt(1.1); //scaling factor for boxes based on largest box let colors = ["#a5620b", "#c29657", "#cc1f5e", "#a71949", "#f7991d", "#231f20"] let boxes=svg_p.selectAll("rect") //basic boxes for the graphic scaled by sqrt(footprint) .data(data) .join("rect") .attr("x", basepointX) .attr("y", d=> basepointY-scaleFactor*Math.sqrt(d.footprint)) .attr("width", d=>scaleFactor*Math.sqrt(d.footprint)) .attr("height", d=>scaleFactor*Math.sqrt(d.footprint)) .attr("fill", (d,i)=> colors[i]) .attr("class", "guzzlerects"); //create a text container for the main text of each box const maintext= svg_p.append("g").attr("id", "maintext"); // Bind CSV data to new text elements //HAMSTER doesn't follow the rules, so it will get special treatment const textElements = maintext.selectAll("text") .data(data.filter((d,i)=>i<5)) .enter() .append("text"); // Set the text and position of each new text element textElements.attr("class", "mainText") .text(d=>d.title) .attr("x", d=>scaleFactor*Math.sqrt(d.footprint)-5) .attr("y", d=>basepointY-scaleFactor*Math.sqrt(d.footprint)+20) .attr("text-anchor", "end"); // Subtext const subtext = svg_p.append('g').attr("id", "subtext"); const subTextElements = subtext.selectAll("text") .data(data) .enter() .append("text") .attr("class", "subText") .text(d => d.subtitle) .attr("x", d => scaleFactor * Math.sqrt(d.footprint) - 30) .attr("y", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 45) .style("text-anchor", "end") .append("tspan") // append a new tspan element .text(d => d.subtitle2) .attr("x", d => scaleFactor * Math.sqrt(d.footprint) - 30) .attr("y", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 65) .style("text-anchor", "end") .append("tspan") // append a new tspan element .text(d => d.subtitle3) .attr("x", d => scaleFactor * Math.sqrt(d.footprint) - 30) .attr("y", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 85) .style("text-anchor", "end"); //create a text container for the vertical text of each box const verttext= svg_p.append("g").attr("id", "verttext"); // Bind CSV data to new text elements const v_textElements = verttext.selectAll("text") .data(data.filter((d,i)=>i<5)) .enter() .append("text"); // Set the text and position of each new text element v_textElements.attr("class", "vertText") .text(d=>"Eco-footprint: "+d.footprint+ " hectares") .attr("x", d=>scaleFactor*Math.sqrt(d.footprint)-10) .attr("y", d=>basepointY-scaleFactor*Math.sqrt(d.footprint)+30) .attr("text-anchor", "start"); //Finally add the lines for the Medium sized dog and the SUV let borderLines = svg_p.selectAll("line") .data(data.filter((d, i) => i > 0 && i < 3)); borderLines.join("line") .attr("x1", d => scaleFactor * Math.sqrt(d.footprint) - 25) .attr("y1", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 25) .attr("x2", d => scaleFactor * Math.sqrt(d.footprint) - 300) .attr("y2", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 25) .attr("class", "guzzlerects"); borderLines.enter() .append("line") .attr("x1", d => scaleFactor * Math.sqrt(d.footprint) - 25) .attr("y1", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 25) .attr("x2", d => scaleFactor * Math.sqrt(d.footprint) - 25) .attr("y2", d => basepointY - scaleFactor * Math.sqrt(d.footprint) + 95) .attr("class", "guzzlerects"); //HAMSTER text const hamster=svg_p.append("g").attr("id", "hamster"); const hamsterText=hamster.selectAll("text") .data(data.filter((d,i)=>i==5)) .enter() .append("text") .text(d=>d.title) .attr("x", d=>scaleFactor*Math.sqrt(d.footprint)+5) .attr("y", d=>basepointY-scaleFactor*Math.sqrt(d.footprint)+20) .style("text-anchor", "start") .attr("class", "mainText") .append("tspan") .text("Eco-footprint: ") .attr("x", d=>scaleFactor*Math.sqrt(d.footprint)+5) .attr("y", d=>basepointY-scaleFactor*Math.sqrt(d.footprint)+40) .attr("class", "subText") .style("text-anchor","start") .append('tspan') .text(d=>d.footprint +" hectares") .attr("x", d=>scaleFactor*Math.sqrt(d.footprint)+5) .attr("y", d=>basepointY-scaleFactor*Math.sqrt(d.footprint)+60) .attr("class", "subText") .style("text-anchor","start"); }4c:[{"id":"22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","href":"https://static.observableusercontent.com/files/22221ba87fda78211751e8c274c72c770ab6e6782ff38ced13a088df5a2ed4871192fb30376203ebd49f6576b9957ad1467bfce0070679edcc51c03f9124682c","name":"land_guzzlers.csv","type":"text/csv","lastModified":1680191452570.372,"size":410},{"id":"dfd2315f6830e689d848d35d233b9f16c0d1150b247a70b616953ce0fc728ce8531ae79e50e213601b5729f491e105efe24eff77c966907952a7c961dd9ece2e","href":"https://static.observableusercontent.com/files/dfd2315f6830e689d848d35d233b9f16c0d1150b247a70b616953ce0fc728ce8531ae79e50e213601b5729f491e105efe24eff77c966907952a7c961dd9ece2e","name":"LandGuzzlersRules.pdf","type":"application/pdf","lastModified":1680191452570.372,"size":1724135}] 29:{"id":"a602ddcb791c3182","slug":null,"title":"Land guzzlers - procedural","thumbnail":"73b82036f4e34eb1d3a304e90c4bc3a838e3f1e541eb2b9f16947f61273c3fc5","access_level":"public","create_time":"$D2023-03-30T15:50:52.570Z","update_time":"$D2023-04-03T13:36:39.083Z","view_time":null,"first_public_time":"$D2023-03-30T15:50:52.570Z","has_unpublished_edits":null,"fork":{"id":"3c7a6c5da7b600fc","slug":null,"title":"Land guzzlers","owner":{"id":"009014e770aabd81","login":"brandtlyj","name":"Brandtly Jones"}},"stars":0,"starred":false,"owner":{"type":"team","id":"009014e770aabd81","login":"brandtlyj","name":"Brandtly Jones","avatar_url":"https://avatars-next.observableusercontent.com/a1b77fe315418ac9bee575ef70138bc76c62f6ab65825fed17ffa1ba857a32b7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":378,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"faa4eab6a7554d34","login":"brandtlyj","name":"Brandtly Jones","avatar_url":"https://avatars-next.observableusercontent.com/a1b77fe315418ac9bee575ef70138bc76c62f6ab65825fed17ffa1ba857a32b7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"faa4eab6a7554d34","login":"brandtlyj","name":"Brandtly Jones","avatar_url":"https://avatars-next.observableusercontent.com/a1b77fe315418ac9bee575ef70138bc76c62f6ab65825fed17ffa1ba857a32b7","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 - procedural","cells":[{"id":0,"value":"# Land guzzlers - procedural\n\n## Brandtly Jones\n### bnj8f\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$49","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"svgContainer","database":"$undefined"},{"id":34,"value":"land_guzzlers = await FileAttachment(\"land_guzzlers.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"land_guzzlers","database":"$undefined"},{"id":35,"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":221,"value":"$4a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"SVG_procedural","database":"$undefined"},{"id":227,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"scaleFactor*Math.sqrt(data['footprint'][0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null