21:null 22:["$","title",null,{"children":"Try 3: Getting both the ward centroid dots and the WWTW dots on the same map | Bernelle Verster | Observable"}] 27:T70c,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) // .fitExtent( [[margin, margin], [width - margin, height - margin]], wards ) ), vl .markSquare({ fill: 'green', size: 20, opacity: 0.7 }) .data(centroids) .encode(vl.longitude().fieldQ([0]), vl.latitude().fieldQ([1])) .background('transparent'), // I did it! So it has to be in the same layer, ala https://observablehq.com/@observablehq/layers-facets-concat?collection=@observablehq/observable-for-vega-lite // So how do I get the points on the right place? 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()28:T50b,WWTW2map = vl // want to append this to capetownMapIntro // .layer( //maybe label layers .layer( vl .markSquare({ fill: 'green', size: 20, opacity: 0.7 }) .data(centroids) .encode(vl.longitude().fieldQ([0]), vl.latitude().fieldQ([1])) .background('transparent'), // I did it! So it has to be in the same layer, ala https://observablehq.com/@observablehq/layers-facets-concat?collection=@observablehq/observable-for-vega-lite // Now to get them in the right spots 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]'), // apply the field named 'latitude' to the latitude channel vl .size() .fieldQ('Maximum daily capacity') .scale({ range: [0, 1000] }) .legend(null) ) .background('transparent') .project( vl .projection('mercator') .scale(14900) .translate(-4600, -9250) ) ) // .width(600) // .height(400) .config({ view: { stroke: null } }) .render()29:[{"id":"727ab79ae20db6241e893d0e07c3c55efb13f642c66737406cf5ae9f3c46415850f655e926aa5f81cb2b3c978543ad962b0066188a30f4946369e8ad28a9260a","href":"https://static.observableusercontent.com/files/727ab79ae20db6241e893d0e07c3c55efb13f642c66737406cf5ae9f3c46415850f655e926aa5f81cb2b3c978543ad962b0066188a30f4946369e8ad28a9260a","name":"CapeTown_wards_18aug20.geojson","type":"application/geo+json","lastModified":1605097000358.324,"size":3457357},{"id":"710471a25081c3db3bdbf826309ae4950fb10be74e27c2975b321eea4ee063d00258fc1eb5f02c06038fcc7bf8d758c4b24398bd218741f887bde3c576ca17de","href":"https://static.observableusercontent.com/files/710471a25081c3db3bdbf826309ae4950fb10be74e27c2975b321eea4ee063d00258fc1eb5f02c06038fcc7bf8d758c4b24398bd218741f887bde3c576ca17de","name":"WWTW_CapeTown_15aug20@1.json","type":"application/json","lastModified":1605097000358.324,"size":4363},{"id":"e06a18e3fef963d652cdc2b9d1f88f24953aaa44e4ea3676b1c4792f2db6d39ef39b97a75d466c9201396ca99e438d30db8f14d1c2d7e55bfce6aa5bfacf5b9a","href":"https://static.observableusercontent.com/files/e06a18e3fef963d652cdc2b9d1f88f24953aaa44e4ea3676b1c4792f2db6d39ef39b97a75d466c9201396ca99e438d30db8f14d1c2d7e55bfce6aa5bfacf5b9a","name":"Cape_Town_metro_admin_level6_12aug2020.geojson","type":"application/geo+json","lastModified":1605097000358.324,"size":771302}] 25:{"id":"e299d457595f60b1","slug":"try-3-getting-both-the-ward-centroid-dots-and-the-wwtw-dots-on","title":"Try 3: Getting both the ward centroid dots and the WWTW dots on the same map","thumbnail":"bbe6ce4b172d56ee4777487041e4788c21ab097d30e5300be3d18bf7e2a709ca","access_level":"public","create_time":"$D2020-11-11T12:16:40.358Z","update_time":"$D2020-11-20T13:09:10.648Z","view_time":null,"first_public_time":"$D2020-11-11T14:12:54.402Z","has_unpublished_edits":null,"fork":{"id":"9e4f909b0eb14f59","slug":"try-2-mapping-sewage-flows-in-cape-town","title":"Try 2: Mapping sewage flows in Cape Town using svg","owner":{"id":"c541497cff836eea","login":"indiebio","name":"Bernelle Verster"}},"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"},"version":2111,"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}],"members":[{"type":"individual","id":"8554c6b5c13ab331","login":"indiebio","name":"Bernelle Verster","avatar_url":"https://avatars-next.observableusercontent.com/fedcddbb6765401599d26ba8fdfa8eb86c4b8df1e7ab2549c5df493f8c26c80b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Try 3: Getting both the ward centroid dots and the WWTW dots on the same map","cells":[{"id":0,"value":"md`# Try 3: Getting both the ward centroid dots and the WWTW dots on the same map\n(part of the previous version [Mapping sewage flows in Cape Town using svg](https://observablehq.com/@indiebio/try-2-mapping-sewage-flows-in-cape-town))`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md` To do on this notebook: \n

put location of treatment works and centroids of wards on the same map, the challenge being the one was done with svg and the other vl. and the one is in long/lat and the centroids is in svg relative. Not sure if the background to the layer simply needs to be transparent/none? How do I add a layer to the first map.
connect the ward centroid with the WWTW - first a test, then importing the json file with the correct connections
make the connectors correspond to the sizes of the flows
after that, do the whole thing using leaflet on [this notebook](https://observablehq.com/@indiebio/centroids-of-the-wards-of-cape-town-using-leaflet) so it looks less arty and more real, and it's zoomable

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`#### Appendix\nFor the code stuff, some of these are redundant, not sure what or where yet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"viewof height = number({\n value: \"600\",\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"viewof width = number({\n value: \"600\",\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2001,"value":"margin = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2020,"value":"centroidmap = {\n d3.select(centroidwardMap)\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\", \"green\");\n\n return centroids;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1501,"value":"wards = FileAttachment(\"CapeTown_wards_18aug20.geojson\").json() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"WWTWsvg = {\n const d = WWTW.features(); // need to figure out what goes in here.\n // trying to get an array of values in pixels relating to the svg size. So it's comparable to the centroid values.\n return WWTWProjection(d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2082,"value":"WWTWProjection = d3.geoIdentity().fitHeight(960, capetown) // // projection = d3.geoIdentity().fitHeight(960, object) via https://github.com/d3/d3-geo/issues/72","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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\n// capetownProjection = d3.geoMercator() .fitExtent([[10, 10], [width - 10, height - 10]], capetown)\n// projection = d3.geoMercator().fitExtent([[50,50], [width-50, height-50]], Wcities) ; via https://observablehq.com/@sfu-iat355/intro-to-leaflet-d3-interactivity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"watertest = {\n const svg = d3.select(DOM.svg(width, height)); // water is a solid rectangle underneath everything via https://observablehq.com/@awoodruff/svg-cartography-nacis-2019-part-one\n const waterLayer = svg.append('g');\n waterLayer\n .append('rect')\n .attr('width', width)\n .attr('height', height)\n .style('fill', 'blue')\n .attr('fill', '#ffa500') //actually to be used for WWTW\n .attr('size', 50)\n .attr('opacity', 0.7);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W29","stdlib":"1"}} 26:"$25:body"