30:T695,svg = { const svg = DOM.svg(w, h); // Add legend const legendWidth = Math.max(120, width / 7); d3.select(svg) .append("g") .attr("transform", `translate(${w - legendWidth - padding}, ${padding})`) .append(() => legend({ color: d3.scaleOrdinal(colorDomains, colorRange), title: "Number of parks", width: legendWidth, tickSize: 0 }) ); if (debug) { // Draw city boundary d3.select(svg) .selectAll(".boundary") .data(bbmpGeo.features) .join("path") .attr("class", "boundary") .attr("d", pathGenerator) .attr("fill", palette.soil["100"]) .attr("stroke", palette.soil["300"]); } // Draw hexbins d3.select(svg) .append("g") .selectAll("path") .data(hex.grid.layout) .join("path") .attr("d", hex.hexagon()) .attr("title", (d) => `${d.datapoints} parks`) .attr("transform", (d) => `translate(${d.x} ${d.y})`) .attr("fill", (d) => color(getColorDomain(d.datapoints))) .attr("stroke-width", 0.5) .attr("stroke", (d) => { if (drawBorder) { return d3.lab(color(getColorDomain(d.datapoints))).brighter(); } return color(getColorDomain(d.datapoints)); }); if (debug) { // Draw centroids d3.select(svg) .append("g") .attr("class", "centroid") .selectAll("circle") .data(parksData) .join("circle") .attr("title", (d) => d.name) .attr("transform", (d) => { return `translate(${projection([d.lon, d.lat]).join(",")})`; }) .attr("r", 2) .attr("fill", "rgba(255,0,255,0.85)") .attr("stroke", "none"); } return svg; }31:[{"id":"764f7bcc2269e58e5510fb40557c9e81db29efb765e4b9739abf22e90438f8c558d836bc70746f6071c72ef23ae9bb2ea0213d7be05a39f1330ea0d79bb9037a","href":"https://static.observableusercontent.com/files/764f7bcc2269e58e5510fb40557c9e81db29efb765e4b9739abf22e90438f8c558d836bc70746f6071c72ef23ae9bb2ea0213d7be05a39f1330ea0d79bb9037a","name":"bbmp.geojson","type":"application/geo+json","lastModified":1654745951885.396,"size":62983},{"id":"9a9f43775148c4d514ebf02f8c5c1c9a761faafb51cb8bbdc4fe1b8007e71380412a0732d4e85ac3d309a08a108a29090e1fc657857f9d9d93102bdaa5fec509","href":"https://static.observableusercontent.com/files/9a9f43775148c4d514ebf02f8c5c1c9a761faafb51cb8bbdc4fe1b8007e71380412a0732d4e85ac3d309a08a108a29090e1fc657857f9d9d93102bdaa5fec509","name":"parks-data-centroid-area.geojson","type":"application/geo+json","lastModified":1654745951885.396,"size":2063571}] 2e:{"title":"Parks in Bangalore","cells":[{"id":0,"value":"# Parks in Bangalore\n## Playing with Hexgrid maps","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof hexagonRadius = Inputs.range([0.25, 3], {\n label: md`**Hexgon radius**
(in km)`,\n step: 0.125,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"viewof drawBorder = Inputs.toggle({ label: \"Draw border\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"viewof paddingUV = Inputs.range([0, 1], {\n label: \"Padding\",\n step: 0.125,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"## Credits\n\nThe data is from [OpenStreetMaps](https://www.openstreetmap.org/) (OSM). The shapefile, and features tagged with `leisure=park` and `leisure=playground` are exported from OSM using [QGIS](https://www.qgis.org/).\n\n|Tag|Feature count|\n|:|:|\n|`leisure=park`|${countByKeyValue(parksData, 'leisure', 'park')}|\n|`leisure=playground`|${countByKeyValue(parksData, 'leisure', 'playground')}|\n\nThe plot is made with [D3.js](https://d3js.org/) and [d3-hexgrid](https://github.com/larsvers/d3-hexgrid). Thanks [@larsvers](https://observablehq.com/@larsvers) for the [tutorials and examples](https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexgrid).","pinned":false,"hidden":false,"mode":"md"},{"id":913,"value":"## Location and land cover\n\nThe same data is plotted based on land cover of each park.","pinned":false,"hidden":false,"mode":"md"},{"id":910,"value":"html`

\n \n

${locationAndLandCover}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"padding = (paddingUV * width) / 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"projection = d3\n .geoTransverseMercator()\n .rotate([-80, 0, 0])\n .fitExtent(\n [\n [padding, padding],\n [w - padding, h - padding]\n ],\n bbmpGeo\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"projection.scale()","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"pathGenerator = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"w = Math.min(640, width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"h = w","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"hex = hexgrid(parksData, [\"area\", \"name\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"hexgrid = d3hg\n .hexgrid()\n .extent([w, h])\n .geography(bbmpGeo)\n .projection(projection)\n .hexRadius(hexagonRadius, \"km\")\n .pathGenerator(pathGenerator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"color = d3.scaleOrdinal().domain(colorDomains).range(colorRange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"function getColorDomain(n) {\n if (n <= 0) return colorDomains[0];\n if (n >= 1 && n <= 5) return colorDomains[1];\n if (n >= 6 && n <= 10) return colorDomains[2];\n return colorDomains[3];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"colorDomains = [\"0\", \"1-5\", \"6-10\", \"10+\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"colorRange = [\n palette.soil[200],\n palette.greens[400],\n palette.greens[600],\n palette.greens[800]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"[getColorDomain(12), color(getColorDomain(12))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"[getColorDomain(1), color(getColorDomain(1))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"[getColorDomain(0), color(getColorDomain(0))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"palette = ({\n soil: {\n \"100\": \"#f9f7f5\",\n \"200\": \"#f0e9e2\",\n \"300\": \"#e3d4c4\",\n \"400\": \"#d3ba9d\",\n \"500\": \"#bd9d76\",\n \"600\": \"#a28155\",\n \"700\": \"#84673b\",\n \"800\": \"#675027\",\n \"900\": \"#4d3d19\"\n },\n greens: {\n \"100\": \"#eefbf1\",\n \"200\": \"#cbf6d6\",\n \"300\": \"#92edae\",\n \"400\": \"#64d691\",\n \"500\": \"#44b87b\",\n \"600\": \"#299868\",\n \"700\": \"#0f7856\",\n \"800\": \"#005a46\",\n \"900\": \"#004037\"\n }\n})\n// Generated from https://colorcolor.in/?s=eJyNkU1PwzAMhv-Lz1aUlHX9uO4CFzbBEXGwunSdSD-UpNtQ1f-OQ1d1AjFxsx0_7_sqHqAjo73XO7JUO8gHcF53XGQ4Pz01e32BXCK4M_miWvqaLs99vS130yJT60BNSm8DVL2eFMl6yBMpohhBN3vI05VIQk2ON0AohRJFjBJGdiF_Q0VSzNBaLUSMCkWaoQIES55nSkqGzfFwA2fZFY2SyfsXPY74M6eKoyWoStL_Jo1XVyaL7uZUyZ2cD-KPmO_Bj3_52By-z9SetDX0uWkbb8mxRknGaZznj-FE3vY8sbrctKa17oXOrMpBitC-dlQEl_ajcoYNvgAjSZo_","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"function countByKeyValue(arr, k, v) {\n return arr.reduce((count, obj) => {\n if (obj[k] === v) return count + 1;\n return count;\n }, 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"## GeoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"bbmpGeo = FileAttachment(\"bbmp.geojson\").json({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"parksGeo = FileAttachment(\"parks-data-centroid-area.geojson\").json({\n type: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"parksData = parksGeo.features.map((f) => {\n const [lon, lat] = f.geometry.coordinates;\n return {\n name: f.properties.name,\n area: f.properties.area_2,\n leisure: f.properties.leisure,\n lat,\n lon\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"d3hg = require(\"d3-hexgrid@0.3.0/dist/d3-hexgrid.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"import {locationAndLandCover} from \"@saneef/parks-in-bangalore-land-cover\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":928,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}