31:T5e3,md` ### Why draw polygons using postcode boundaries? At first I thought of laying out a grid of Lat-Lon points that covered the Den Haag area and then calculate the journey time from each point to the school, interpolating the results to provide a Heatmap overlay in [the notebook that was the inspiration for this one](https://observablehq.com/@tmcw/leaflet). This may still be a more efficient approach. But I'm a sucker for geographical postcode data and I found that shapefiles for the boundaries of all Dutch postcodes are available. It struck me that it would be relatively straight-forward, even if a bit inefficient, to construct a heatmap by drawing the postcode polygons and colouring them by journey time. This would have the advantage of more explicitly aligning the colours to physical boundaries on the map, i.e. streets. The postcode boundaries are available in [this massive file](http://www.example.com) most of which I don't need. I pruned and converted to GeoJSON using lists of Dutch postcode areas and python scripts. But there were still thousands of postcodes. As I had in mind to use the Distance Matrix API this was a problem as it is not a free service (although I am making use of a trial period). So I built [a tool](observablehq.com) to allow me to extract the postcodes I needed visually with a simple point and click. The postcode boundaries are loaded with the Distance Matrix results attached in a later cell. Below is the code that adds these polygons to the map. `32:T514,md` ### Why use Google Distance Matrix API? Having commuted by cycle in a number of cities I have found that actual travel times can vary significantly from a naive estimate based on 'as-the-crow-flies' distances. Dreams of quick rides can be scuppered by having to find a route around a railway or major road. Moving to a new city seems like a good opportunity to test this hunch. This lead me to use a journey time estimator - in this case the Google Distance Matrix service - to calculate journey times and distances. The Distance Matrix API requires two points as input: start and destination positions. Our destination is always the school, but I needed a point representing each postcode. The centroid of each postcode polygon would probably have been good enough, but I noticed that in addition to boundary data, the postcode shapefiles contained the locations of the buildings within each postcode. An average of these locations seemed quite a good way to give a 'centre of gravity' for that postcode which could act as the starting point of our Journey. This manipulation, and querying of the Distance Matrix API was done using separate python scripts [link](http://www.example.com). The resulting topojson file defining the postcode boundaries and journey times is loaded here. `33:[{"id":"ccc73693bd28a0e574defe8fe3d0a087f19f9405122fa15c70dcf8e39bd916293de4c48e3556be74625f26081be69dbaeafa154dd129a57e6b97a84d4b81ed09","href":"https://static.observableusercontent.com/files/ccc73693bd28a0e574defe8fe3d0a087f19f9405122fa15c70dcf8e39bd916293de4c48e3556be74625f26081be69dbaeafa154dd129a57e6b97a84d4b81ed09","name":"den_haag_PC6_wdurdis.json","type":"application/json","lastModified":1580896228282.558,"size":3516790}] 2f:{"title":"Mapping cycling times to BSN Vlaskamp","cells":[{"id":101,"value":"md`# Mapping cycling times to BSN Vlaskamp`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"denHaagMap = {\n let s = `width:${width}px;height:${width/1.6}px;position: relative;`\n let container = html`

`\n \n yield container;\n \n // Now we create a map object and add a layer to it.\n let map = L.map('map').setView([BSN_locations.Vlaskamp[1],BSN_locations.Vlaskamp[0]], 13);\n\n \n TileLayer.addTo(map);\n HeatLayer.addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2001,"value":"md`_**Figure 1:** A heatmap overlaid on a leafletjs map to explore cycling times to BSN Vlaskamp campus. The heatmap is constructed by drawing a polygon for each postcode boundary and shading that area according to journey durations obtained from Google Distance Matrix API._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"md ` ## How the chart was made\n\nIn summary:\n\n* Display the basemap is via leaflet.js with tiles from OpenStreetMap\n* Create a 'heatmap' by drawing a polygon marking the boundaries of each postcode.\n* Colour the polygons to indicate typical journey time from a house in that postcode using the Google Distance Matrix API\n\n\n### Why leaflet?\n\nIn part the chart is a tool for finding somewhere to live so it's important to me to be able to see the streets and other features of the city as reference points. I experimented with OpenCycleMap tiles that show cycle routes but they proved to be very busy visually. For a while I adopted the default OpenStreetMap layers but the colours distorted the colour of the transparent heatmap overlay. For example, in areas of green parkland or blue water. In the current version I have adopted the monochrome Stamen Toner base layer.\n\nFor convenience and to fix an issue with refreshing the map tiles I wrapped the tile layer definition in a function that is called from the map cell.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"TileLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {\n\tattribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',\n\tsubdomains: 'abcd',\n\tminZoom: 0,\n\tmaxZoom: 20,\n\text: 'png'\n});\n \n\n// if (s==='OpenStreetMap') {\n// return L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n// \t maxZoom: 19,\n// \t attribution: '© OpenStreetMap contributors'\n// });\n// } \n \n// if (s==='Stamen') {\n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"md`I'll centre the map on the school campus:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"BSN_locations = ({ 'Vlaskamp' : [4.3485465,52.0884314] })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"HeatLayer = L.geoJson(PC6, {\n style: function (feature) {\n return {\n stroke: true, \n weight: 1,\n color: '#555555',\n opacity: 0.5,\n fillColor: colorDuration(feature.properties.d),\n fillOpacity: 0.7}\n }\n }).bindTooltip(function (layer) {\n return ( \"

\"+layer.feature.properties.pcd+\n \"

\"+(layer.feature.properties.d/60).toFixed().toString()+' mins

')\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"topojsondata = FileAttachment(\"den_haag_PC6_wdurdis.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"PC6 = topojson.feature(topojsondata,topojsondata.objects.den_haag_PC6_wdurdis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1330,"value":"md `### How is the heatmap coloured?\n\nI realized that I was primarily interested in only a small range of all the journey times, and that I wanted my heatmap to convey differences within this range. Therefore I limited the domain of the color scale to between 5 and 35 minutes. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2216,"value":"C_DOM = [5,35]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1278,"value":"colorThresholds = [0,5,10,15,20,25,30,35];","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"colorDuration = function (d, scheme=d3.interpolateViridis, reversed=true) {\n // define domain of interest\n let domain = [];\n if(reversed) { domain = [C_DOM[1]*60,C_DOM[0]*60]; } else { domain = [C_DOM[0]*60,C_DOM[1]*60] }\n var colorScale = d3.scaleSequential(scheme).domain(domain)\n return colorScale(d);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"md` The array \\`colorThresholds\\` defines the boundaries for the map key `","pinned":false,"hidden":false,"mode":"ojs"},{"id":2226,"value":"md`## Reflections\n\nPerhaps this ends up being pretty rather than useful because of the difficulty in percieving small differences in a continuous colour scheme. A next iteration might look at merging the polygons with similae travel times to form a contour map.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md`## Appendix \n### Required external code, libraries etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"d3=require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"topojson = require('topojson');","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"md`### Setting up styling and HTML elements for the map and key\n\nThanks to @pbogden for the example of how to make the [legend](https://observablehq.com/@pbogden/reusable-legend).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"html`\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"sidepanel = {\n denHaagMap;\n\n let values = colorThresholds;\n \n let n = values.length;\n let rows = values.map((d, i) => ({ \n color: colorDuration(60*d),\n label: d + (i == n - 1 ? \"'+\" : \"'–\" + values[i+1] + \"'\")\n }));\n \n let template = d3.select('#sidepanel table')\n \n let legend = template.selectAll('tr')\n .data(rows)\n \n legend.exit().remove();\n \n legend.enter()\n .append(function() { return row.cloneNode(true) })\n .merge(legend)\n .each(function(d) { \n d3.select(this).select('.swatch').style('background', d.color)\n d3.select(this).select('.legend-label').html(d.label) \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"row = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"legend_styles = html`\n\n\n ${ row }\n

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}