2c:null 2d:["$","title",null,{"children":"London Squared greenspace map | Tom Pearson | Observable"}] 32:T5c3,chart = { const svg = d3.select(DOM.svg(width, height)); svg.call(LS); LS.background() .attr('fill','rgb(242,242,242)'); LS.masked() .call(function(parent){ parent.append('rect') .attr('x', d=>(LS.blockSize()-edgeScale(Math.sqrt(d.data.area)))/2) .attr('y', d=>(LS.blockSize()-edgeScale(Math.sqrt(d.data.area)))/2) .attr('width', d=>edgeScale(Math.sqrt(d.data.area))) .attr('height', d=>edgeScale(Math.sqrt(d.data.area))) .attr('fill','rgb(216,216,216)'); parent.append('rect') .attr('x', d=>(LS.blockSize()-edgeScale(Math.sqrt(d.data.greenspace)))/2) .attr('y', d=>(LS.blockSize()-edgeScale(Math.sqrt(d.data.greenspace)))/2) .attr('width', d=>edgeScale(Math.sqrt(d.data.greenspace))) .attr('height', d=>edgeScale(Math.sqrt(d.data.greenspace))) .attr('fill','#00DD9D'); }); LS.foreground() .call((parent)=>{ parent.append('text') .attr('fill', 'rgb(255,255,255)') .attr('stroke', 'rgb(255,255,255)') .attr('stroke-width', 3) .attr('stroke-linejoin', 'round') .attr('dy', 15) .attr('dx', 3) .text(d => d.LSAbbreviation); parent.append('text') .attr('fill', 'rgb(0,0,0)') .attr('dy', 15) .attr('dx', 3) .text(d => d.LSAbbreviation); }) return svg.node(); //to add the chart to the page the block should return its node }33:[] 30:{"id":"6d59d1f781878822","slug":"london-squared-greenspace-map","title":"London Squared greenspace map","thumbnail":"e666fb5de9446a0154df14c5baf89f0b4d5e485663ecf0b29fc20f7346145567","access_level":"public","create_time":"$D2019-01-18T16:11:53.888Z","update_time":"$D2019-10-22T10:36:40.784Z","view_time":null,"first_public_time":"$D2019-01-18T16:54:12.864Z","has_unpublished_edits":null,"fork":{"id":"b6474a90bbdafbf5","slug":"london-squared-population-map","title":"London Squared population map","owner":{"id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":"starter_2024"},"version":150,"publish_version":150,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c8ac6bee0bc7e8","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":null}],"members":[{"type":"individual","id":"08c8ac6bee0bc7e8","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"505b6e27cb925672","slug":"london-squared","title":"London Squared","owner":{"id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson"}},"type":"notebook","body":{"titling":"auto","title":"London Squared greenspace map","cells":[{"id":0,"value":"md`# London Squared greenspace map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`_A layout for vizualising London datasets designed and developed by [After the flood](https://github.com/aftertheflood/londonsquared)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"html`\n\n

Total borough area\n

Greenspace area\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`Greenspace in London shown as as a proportion of a borough's area` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":" edgeScale = d3.scaleLinear()\n .domain([0, d3.max(boroughGreenspace, d => Math.sqrt(d.area))])\n .range([0, LS.blockSize()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"height = 440","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"LS = atf.londonSquared()\n .data(boroughGreenspace)\n .width(width)\n .height(height);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`load the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"boroughProfiles = d3.csv(\"https://raw.githubusercontent.com/aftertheflood/londonsquared/master/site/data/london-borough-profiles.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"boroughGreenspace = boroughProfiles.map(d=>{\n return {\n code:d.Code,\n greenspace:Number(d['Inland Area (Hectares)'])*(Number(d['% of area that is Greenspace, 2005'])/100),\n area:Number(d['Inland Area (Hectares)']),\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`import the D3 and the London Squared module`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"atf = require('https://bundle.run/@aftertheflood/londonsquared@0.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"html`styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"