Published
Edited
Sep 29, 2022
5 stars
Also listed in…
Data notes / India
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projection = d3
.geoTransverseMercator()
.rotate([-80, 0, 0])
.fitExtent(
[
[padding, padding],
[w - padding, h - padding]
],
bbmpGeo
)
Insert cell
projection.scale()
Insert cell
pathGenerator = d3.geoPath(projection)
Insert cell
w = Math.min(640, width)
Insert cell
h = w
Insert cell
hex = hexgrid(parksData, ["area", "name"])
Insert cell
hexgrid = d3hg
.hexgrid()
.extent([w, h])
.geography(bbmpGeo)
.projection(projection)
.hexRadius(hexagonRadius, "km")
.pathGenerator(pathGenerator)
Insert cell
color = d3.scaleOrdinal().domain(colorDomains).range(colorRange)
Insert cell
function getColorDomain(n) {
if (n <= 0) return colorDomains[0];
if (n >= 1 && n <= 5) return colorDomains[1];
if (n >= 6 && n <= 10) return colorDomains[2];
return colorDomains[3];
}
Insert cell
colorDomains = ["0", "1-5", "6-10", "10+"]
Insert cell
colorRange = [
palette.soil[200],
palette.greens[400],
palette.greens[600],
palette.greens[800]
]
Insert cell
[getColorDomain(12), color(getColorDomain(12))]
Insert cell
[getColorDomain(1), color(getColorDomain(1))]
Insert cell
[getColorDomain(0), color(getColorDomain(0))]
Insert cell
palette = ({
soil: {
"100": "#f9f7f5",
"200": "#f0e9e2",
"300": "#e3d4c4",
"400": "#d3ba9d",
"500": "#bd9d76",
"600": "#a28155",
"700": "#84673b",
"800": "#675027",
"900": "#4d3d19"
},
greens: {
"100": "#eefbf1",
"200": "#cbf6d6",
"300": "#92edae",
"400": "#64d691",
"500": "#44b87b",
"600": "#299868",
"700": "#0f7856",
"800": "#005a46",
"900": "#004037"
}
})
// Generated from https://colorcolor.in/?s=eJyNkU1PwzAMhv-Lz1aUlHX9uO4CFzbBEXGwunSdSD-UpNtQ1f-OQ1d1AjFxsx0_7_sqHqAjo73XO7JUO8gHcF53XGQ4Pz01e32BXCK4M_miWvqaLs99vS130yJT60BNSm8DVL2eFMl6yBMpohhBN3vI05VIQk2ON0AohRJFjBJGdiF_Q0VSzNBaLUSMCkWaoQIES55nSkqGzfFwA2fZFY2SyfsXPY74M6eKoyWoStL_Jo1XVyaL7uZUyZ2cD-KPmO_Bj3_52By-z9SetDX0uWkbb8mxRknGaZznj-FE3vY8sbrctKa17oXOrMpBitC-dlQEl_ajcoYNvgAjSZo_
Insert cell
function countByKeyValue(arr, k, v) {
return arr.reduce((count, obj) => {
if (obj[k] === v) return count + 1;
return count;
}, 0);
}
Insert cell
Insert cell
bbmpGeo = FileAttachment("bbmp.geojson").json({ typed: true })
Insert cell
parksGeo = FileAttachment("parks-data-centroid-area.geojson").json({
type: true
})
Insert cell
parksData = parksGeo.features.map((f) => {
const [lon, lat] = f.geometry.coordinates;
return {
name: f.properties.name,
area: f.properties.area_2,
leisure: f.properties.leisure,
lat,
lon
};
})
Insert cell
Insert cell
d3hg = require("d3-hexgrid@0.3.0/dist/d3-hexgrid.min.js")
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
import {locationAndLandCover} from "@saneef/parks-in-bangalore-land-cover"
Insert cell
import { footer } from "@saneef/notebooks-footer"
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more