31:Taca,viewof antennaMap = { const node = DOM.element("div"); const container = d3.select(node); const canvas = container .append("canvas") .style("width", `${width}px`) .style("height", `${height}px`) .attr("width", width * dpi) .attr("height", height * dpi) .on("mousemove", mousemoved); const svg = container .append("svg") .style("position", "absolute") .style("pointer-events", "none") .style("top", 0) .style("left", 0) .attr("width", width) .attr("height", height); svg.append("path").attr("fill", "none").attr("stroke", "black"); const ctx = canvas.node().getContext("2d"); ctx.setTransform(dpi, 0, 0, dpi, 0, 0); ctx.clearRect(0, 0, width, height); const path = d3.geoPath(projection).context(ctx); const svgPath = d3.geoPath(projection); // create our Flatbush index const fbIndex = new Flatbush(voronoiCellsFeatures.length); ctx.lineWidth = 0.5; // loop over every municipality for (const municipality of gemeentes) { // paint municipality ctx.beginPath(); ctx.strokeStyle = "#444"; path(municipality); ctx.stroke(); } for (const antenna of filteredData) { ctx.beginPath(); path.pointRadius(0.5)(antenna); ctx.stroke(); ctx.fill(); } for (const cell of voronoiCellsFeatures) { // this finds the bounding box of each feature // we need to pass this to Flatbush const bounds = path.bounds(cell); // and now, add each feature to our index fbIndex.add( Math.floor(bounds[0][0]), Math.floor(bounds[0][1]), Math.ceil(bounds[1][0]), Math.ceil(bounds[1][1]) ); // paint voronoi cell ctx.beginPath(); ctx.lineWidth = 0.2; ctx.strokeStyle = "coral"; path(cell); ctx.stroke(); } // we need to do this once we have finished adding features fbIndex.finish(); // paint map borders ctx.lineWidth = 1; ctx.beginPath(); path(border); ctx.strokeStyle = "black"; ctx.stroke(); function mousemoved(e) { const [x, y] = d3.pointer(e); // search for our feature const idx = fbIndex.search(x, y, x, y); // reset hover styles canvas.style("cursor", null); svg.select("path").attr("d", null); // return if not found! if (idx.length === 0) return; // get our feature // we can use this data for a tooltip later, etc const selectedCell = voronoiCellsFeatures[idx[0]]; node.value = { ...selectedCell.properties.site.properties }; node.dispatchEvent(new CustomEvent("input", { bubbles: true })); canvas.style("cursor", "pointer"); svg .select("path") .datum(selectedCell) .attr("fill", "grey") .attr("opacity", 0.8) .attr("d", svgPath); } return node; }32:[{"id":"dfb43380c874f2932d97d230b29cd7566826eab1dbdca4273d9aaf2df99fbc944248c7ab7f5c152c32a9dc8d7766a23cd2f87f0321ead2aef30038375ac834ea","href":"https://static.observableusercontent.com/files/dfb43380c874f2932d97d230b29cd7566826eab1dbdca4273d9aaf2df99fbc944248c7ab7f5c152c32a9dc8d7766a23cd2f87f0321ead2aef30038375ac834ea","name":"antenne-register.csv","type":"text/csv","lastModified":1616514003302.276,"size":3983344},{"id":"a58002762adeffd13d9470572d57dd3beea830fdfc5eaf4459f9c1687ca266f5e9b35d4aefac9ec798f97656c5ae847b8ae7049404220222a5c3e8346baa07c7","href":"https://static.observableusercontent.com/files/a58002762adeffd13d9470572d57dd3beea830fdfc5eaf4459f9c1687ca266f5e9b35d4aefac9ec798f97656c5ae847b8ae7049404220222a5c3e8346baa07c7","name":"gemeente_2021.json","type":"application/json","lastModified":1616514003302.276,"size":230033}] 2f:{"title":"Voronoi Map of Cell Antennas in the Netherlands","cells":[{"id":0,"value":"# Voronoi Map of Cell Antennas in the Netherlands\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":739,"value":"It's called *cell phone* because the mobile phone network is *cellular*. This map shows all the antenna installations and the cellular network in the Netherlands with a transmission power greater than 10 decibelwatt and their [geo-Voronoi cell](https://observablehq.com/@neocartocnrs/delaunay-voronoi) ([d3-geo-voronoi](https://github.com/Fil/d3-geo-voronoi)). Select an antenna type to filter.","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"viewof antennaType = Select([\"All\"].concat(antennaTypes), {\n label: \"Antenna Type\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"html`\n

Antenna info

\n \n\n\n \n \n\n\n \n\n\n\n \n\n\n\n \n\n\n\n

Gemeente	${antennaMap.municipality === \"NULL\" ? \"–\" : antennaMap.municipality}
Types	${listFormatter.format(antennaMap.types)}
Height	${antennaMap.height} m
Sitenumber	${antennaMap.sitenr}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":750,"value":"## Credits \n\n### Notebooks\n* [Using Flatbush for faster hover events in Canvas maps](https://observablehq.com/@martgnz/using-flatbush-for-faster-canvas-maps) by Martín González\n* [US Airports Voronoi](https://observablehq.com/@mbostock/u-s-airports-voronoi) by Mike Bostock\n\n### Data\n* Antenna data from the [Antennebureau](https://www.antennebureau.nl/)\n* Map of the Netherlands from [cartomap](https://github.com/cartomap/nl)","pinned":true,"hidden":false,"mode":"md"},{"id":488,"value":"dpi = window.devicePixelRatio || 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"projection = d3\n .geoMercator()\n .fitSize([width, height], topojson.feature(nl, gemeenteObject))","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"height = Math.min(width, 805)","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"listFormatter = Intl.ListFormat\n ? new Intl.ListFormat('nl', { style: 'long', type: 'conjunction' })\n : { format: list => list.join(\", \") } // bootleg polyfill","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`## Data & data processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"voronoiCellsFeatures = d3.geoVoronoi().polygons(filteredData).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"filteredData = antennaType === \"All\"\n ? data\n : data.filter(d => d.properties.types.includes(antennaType))","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"groupedByAntennaSite = d3.rollup(antennes, siteReducer, d => d.SITENUMMER)","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"data = [...groupedByAntennaSite.values()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"siteReducer = v => ({\n type: \"Feature\",\n properties: {\n municipality: v[0].GEMEENTE,\n types: v.map(e => e.TOEPASSING),\n sitenr: v[0].SITENUMMER,\n height: Number(v[0].ANT_HOOGTE)\n },\n geometry: {\n type: \"Point\",\n coordinates: [\n toDecimalDegrees(v[0].COORDINATEN_OL),\n toDecimalDegrees(v[0].COORDINATEN_NB)\n ]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"antennaTypes = [...new Set(antennes.map(d => d.TOEPASSING))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"function toDecimalDegrees(degreeMinSecString) {\n const split = degreeMinSecString.split(/\\s/).filter(d => d.length);\n const degrees = split[0].slice(0, -1); //.replace(\"º\", \"\");\n const minutes = split[1].slice(0, -1); //.replace(\"'\", \"\");\n const seconds = split[2].slice(0, -1);\n\n const decimalDegree =\n Number(degrees) + Number(minutes / 60) + Number(seconds / 3600);\n\n return decimalDegree;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"gemeentes = topojson.feature(nl, gemeenteObject).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"border = topojson.mesh(nl, gemeenteObject, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"gemeenteObject = nl.objects.gemeente_2021 // gemeentes","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"antennes = d3.csvParse(await FileAttachment(\"antenne-register.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"nl = FileAttachment(\"gemeente_2021.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {\n // Button,\n // Checkbox,\n // Toggle,\n // Radio,\n // Range,\n Select\n // Text,\n // Textarea,\n // Search,\n // Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"versor = require(\"versor@0.0.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"Flatbush = require('flatbush@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require.alias({\n \"d3-array\": \"d3@7\",\n \"d3-delaunay\": \"d3@7\",\n \"d3-geo\": \"d3@7\"\n})(\"d3@7\", \"d3-geo-voronoi@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"import { freelanceBanner } from \"@julesblm/freelance-banner\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"html`

Todo

Weird Voronoi cells, perhaps incorrect coord data or bug in d3.geoVoronoi?
Zooming and panning map
Visualize antenna heights?
Use another projection

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