2b:null 2c:["$","title",null,{"children":"London Squared with user editable data | Tom Pearson | Observable"}] 31:T816,table = html`

Code	Area name	User data
E09000001	City of London	100
E09000002	Barking and Dagenham	100
E09000003	Barnet	100
E09000004	Bexley	100
E09000005	Brent	100
E09000006	Bromley	100
E09000007	Camden	100
E09000008	Croydon	100
E09000009	Ealing	100
E09000010	Enfield	100
E09000011	Greenwich	100
E09000012	Hackney	100
E09000013	Hammersmith and Fulham	100
E09000014	Haringey	100
E09000015	Harrow	100
E09000016	Havering	100
E09000017	Hillingdon	100
E09000018	Hounslow	100
E09000019	Islington	100
E09000020	Kensington and Chelsea	100
E09000021	Kingston upon Thames	100
E09000022	Lambeth	100
E09000023	Lewisham	100
E09000024	Merton	100
E09000025	Newham	100
E09000026	Redbridge	100
E09000027	Richmond upon Thames	100
E09000028	Southwark	100
E09000029	Sutton	100
E09000030	Tower Hamlets	100
E09000031	Waltham Forest	100
E09000032	Wandsworth	100
E09000033	Westminster	100

`32:[] 2f:{"id":"51905285989e1161","slug":"london-squared-with-user-editable-data","title":"London Squared with user editable data","thumbnail":"1114411a12a0c4fc8c310d17f556d4a591c6b6f6abc38fc26b4fdd275e7c7703","access_level":"public","create_time":"$D2019-01-21T15:29:27.279Z","update_time":"$D2019-03-01T11:27:52.737Z","view_time":null,"first_public_time":"$D2019-01-21T15:54:17.894Z","fork":{"id":"b6474a90bbdafbf5","slug":"london-squared-population-map","title":"London Squared population map","owner":{"id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson"}},"stars":1,"starred":false,"owner":{"type":"team","id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson","avatar_url":"https://avatars-next.observableusercontent.com/26cbbccc572a8a25c540387278c92aae1c68384373da7f85ef1cd717c7fbf381","tier":"starter_2024"},"version":94,"publish_version":94,"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,"subscribed":null,"forks":1,"collection":{"id":"505b6e27cb925672","slug":"london-squared","title":"London Squared","owner":{"id":"45d8dac961c18abd","login":"tomgp","name":"Tom Pearson"}},"type":"notebook","body":{"title":"London Squared with user editable data","cells":[{"id":0,"value":"md`# London Squared with user editable data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":23,"value":"chart = {\n const width = 500;\n const height = 500;\n const dataProperty = 'User data';\n const svg = d3.select(DOM.svg(width, height));\n const LS = atf.londonSquared()\n .data(tableData, d=>d.Code)\n .width(width)\n .height(height);\n \n svg.call(LS);\n \n const circleScale = d3.scalePow()\n .domain([0, d3.max(tableData, d => Number(d[dataProperty]))])\n .range([0, LS.blockSize()/2])\n \n LS.background()\n .attr('fill','rgb(240,240,240)');\n \n LS.masked()\n .call(function(parent){\n parent.append('circle')\n .attr('r', d => {\n console.log(d); \n return circleScale(d.data[dataProperty])\n })\n .attr('cx', LS.centroid()[0])\n .attr('cy', LS.centroid()[1])\n .attr('fill', 'rgb(255, 40, 40)');\n });\n \n LS.foreground()\n .append('text')\n .attr('fill', 'rgb(0,0,0)')\n .attr('dy', 15)\n .attr('dx', 3)\n .text(d => d.LSAbbreviation);\n \n return svg.node(); //to add the chart to the page the block should return its node\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"md`The table below is editable; change values in the _User data_ column and see those changes reflected in the map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"tableData = {\n table;\n return Generators.observe(notify => {\n const keyinput = event => {\n notify(parseTableData('data-table'));\n };\n document.querySelector('#data-table').addEventListener(\"input\", keyinput, false);\n notify(parseTableData('data-table'));\n return () => window.removeEventListener(\"input\", keyinput);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"parseTableData = function(tableID){\n const data = [];\n document.querySelectorAll(`#${tableID} tr`)\n .forEach((row, i)=>{\n data.push(row.innerText.split(/[\\t\\n]/g));\n })\n\n const formattedData = data.reduce((accumulator, row, i)=>{\n if(i==0){\n accumulator.properties = row;\n }else{\n const rowObject = {};\n accumulator.properties.forEach((key,i)=>{\n rowObject[key] = row[i];\n });\n accumulator.push(rowObject);\n }\n return accumulator;\n },[]);\n return formattedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`import the D3 and the London Squared module`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"atf = require('https://bundle.run/@aftertheflood/londonsquared@0.3.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"html`styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"