2c:null 2d:["$","title",null,{"children":"Mapping sewage flows in Cape Town | Bernelle Verster | Observable"}] 32:[{"id":"b9e9bbac4f4f0d93887052228e62f9b724127051987b1f76320c3f396e15d67314c80558fc1c5cb1bcb27df2bfc9ed12715d2653a8ee6779c5db8e7344b0d7c0","href":"https://static.observableusercontent.com/files/b9e9bbac4f4f0d93887052228e62f9b724127051987b1f76320c3f396e15d67314c80558fc1c5cb1bcb27df2bfc9ed12715d2653a8ee6779c5db8e7344b0d7c0","name":"Cape_Town_overpass_OSM_5aug20.geojson","type":"application/geo+json","lastModified":1596618434163.609,"size":4885944}] 30:{"id":"2192569e155d322f","slug":"mapping-sewage-flows-in-cape-town","title":"Mapping sewage flows in Cape Town","thumbnail":null,"access_level":"public","create_time":"$D2020-08-04T10:30:53.551Z","update_time":"$D2020-08-05T13:57:04.718Z","view_time":null,"first_public_time":"$D2020-08-05T13:56:00.798Z","has_unpublished_edits":null,"fork":false,"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":158,"publish_version":158,"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":"Mapping sewage flows in Cape Town","cells":[{"id":0,"value":"md`# Mapping sewage flows in Cape Town\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.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md` To do: \n

import OpenStreetMap
make tiles 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

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

Boundaries - Ideally to only map until the municipal boundary boundary:administrative,< boundary:postal_code/li>\n
Water, both natural and man-made, waterway, natural:water man_made:water
Topography (contour lines)
What else makes it look nice as a backdrop?

Land use and main roads may work as contextual cues
Populated settlements possibly, especially if the suburb level waste sources needs context

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"viewof width = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof height = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof margin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"CapeTown = FileAttachment(\"Cape_Town_overpass_OSM_5aug20.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"street = CapeTown.features.filter(\n street => street.properties.name == \"Verwood\"\n)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"lonLatPoint = [18.516, -33.955] // Athlone WWTW","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"projectedPoint = projection(lonLatPoint) // the geographic coordinates are transformed into map coordinates","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"pointMap = {\n // create SVG element\n let svg = d3.select(DOM.svg(width, height));\n\n // construct the element\n svg\n .append('circle')\n .attr('cx', projectedPoint[0])\n .attr('cy', projectedPoint[1])\n .attr('r', 2.5)\n .attr('fill', '#000000')\n .attr('stroke', 'none');\n\n svg\n .append('text')\n .attr('x', projectedPoint[0] + 6)\n .attr('y', projectedPoint[1])\n .attr('dy', 2)\n .attr('font-size', '9')\n .text(lonLatPoint);\n\n // pass to Observable to represent this block\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md` # Appendix\nfor the code stuff.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"projection = d3\n .geoMercator()\n .fitExtent([[margin, margin], [width - margin, height - margin]], CapeTown)\n// top left bottom right geometry","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"pathGenerator = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`#### Custom CSS:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"import { helpers } from \"@floledermann/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"helpers.defaultCSS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"