43:["$","title",null,{"children":"Try 2: Mapping sewage flows in Cape Town using svg | Bernelle Verster | Observable"}] 4b:T510,WWTWmap = vl .layer( vl .markGeoshape({ stroke: '#grey', strokeWidth: 0.4, fill: 'none' }) .data(vl.json(wards.features)) //.data(vl.topojson(world).feature("common_name")) .encode( vl .color() .fieldN('properties.name') .scale({ opacity: 0.900 }) .legend(null), vl.tooltip("properties.name") ) .project( vl .projection('mercator') .scale(14900) .translate(-4600, -9250) ), vl .markSquare({ fill: '#ffa500', size: 50, opacity: 0.7 }) .data(WWTW) .encode( vl.tooltip([vl.fieldN('Name'), vl.fieldQ('Maximum daily capacity')]), vl.longitude().fieldQ('Location[1]'), // apply the field named 'longitude' to the longitude channel vl.latitude().fieldQ('Location[0]'), vl .size() .fieldQ('Maximum daily capacity') .scale({ range: [0, 1000] }) .legend(null) // apply the field named 'latitude' to the latitude channel ) .project( vl .projection('mercator') .scale(14900) .translate(-4600, -9250) ) ) // .width(600) // .height(400) .config({ view: { stroke: null } }) .render()4c:T525,capetownMapDynamic = { let svg = d3.select(DOM.svg(width, height)); svg .selectAll('path') .data(capetown.features) // entering any other name in here breaks the code, says ...enter is not a function. Why?? capetown has the features, while the others don't. https://macwright.com/2015/03/23/geojson-second-bite .enter() .append('path') .attr('d', capetownPathGenerator) .attr('fill', '#e6e6e6') .attr('stroke', '#999999') // use a callback function to calculate the stroke width based on the 'w' property .attr('stroke-width', function(d) { // access the 'w' property and use our scale to calculate the correct width return widthScale(d.properties.admin_level); }); d3.selectAll(wards) // ('circle') // .data(wards) // .enter() // .append('circle') .attr('transform', function(d) { return 'translate(' + 'path'.centroid(d) + ')'; }) .attr('r', 10); svg .append("path") .attr('e', delaunay.renderPoints(null, 2)) .attr('size', 900); // trying to draw the centroid points const points = vl .markCircle({ size: 90 }) .data(WWTW) .encode( vl.latitude().fieldQ('Location[1]'), vl.longitude().fieldQ('Location[0]') // vl.tooltip().fieldN('iata') ); return svg.node(); }4d:[{"id":"e54381c5435f01a63d28f0bae0124eaaa5992e3938878a4c65a3b1206e043378765eba72cdf9f4dd330fb49c1d8dca36422c2bb27141bea11dde778ab1883093","href":"https://static.observableusercontent.com/files/e54381c5435f01a63d28f0bae0124eaaa5992e3938878a4c65a3b1206e043378765eba72cdf9f4dd330fb49c1d8dca36422c2bb27141bea11dde778ab1883093","name":"capetown-wards@1.geojson","type":"application/geo+json","lastModified":1784034067560.487,"size":212784},{"id":"e54381c5435f01a63d28f0bae0124eaaa5992e3938878a4c65a3b1206e043378765eba72cdf9f4dd330fb49c1d8dca36422c2bb27141bea11dde778ab1883093","href":"https://static.observableusercontent.com/files/e54381c5435f01a63d28f0bae0124eaaa5992e3938878a4c65a3b1206e043378765eba72cdf9f4dd330fb49c1d8dca36422c2bb27141bea11dde778ab1883093","name":"capetown-wards.geojson","type":"application/geo+json","lastModified":1784034037543.147,"size":212784},{"id":"710471a25081c3db3bdbf826309ae4950fb10be74e27c2975b321eea4ee063d00258fc1eb5f02c06038fcc7bf8d758c4b24398bd218741f887bde3c576ca17de","href":"https://static.observableusercontent.com/files/710471a25081c3db3bdbf826309ae4950fb10be74e27c2975b321eea4ee063d00258fc1eb5f02c06038fcc7bf8d758c4b24398bd218741f887bde3c576ca17de","name":"WWTW_CapeTown_15aug20@1.json","type":"application/json","lastModified":1597666163792.858,"size":4363},{"id":"ab4c24cf96dcd6a3fc1819497063aa2cc8c93da4d9b09041abda5b60e6151ed61ab5f81cc84a00550185cff96767b5486ac83c3239b5e671e549cb4f682b35af","href":"https://static.observableusercontent.com/files/ab4c24cf96dcd6a3fc1819497063aa2cc8c93da4d9b09041abda5b60e6151ed61ab5f81cc84a00550185cff96767b5486ac83c3239b5e671e549cb4f682b35af","name":"CapeTown_ward_39_coords_only_test_2sept20.geojson","type":"application/geo+json","lastModified":1599211743590.205,"size":424},{"id":"e06a18e3fef963d652cdc2b9d1f88f24953aaa44e4ea3676b1c4792f2db6d39ef39b97a75d466c9201396ca99e438d30db8f14d1c2d7e55bfce6aa5bfacf5b9a","href":"https://static.observableusercontent.com/files/e06a18e3fef963d652cdc2b9d1f88f24953aaa44e4ea3676b1c4792f2db6d39ef39b97a75d466c9201396ca99e438d30db8f14d1c2d7e55bfce6aa5bfacf5b9a","name":"Cape_Town_metro_admin_level6_12aug2020.geojson","type":"application/geo+json","lastModified":1597255136105.9,"size":771302},{"id":"727ab79ae20db6241e893d0e07c3c55efb13f642c66737406cf5ae9f3c46415850f655e926aa5f81cb2b3c978543ad962b0066188a30f4946369e8ad28a9260a","href":"https://static.observableusercontent.com/files/727ab79ae20db6241e893d0e07c3c55efb13f642c66737406cf5ae9f3c46415850f655e926aa5f81cb2b3c978543ad962b0066188a30f4946369e8ad28a9260a","name":"CapeTown_wards_18aug20.geojson","type":"application/geo+json","lastModified":1599071939487.325,"size":3457357}] 47:{"id":"9e4f909b0eb14f59","slug":"try-2-mapping-sewage-flows-in-cape-town","title":"Try 2: Mapping sewage flows in Cape Town using svg","thumbnail":"71114bf3253e297daf15bc9aeb8132d59b7f726222e094899f058156e8a5a520","access_level":"public","create_time":"$D2020-08-05T14:00:44.814Z","update_time":"$D2026-07-14T13:01:07.072Z","view_time":null,"first_public_time":"$D2020-08-06T06:39:10.217Z","has_unpublished_edits":null,"fork":{"id":"de0fa306027de30f","slug":"drawing-maps-from-geodata-in-d3-condensed-version","title":"Drawing maps from geodata in D3 *[condensed version]*","owner":{"id":"5952e5f3991fd83c","login":"floledermann","name":"Florian Ledermann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":"starter_2024","bio":"Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.","followed_by_you":false,"follows_you":false},"version":1792,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"bio":"Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[{"id":"e45659695b987362","reply_to_id":null,"content":"This cell is the closest to working so far.","create_time":"$D2020-11-05T09:16:23.653Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Try 2: Mapping sewage flows in Cape Town using svg","cells":[{"id":0,"value":"md`# Try 2: Mapping sewage flows in Cape Town using svg\nIn this project I want to show the flows of nutrients, as more commonly understood as sewage (black and greywater) from individual households to treatment plants and from the treatment plans discharging to the receiving waterbodies. I have to make assumptions on the amount of leakages and the treatment efficiencies, or compliance, of the treatment works, using data that is (by law) available to the public, or that can be inferred by a set of reasonable assumptions. OpenStreetMaps is used to visualise the nutrient flows across the city graphically illustrating the geographical extent of the problem. \n\nThen I would like to impose several scenarios ranging from 100% compliance and ecological management to worst case considerations and see what amounts of nutrients end up in the sea.` // contour lines cape town https://odp.capetown.gov.za/datasets/5m-contours/geoservice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md` To do: \n

import OpenStreetMap (geojson is better than shapefiles, because [here](http://switchfromshapefile.org/))
make ~~tiles~~ sections clickable for more info pop-ups?
else make selections clickable, selections selectable. perhaps using brushes

location of treatment works
clusters of representative dots showing origin of sewage (maybe a dot per suburb)
make dot a size and/or colour representation of volume/concentration of nutrients

NEXT JOB: connect centroids with WWTW (get those on the pic again ala the [WWTW on a map](https://observablehq.com/@indiebio/wwtw-dots-on-a-map) then maybe animate flows in groups
be able to select different streams - N,P, water/total volume
possibly be able to take urine out, show the impact

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"capetownMapIntro = {\n let svg = d3.select(DOM.svg(width, height));\n\n svg\n .selectAll('path')\n .data(wards.features)\n .enter()\n .append('path')\n .attr('d', capetownPathGenerator)\n .attr('fill', '#e6e6e6')\n .attr('stroke', '#999999')\n .attr('stroke-width', 1);\n\n const points2 = vl\n .markSquare({ size: 90 })\n .data(WWTW)\n .encode(\n vl.latitude().fieldQ('Location[1]'),\n vl.longitude().fieldQ('Location[0]')\n\n // vl.tooltip().fieldN('iata')\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"md`Can I import the WWTW squares, done in vega lite from https://observablehq.com/@indiebio/wwtw-dots-on-a-map? Maybe trying to do the whole thing in either svg or vl or Leaflet is part of the problem`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"import { capetownmap } from \"@indiebio/wwtw-dots-on-a-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1767,"value":"centroids = wards.features.map(d => {\n const c = d3.geoCentroid(d);\n // quick fix: some of the wards have coordinates \"reversed\" and the centroid is sent to the antipode\n // it would be better to \"rewind\" those polygons with, for example, https://github.com/mapbox/geojson-rewind\n if (c[0] < 0) (c[0] += 180), (c[1] *= -1);\n\n return capetownProjection(c);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"centroidmap = {\n d3.select(capetownMapIntro)\n .append(\"g\")\n .classed(\"centroids\", true)\n .selectAll(\"square\")\n .data(centroids)\n .join(\"circle\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", NODE.MIN_RADIUS)\n .attr(\"opacity\", \"0.7\")\n .attr(\"fill\", \"red\");\n\n return centroids;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1705,"value":"NODE = ({ MIN_RADIUS: 2.5, MAX_RADIUS: 20, PADDING: 2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"wardcentroid = d3.selectAll(\"wards.features\").each(function(d, i) {\n // .geometry\n var centroid = path.d3.geoCentroid(d);\n alert('Centroid at: ' + centroid[0] + ', ' + centroid[1]);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":" var features = topojson.feature(world, world.objects.countries).features;\n var centroids = features.map(function (feature){\n return path.centroid(feature);\n });\n\n g.selectAll(\".centroid\").data(centroids)\n .enter().append(\"circle\")\n .attr(\"class\", \"centroid\")\n .attr(\"fill\", fill)\n .attr(\"stroke\", stroke)\n .attr(\"stroke-width\", strokeWidth)\n .attr(\"r\", radius)\n .attr(\"cx\", function (d){ return d[0]; })\n .attr(\"cy\", function (d){ return d[1]; });\n// https://bl.ocks.org/curran/55d327542393530662c3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"wardscentroid = d3.selectAll(\"wards.features.geometry\").each(function(d, i) {\n var centroid = path.centroid(d);\n alert('Centroid at: ' + centroid[0] + ', ' + centroid[1]);\n}) // via https://dillieodigital.wordpress.com/2013/02/13/quick-tip-getting-the-centroid-of-an-individual-svg-path-selection-in-d3/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"// let svg = d3.select(wards).append('svg'); // via https://stackoverflow.com/questions/12068510/calculate-centroid-d3\nmap = {\n const svg = d3.create(\"svg\", [width, height]);\n const g = svg.append(\"g\");\n\n var wardcoord = wards.features.geometry; //(wards).features; // world.objects.countries).features guessing at a potential structure of your file\n\n g.append(\"g\")\n .attr(\"fill\", \"#f16e1a\")\n .attr(\"fill-opacity\", 0.5)\n .attr(\"stroke\", \"rgba(255, 255, 255, 0.5)\")\n .attr(\"stroke-width\", 1)\n .selectAll(\"circle\")\n .data(wardcoord) // (features.sort((a, b) => data.get(b.properties.ID_1) - data.get(a.properties.ID_1)))\n .join(\"circle\")\n .attr(\"transform\", d => `translate(${path.centroid(d)})`) // via https://observablehq.com/@kislakiruben/covid-19-infection-map-for-romania\n .attr(\"r\", 1000); //d => radius(data.get(d.properties.ID_1)));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"path = d3.geoPath().projection('mercator')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"projection = d3\n .geoAzimuthalEqualArea()\n .scale(14900)\n .translate(-4600, -9200)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"viewof height = number({\n value: \"400\",\n min: \"120\",\n max: \"800\",\n step: \"20\",\n style: \"width: 5em\",\n title: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"viewof width = number({\n value: \"400\",\n min: \"120\",\n max: \"800\",\n step: \"20\",\n style: \"width: 5em\",\n title: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"md`**Current issues:** I got Cape Town to how I wanted it but it's probably not the right thing to include it all, need to zoom in to where the sewage is. Perhaps an intro animation :) Next step is to load a circle with the WWTW (wastewater treatment works), to look somewhat like [this](https://metabolismofcities.org/cities/cape-town/infrastructure/wastewater-treatment-plants/). After that need to show in some way where the flows come from, perhaps per ward. Current idea is to animate what a SFD (Shit Flow Diagram) would contain, and then animate the data to become the SFD, like [this example](https://observablehq.com/@floledermann/transitions-from-maps-to-diagrams-part-2).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"html`

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`#### Appendix\nFor the code stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"capetown = FileAttachment(\n \"Cape_Town_metro_admin_level6_12aug2020.geojson\"\n).json() // json = FileAttachment(\"example.json\").json() https://observablehq.com/@observablehq/file-attachments json.hello.world (where hello and world are nested objects) FileAttachment(\"Cape_Town_boundaries_OSM_6aug20.geojson\") FileAttachment( \"Cape_Town_metro_admin_level6_12aug2020.geojson\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"WWTW = FileAttachment(\"WWTW_CapeTown_15aug20@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"wards = FileAttachment(\"capetown-wards@1.geojson\").json() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"wardtest = FileAttachment(\"CapeTown_ward_39_coords_only_test_2sept20@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"simpleward = FileAttachment(\"CapeTown_ward_39_coords_only_test_2sept20.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"delaunay = d3.Delaunay.from(simpleward) // via https://observablehq.com/@d3/voronoi-labels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"polygonsWithCentroids = wardtest.geometry.coordinates\n .map(coordinates => ({\n type: 'Feature',\n properties: {\n centroid: d3.geoPath().centroid({\n type: 'Polygon',\n coordinates\n })\n },\n geometry: {\n type: 'Polygon',\n coordinates\n }\n }))\n .filter(f => d3.geoPath().area(f) > 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"pathGenerator = d3.geoPath().projection(capetownProjection) // was projection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"mapPath = pathGenerator(capetown)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"capetownProjection = d3\n .geoIdentity()\n .reflectY(true)\n .fitHeight(height, capetown)\n// .fitExtent([[margin, margin], [width - margin, height - margin]], wards) // geometry https://developer.here.com/documentation/studio/map_customization_suite_hlp/dev_guide/topics/geojson-basics.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"capetownPathGenerator = d3.geoPath().projection(capetownProjection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"widthScale = d3\n .scaleLinear()\n .domain([0, 12]) // input values will be between 0 and 5\n .range([0.3, 4]) // output values should be between 0.3 (for the lowest input) and 4 (for the highest)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require('d3@6', 'd3-geo@1', \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"style = html`\n[CSS style declaration]\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"import { number } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"import { vl } from '@vega/vega-lite-api' // https://observablehq.com/@uwdata/cartographic-visualization","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"vl.topojson(capetown).feature('') // removed 'countries'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"md`# Stuff I need to add to the learning bookmark notebook. \nhttps://macwright.com/2013/07/26/geojsonio.html`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null