Web developer | Data Specialist at CIMMYT-Bangladesh | Dataviz enthusiast | Tea addict | Father of 2
map_01 = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width: ${ width }px; height: ${640}px;` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let bbox = [88.01056671, 20.74111176, 92.67366028, 26.63376617], // bounding box for Bangladesh
fitBounds = [ [bbox[1], bbox[0]], [bbox[3], bbox[2]] ]; // formatted for leaflet
let map = L.map(container, mapOptions).fitBounds(fitBounds);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
}
bangladesh = d3.json(await require.resolve("https://gist.githubusercontent.com/mutasimb/105534dbd12cb4341809cbd1025b2f92/raw/6585fcec42feb26e6bc23479ec89451c5d8bb917/bgd_adm0_simplified_0.01_geo.json"))
grid = {
let { lon, lat } = forecastData;
let gridPoints = lat.reduce((arr, lt) => arr.concat(lon.map(ln => [ln, lt])), []);
return {
type: "FeatureCollection",
features: gridPoints.map((el, i) => ({
type: "Feature",
geometry: {
type: "Point",
coordinates: [el[0], el[1]]
},
properties: { id: i }
}))
}
}
bufferedBangladesh = turf.buffer(bangladesh, 10)
gridInBuffer = {
// We easily could've returned 'turf.pointsWithinPolygon(grid, bufferedBangladesh)'
// for our purpose, but we're manually excluding three points with the following codes.
// All of these three points fall out of the boundary of Bangladesh and they contain some
// unrealistic extreme values that eventually interfere with the visualization. Since
// this is not a scientific research, I'll go for making my visualization beautiful. :D
return {
type: "FeatureCollection",
features: turf.pointsWithinPolygon(grid, bufferedBangladesh).features.filter(
(el, i) => [474, 486, 526].indexOf(i) == -1
)
}
}
gridBoxes = {
let { lon, lat } = forecastData;
return {
type: "FeatureCollection",
features: gridInBuffer.features.map(el => ({
id: el.properties.id,
index: [lon.indexOf(el.geometry.coordinates[0]), lat.indexOf(el.geometry.coordinates[1])]
})).map(el => ({
id: el.id,
boxCoords: [
[(lon[el.index[0]]+lon[el.index[0]-1])/2, (lon[el.index[0]]+lon[el.index[0]+1])/2],
[(lat[el.index[1]]+lat[el.index[1]-1])/2, (lat[el.index[1]]+lat[el.index[1]+1])/2]
]
})).map(el => ({
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[
[el.boxCoords[0][0], el.boxCoords[1][0]],
[el.boxCoords[0][0], el.boxCoords[1][1]],
[el.boxCoords[0][1], el.boxCoords[1][1]],
[el.boxCoords[0][1], el.boxCoords[1][0]],
[el.boxCoords[0][0], el.boxCoords[1][0]]
]]
},
properties: { id: el.id }
}))
};
}
colorDomain = {
let gridBoxIndex = gridBoxes.features.map(el => el.properties.id),
gridBoxData = forecastData.t2[0].filter((_, i) => gridBoxIndex.indexOf(i) > -1);
return d3.extent(gridBoxData);
}
colorScale = {
let schemesNeedingInversion = ["Spectral", "RdBu", "RdYlBu", "RdYlGn"];
return d3.scaleSequential(d3[`interpolate${ colorScheme }`]).domain(
schemesNeedingInversion.indexOf(colorScheme) > -1 ? [colorDomain[1], colorDomain[0]] : colorDomain
);
}
mapOptions = ({
dragging: false, // for scrolling on mobile devices
scrollWheelZoom: false // for scrolling on computer browsers
})
styleObj = ({
countryGeom: {
color: "#000",
fillOpacity: 0,
weight: 1
},
gridBox: {
color: "#fff",
opacity: 0.0,
fill: "#fff",
fillOpacity: 0.85,
weight: 0
},
gridPoint: {
radius: 2,
fillColor: "#ffffff",
color: "#000",
weight: 1,
opacity: 0.5,
fillOpacity: 0.2
}
})
L = require('leaflet@1.3.4')
L_css = html`<link href='${resolve('leaflet@1.3.4/dist/leaflet.css')}' rel='stylesheet' />`
turf = require('@turf/turf@5.1.6')
d3 = require('d3@5.7.0')
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.
