Public
Edited
Mar 5, 2023
2 forks
dataType = ["PM"]
// viewof between = Inputs.checkbox([''], {label: "Second year"})
viewof year = Inputs.range([1998, 2020], {label: "Year", value: 2020, step: 1});
{
let currentGADM = 'gadm0';
let data = gadm0;
let container = html`<div id='map'></div>`;
let legend = html``;
let matchExpression = null;
let matchExpressionGADM2 = null;
let content = html`
<div class='map-wrapper'>
${container}
<div class='map-overlay' id='features'>
<h2>The PM2.5 values of </h2>
<div id='country'>
<p>${year}</p>
</div>
</div>
${legend}
</div>
`;
yield content;
const key = dataLookup[dataType] + year;
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [15, 23.5],
zoom: 1,
});
map.on('load', () => {
map.addSource('countries', {
type: 'vector',
url: 'mapbox://mapbox.country-boundaries-v1',
});
map.addSource('aqli-tileset', {
type: 'vector',
url: 'mapbox://fndvit.aqli-test',
});
const key = dataLookup[dataType] + year;
matchExpression = matchExpressionOptions['gadm0'].match;
for (const row of data) {
const color = colorPalette[dataType][1](row[key]);
matchExpression.push(row[matchExpressionOptions[currentGADM].row], color);
}
matchExpression.push('#F2F2AD');
map.setPaintProperty('countries-join', 'fill-color', matchExpression);
matchExpressionGADM2 = matchExpressionOptions['gadm2'].match;
for (const row of gadm2) {
const color = colorPalette[dataType][1](row[key]);
matchExpressionGADM2.push(row[matchExpressionOptions['gadm2'].row], color);
}
matchExpressionGADM2.push('#F2F2AD');
map.setPaintProperty('county-join', 'fill-color', matchExpressionGADM2);
map.addLayer(
{
id: 'countries-join',
type: 'fill',
source: 'countries',
'source-layer': 'country_boundaries',
maxzoom: zoomThreshold['gadm2'],
paint: {
'fill-color': matchExpression,
},
},
'admin-1-boundary-bg'
);
map.addLayer(
{
id: 'county-join',
type: 'fill',
source: 'aqli-tileset',
'source-layer': 'aqli-test',
minzoom: zoomThreshold['gadm2'],
paint: {
'fill-color': matchExpressionGADM2,
},
},
'admin-1-boundary-bg'
);
})};
gadm2
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3-array@2", "d3-format@2", "d3-scale@3", "d3-selection@2")
import {interval} from "@mootari/range-slider@1781"
dataLookup = {
return {
'PM': 'pm'
}
}
colorPalette = {
return {
'PM':
[
d3.scaleThreshold()
.domain([-40, -20, -10, 0, 10, 20, 40])
.range(['#ffffff', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000']),
d3.scaleThreshold()
.domain([5, 10, 20, 30, 40, 50, 60, 70])
.range(['#ffffff', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'])
]
}}
zoomThreshold = {
return {
'gadm0': 1,
'gadm1': 3,
'gadm2': 5,
}
}
matchExpressionOptions = {
return {
'gadm0': {
'match': ['match', ['get', 'iso_3166_1_alpha_3']],
'row': 'iso_alpha3'
},
'gadm1': {
'match': ['match', ['get', 'iso_3166_1_alpha_3']],
'row': 'iso_alpha3'
},
'gadm2': {
'match': ['match', ['get', 'objectid']],
'row': 'objectid_gadm0'
},
}
}
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.
