3f:null 40:["$","title",null,{"children":"EcoAssets DataViz 6: Shape Tweening | ClaraPT's Workspace | Observable"}] 46:T515,# EcoAssets DataViz 6: Shape Tweening Forked from Bartosz Prusinowski's notebook https://observablehq.com/@bartok32/short-tale-of-a-country-that-liked-to-change-shapes Morphing voivodeships (state shapes) into rectangles - a summary of the notebook - find minimal & maximal values of x and y - calculate the points on the boundaries - shape tweening from mike bostock --> new path has to start as close as possible to the starting coordinate of the old one - morph shapes into circle to automatically find the closest point for each shape - write a function to transform shapes into rectangles The default approach makes sure that the area of both circles and rectangles is the same as the area of the original shape; what's more is that the shape's centroid also stays in place (besides the circle layout to prevent overlapping [based on this example]). But in order to morph states into a bar chart, need to implement additional features to the rectangle function, to be able to set width, height and starting x & y coordinates of the rect. The shape has to morph with respect to its centroid and be translated at the same time, so the animation will look as expected each time.47:T84c,chart = { const svg = d3.create('svg').attr('viewBox', [0, 0, w, h]); const legend = svg.append('g') .attr('class', 'legend') .attr('transform', `translate(${w - 105}, 40)`); appendLegendItems(); const states = svg.append('g') .selectAll('.state') .data(baseCoords.features) .join('path') .attr('class', 'state') .attr('d', d => path(d.geometry.coordinates[0])) .attr('fill', d => color(d.value)) .call(path => path.append('title').text(d => `${d.name}: ${d.value}%`)); const names = svg.append('g') .selectAll('.name') .data(baseCoords.features) .join('text') .attr('class', 'name') .attr('x', d => barWidth(d.value) + margin.left + 4) .attr('y', (d, i) => y(i) + 40) .text(d => d.name); const labels = svg.append('g') .selectAll('.label') .data(baseCoords.features) .join('text') .attr('class', 'label') .attr('x', d => barWidth(d.value) + margin.left + 4) .attr('y', (d, i) => y(i) + 13) .text(d => d.value + '%'); function appendLegendItems() { d3.range(color.domain().length).forEach((i) => { legend.append('g') .attr('class', 'legend-item') .call( g => g.append('circle') .attr('cx', i * 32.5) .attr('r', 17.5) .style('fill', color.range()[i]) ) .call( g => g.append('text') .attr('x', i * 32.5) .attr('y', 30) .text(color.domain()[i] + '%') ) }); }; return Object.assign(svg.node(), { morph(type) { if (type == 'bar') { legend.transition().duration(1750).style('opacity', 0); names.transition().duration(1250).delay(1000).style('opacity', 1); labels.transition().duration(1250).delay(1000).style('opacity', 1); } else { legend.transition().duration(1750).style('opacity', 1); names.transition().duration(750).style('opacity', 0); labels.transition().duration(750).style('opacity', 0); }; morphStates(states, type); return 'Morphing!'; } }); }48:T93b,rectangle = (coords, config = { x: 0, y: 0 }) => { let rectangle = [], polygon = d3.polygonHull(coords), p0 = coords[0], [yMin, yMax] = d3.extent(coords, d => d[1]), i = 0, n = coords.length, cp, // closest point cpi // closest point index let area = d3.polygonArea(polygon), centroid = d3.polygonCentroid(coords), // By default, the area of the rectangle will be equal to area of // initial shape. In order to limit the number of infinite possibilities // to select a and b, b will always be set to the extent of y coords. b = config.height || yMax - yMin, a = config.width || area / b, xMin = centroid[0] - a / 2, xMax = centroid[0] + a / 2; yMin = centroid[1] - b / 2; yMax = centroid[1] + b / 2; const length = Math.floor(n / 4); // Going clockwise with rectangle's sides. const sides = [ // top ...Array.from({length}).map((d, i) => [xMin + a * i / length, yMin]), // right ...Array.from({length}).map((d, i) => [xMax, yMin + b * i / length]), // bottom ...Array.from({length}).map((d, i) => [xMax - a * i / length, yMax]), // left ...Array.from({length: length + (n - length * 4)}).map((d, i) => [xMin, yMax - b * i / length]) ]; // Looking for the point on the rectangle's sides which is closest to the // first point of a given shape. while (++i < n) { const dx = p0[0] - sides[i][0]; const dy = p0[1] - sides[i][1]; const d = Math.sqrt(dx * dx + dy * dy); if (d < cp || !cp) { cp = d; cpi = i; }; }; // The shape will morph starting from the closest point, going clockwise side by side. rectangle.push( ...sides.slice(cpi, n), ...sides.slice(0, cpi) ); return { coords: rectangle, // The below line is more important than it seems - by default (most often during // initial shape -> bar chart morph), the shape tweens is ugly looking way: e.g. // the line is flipping, the whole transition doesn't look natural. However, // when we morph the shape with respect to its centroid, the transition looks // as it should - that's why the shape always morphs with respect to its centroid, // and is translated to given x and y coords along the way. translate: `translate(${config.x > 0 ? config.x - xMin : 0}, ${config.y > 0 ? -yMin + config.y : 0})` }; }49:T4b3,// Overlapping prevention comes from https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted. prepareInitialCoords = baseCoords => { baseCoords.features .forEach(c => { c.name = c.properties.STE_NAME21; c.value = data.filter(d => d.name == c.name)[0].value; const coords = c.geometry.coordinates[0].map(projection); c.geometry.coordinates[0] = coords; c.centroid = d3.polygonCentroid(coords); c.centroidHull = d3.polygonCentroid(d3.polygonHull(coords)); c.radius = (Math.sqrt(Math.abs(d3.polygonArea(coords)) / Math.PI))*10; }); const simulation = d3.forceSimulation(baseCoords.features) .force('x', d3.forceX().x(d => d.centroid[0]).strength(0.3)) .force('y', d3.forceY().y(d => d.centroid[1]).strength(0.3)) .force('charge', d3.forceManyBody().strength(-1)) .force('collide', d3.forceCollide().radius(d => d.radius).strength(1)) .stop(); let i = 0; while (simulation.alpha() > 0.01 && i < 200) { simulation.tick(); i++; }; const result = {type: 'FeatureCollection', features: simulation.nodes()}; result.features = result.features.sort((a, b) => a.value - b.value) return result; }4a:[{"id":"baaa2c98d6ea13e98d72ceb0fdb7df74059589b62779934b2cf5e9e53a421db1b8644a0e96dbe17db22f5755dab3f012bdc5da87aefe685df610cc7e9eca30a1","href":"https://static.observableusercontent.com/files/baaa2c98d6ea13e98d72ceb0fdb7df74059589b62779934b2cf5e9e53a421db1b8644a0e96dbe17db22f5755dab3f012bdc5da87aefe685df610cc7e9eca30a1","name":"coords.json","type":"application/json","lastModified":1707112628387.013,"size":147486},{"id":"d22ea4dba9e786664c3da951f5f1ea1ea8838858ff5b942c715481f8ff152bd90851c53e90579c20b25cba0866da932c90066ab47b10b829dc4f9eb8f7e5f234","href":"https://static.observableusercontent.com/files/d22ea4dba9e786664c3da951f5f1ea1ea8838858ff5b942c715481f8ff152bd90851c53e90579c20b25cba0866da932c90066ab47b10b829dc4f9eb8f7e5f234","name":"data.csv","type":"text/csv","lastModified":1707112628387.013,"size":325},{"id":"1bac69f635e0ae9329793db237506afa8f44e777f7f221d5c9092bcb8c48e3d4d54806d3e81053dfffd54b3cd58cc22d8d6642ae0d4e376d4d3fdfa8ca6ee10d","href":"https://static.observableusercontent.com/files/1bac69f635e0ae9329793db237506afa8f44e777f7f221d5c9092bcb8c48e3d4d54806d3e81053dfffd54b3cd58cc22d8d6642ae0d4e376d4d3fdfa8ca6ee10d","name":"stateShapes.json","type":"application/json","lastModified":1708319694197.201,"size":157215},{"id":"59d2783badb5f3f904ad2cd5150f1e1a2f0d5aaabc6a05b2c5b7fb2f5a3388688dee5478c50dc330e538586c4d7020dec977d1e2e0c03c17e357cfa9cae6d3b2","href":"https://static.observableusercontent.com/files/59d2783badb5f3f904ad2cd5150f1e1a2f0d5aaabc6a05b2c5b7fb2f5a3388688dee5478c50dc330e538586c4d7020dec977d1e2e0c03c17e357cfa9cae6d3b2","name":"stateShapes@1.json","type":"application/json","lastModified":1708320566410.991,"size":156771},{"id":"6dc08f6c5d11045fbc7372b2479fa3231d072e46eec4f4e630b8a7b792510c1fa1a37b9dc59157925dfe1ed8cced93e377bae1f5ecc6c53e8721a6a14bb419b2","href":"https://static.observableusercontent.com/files/6dc08f6c5d11045fbc7372b2479fa3231d072e46eec4f4e630b8a7b792510c1fa1a37b9dc59157925dfe1ed8cced93e377bae1f5ecc6c53e8721a6a14bb419b2","name":"stateCounts@3.csv","type":"text/csv","lastModified":1708321130581.089,"size":446},{"id":"58a019d56d58a28768f1fbdd02d956bf7ccb0c6f64218f272bcb330fba976b81cb411d8065e1d4ee1fc3b92c75f2f1cf1287939875cf495fa9a6b01ff181b6f0","href":"https://static.observableusercontent.com/files/58a019d56d58a28768f1fbdd02d956bf7ccb0c6f64218f272bcb330fba976b81cb411d8065e1d4ee1fc3b92c75f2f1cf1287939875cf495fa9a6b01ff181b6f0","name":"stateCounts@4.csv","type":"text/csv","lastModified":1708321174125.143,"size":302},{"id":"972b189d8468a13e13cc913b4494bfc04adcd0516ab5158d355ff4ec18b1d290af5d8b8747e2fc9e99f8b11ab566fe15205b3c2d5f0cf7943fd194dd90886b6f","href":"https://static.observableusercontent.com/files/972b189d8468a13e13cc913b4494bfc04adcd0516ab5158d355ff4ec18b1d290af5d8b8747e2fc9e99f8b11ab566fe15205b3c2d5f0cf7943fd194dd90886b6f","name":"stateShapes@2.json","type":"application/json","lastModified":1708321408388.188,"size":119141},{"id":"21b8a797ad0e452f087ed5781bddd8754bb5f19654ca1e940e54109ca814e4a0bc156a96e241eeef1ae5424487d1ff2f23105f6770fa9db2bd733fe8e4375917","href":"https://static.observableusercontent.com/files/21b8a797ad0e452f087ed5781bddd8754bb5f19654ca1e940e54109ca814e4a0bc156a96e241eeef1ae5424487d1ff2f23105f6770fa9db2bd733fe8e4375917","name":"stateShapes@3.json","type":"application/json","lastModified":1708325284808.601,"size":727957},{"id":"987df7cedd46278797712f4f2ae53bc4722852d15334b58f35a92e4e5593c485d80ffa9f8ecb331be2a65642e2830ed03c875198e6f11c5a7bd2e70d553c6ebd","href":"https://static.observableusercontent.com/files/987df7cedd46278797712f4f2ae53bc4722852d15334b58f35a92e4e5593c485d80ffa9f8ecb331be2a65642e2830ed03c875198e6f11c5a7bd2e70d553c6ebd","name":"stateShapesOrdered.json","type":"application/json","lastModified":1708397400557.73,"size":742883},{"id":"dd61f4d57d17cdefd3f059aeeca31e4904eeac8c937f74e1eb59d31a6f46f8d38ab9fdf5f5a84ec83d2fb60802dbac175c0a96b1c43ebb9fb9cf1d4dc773de66","href":"https://static.observableusercontent.com/files/dd61f4d57d17cdefd3f059aeeca31e4904eeac8c937f74e1eb59d31a6f46f8d38ab9fdf5f5a84ec83d2fb60802dbac175c0a96b1c43ebb9fb9cf1d4dc773de66","name":"stateShapesOrdered@1.json","type":"application/json","lastModified":1708401281909.21,"size":375396},{"id":"11b92e4cca1288f7c2b1521f6d15572f77b06f7dcc146bef6d688784f7e949922ae70d13d3f0c82a755385ef5dbb2e502d9dc23b6faf2bd03518938b74f6c71b","href":"https://static.observableusercontent.com/files/11b92e4cca1288f7c2b1521f6d15572f77b06f7dcc146bef6d688784f7e949922ae70d13d3f0c82a755385ef5dbb2e502d9dc23b6faf2bd03518938b74f6c71b","name":"stateShapesMulti@1.json","type":"application/json","lastModified":1708389588678.155,"size":553646},{"id":"b682360beb330162add92c06a8afe76b7fa0b98e63f3d62550130e59ca2d94c2fa0fd85097d6a5266ce07185ac8c8976e4a82af52873cbadb4b328ad29d04501","href":"https://static.observableusercontent.com/files/b682360beb330162add92c06a8afe76b7fa0b98e63f3d62550130e59ca2d94c2fa0fd85097d6a5266ce07185ac8c8976e4a82af52873cbadb4b328ad29d04501","name":"stateCounts@5.csv","type":"text/csv","lastModified":1708491276850.192,"size":204}] 44:{"id":"fa96b6b8e5843157","slug":"ecoassets-dataviz-6-shape-tweening","title":"EcoAssets DataViz 6: Shape Tweening","thumbnail":"4ffdd9f9d4068f392335bacfaede05471faca526abfc47bf866083a6e375e9ad","access_level":"public","create_time":"$D2024-02-05T05:57:08.387Z","update_time":"$D2024-02-26T04:22:18.177Z","view_time":null,"first_public_time":"$D2024-02-05T05:57:08.387Z","has_unpublished_edits":null,"fork":{"id":"5e7c86afae08ee2e","slug":"short-tale-of-a-country-that-liked-to-change-shapes","title":"Short Tale of a Country That Liked to Change Shape","owner":{"id":"44f043b020beee3d","login":"bartok32","name":"Bartosz Prusinowski"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","bio":"","following":false},"version":1391,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"dcc5570c27723f12","login":"clarapt","name":"ClaraPT","avatar_url":"https://avatars-next.observableusercontent.com/94f28b46e7bf4690e08b606bf812e29b4b557f957a3bf4434b688320c4fd3c1a","tier":null,"role":"editor"},{"type":"team","id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dcc426a36b2ed415970a7ddab0b94862129b0e8cbffd5ae5d482cde0c2090afb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"c3092cc076c029d0","slug":"ecoassets-visualisations","title":"EcoAssets visualisations","owner":{"id":"0609cd6aa697a8cd","login":"clarapt-ws","name":"ClaraPT's Workspace"}},"type":"notebook","body":{"titling":"auto","title":"EcoAssets DataViz 6: Shape Tweening","cells":[{"id":1164,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":640,"value":"---\n## Sum of Occurrence Counts by Australian States and Territories as proportion of total count for 2022 \nFrom EcoAssets Biodiversity aggregate data set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":647,"value":"*1900-2022*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":773,"value":"viewof type = radio({\n title: 'Shape type',\n description: 'Morph them all.',\n options: ['geo', 'circle', 'rectangle', 'bar'],\n value: 'geo'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"chart.morph(type)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"h = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"margin = ({\n top: 50,\n right: 120,\n bottom: 50,\n left: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"barWidth = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([0, w - margin.right - margin.left])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"y = d3.scaleLinear()\n .domain([0, data.length])\n .range([margin.top, h - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"color = d3.scaleLinear()\n .domain([dataRange.min, dataRange.mid, dataRange.max])\n .range(['#44189C', '#BD369E', '#66af9bff'])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"dataRange = ({\n min: d3.min(data, d => d.value), \n mid: (((d3.max(data, d => d.value) - d3.min(data, d => d.value)) / 2) + d3.min(data, d => d.value)).toFixed(0), \n max: d3.max(data, d => d.value)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"projection = d3.geoMercator()\n .fitExtent([[margin.left * 0.5, margin.top * 0.5], [w - margin.left * 0.5, h - margin.top * 0.5]], coordsData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"path = coords => 'M' + coords.join('L') + 'Z'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"delay = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"---\n### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"// Slightly modified code from https://bl.ocks.org/mbostock/3081153\ncircle = (coords, cx, cy, r) => {\n\n let circle = [],\n length = 0,\n lengths = [length],\n p0 = coords[0],\n p1,\n x,\n y,\n i = 0,\n n = coords.length;\n\n while (++i < n) {\n p1 = coords[i];\n x = p1[0] - p0[0];\n y = p1[1] - p0[1];\n lengths.push(length += Math.sqrt(x * x + y * y));\n p0 = p1;\n };\n\n p0 = coords[0];\n\n let area = d3.polygonArea(coords),\n centroid = [cx, cy],\n angle,\n angleOffset = Math.atan2(p0[1] - centroid[1], p0[0] - centroid[0]),\n k = 2 * Math.PI / length;\n\n i = -1;\n\n while (++i < n) {\n angle = angleOffset + lengths[i] * k;\n circle.push([\n centroid[0] + r * Math.cos(angle),\n centroid[1] + r * Math.sin(angle)\n ]);\n };\n\n // Might add an ability to specify the w, h, x and y in the future.\n return { coords: circle, translate: 'translate(0, 0)' };\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"prepareCoords = (d, i, type) => {\n const coords = d.geometry.coordinates[0];\n if (type === 'geo') {\n return { coords, translate: 'translate(0, 0)' };\n } else if (type === 'circle') {\n return circle(coords, d.x, d.y, d.radius);\n } else if (type === 'rectangle') {\n return rectangle(coords);\n } else if (type === 'bar') {\n return rectangle(\n coords, {\n width: barWidth(d.value),\n height: (y.range()[1] - y.range()[0]) / data.length - 5,\n x: margin.left,\n y: y(i)\n }\n );\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"morphStates = (states, type) => {\n states.each(function(d, i) {\n const { coords, translate } = prepareCoords(d, i, type);\n d3.select(this)\n .transition()\n .duration(1250)\n .delay(i * delay)\n .attr('d', path(coords))\n .attr('transform', translate)\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"data = d3.csvParse(await FileAttachment(\"stateCounts@5.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"coordsData = await FileAttachment(\"stateShapesOrdered@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1011,"value":"baseCoords = prepareInitialCoords(coordsData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"coordsData2 = FileAttachment(\"stateShapesOrdered.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"coordsData3 = geo.aggregate(coords, { id: \"STE_NAME21\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"coordsData4 = geo.filter(coords, (d) => d.area > 1505853526)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"coordsData5 = geo.properties.head({\n x: coords, // a geojson\n field: \"area\", // a colname (string)\n nb: 10 // default:10. Number of features to get. \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"filteredData = geo.properties.select({\n x: baseCoords, // a geojson\n expression: \"radius >= 0.6\" // an expression (string)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require('d3@6', 'd3-polygon')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1252,"value":"geo = require(\"geotoolbox@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"