I like maps
viewof map1 = {
let container = html`<div style='height:500px;' />`
yield container
let map = await getMap(container, [10, 47], 4, 50, 'clbb2eulp000u14phb02xh6tk')
setVisibility(map, 'fagus', 'rcp45', true);
setTimestep(map, 'fagus', 'rcp45', 2005);
}
viewof map2 = {
let container = html`<div style='height:500px;' />`;
yield container;
let map = await getMap(container, [3, 48], 5, 0, 'clbb2eulp000u14phb02xh6tk')
setVisibility(map, 'fagus', 'rcp45', false);
setVisibility(map, 'fagus', 'rcp85', true);
//setTimestep(map, 'fagus', 'rcp85', 2035);
}
setTimestep(map2, 'fagus', 'rcp85', timestep);
viewof map3 = {
let container = html`<div style='height:500px;' />`;
yield container;
let map = await getMap(container, [12, 52], 5, 0, 'clbb2eulp000u14phb02xh6tk');
setVisibility(map, 'fagus', 'rcp45', false);
setVisibility(map, 'abies', 'rcp45', true);
setTimestep(map, 'abies', 'rcp45', 2035);
}
setTimestep(map3, 'abies', 'rcp45', timestep);
viewof map4 = {
let container = html`<div style='height:500px;' />`;
yield container;
let map = await getMap(container, [1, 48], 6, 0, 'clbb2eulp000u14phb02xh6tk');
setVisibility(map, 'fagus', 'rcp45', true);
setVisibility(map, 'fagus', 'rcp85', false);
}
{
setVisibility(map4, 'fagus', 'rcp45', rcp === 'rcp45');
setVisibility(map4, 'fagus', 'rcp85', rcp === 'rcp85');
setTimestep(map4, 'fagus', rcp, 2095);
}
viewof map5 = {
let leftContainer = html`<div id="before" style='height:500px;'></div>`;
let rightContainer = html`<div id="after" style='height:500px;' ></div>`;
let container = html`<div style='height:500px;'>${leftContainer}${rightContainer}</div>`;
yield container;
let left = await getMap(
leftContainer,
[1, 48],
6,
0,
"clbb2eulp000u14phb02xh6tk"
);
let right = await getMap(
rightContainer,
[1, 48],
6,
0,
"clbb2eulp000u14phb02xh6tk"
);
setVisibility(left, "fagus", "rcp45", true);
setVisibility(left, "fagus", "rcp85", false);
setVisibility(right, "fagus", "rcp45", false);
setVisibility(right, "fagus", "rcp85", true);
const compare = new mbglCompare(left, right, container, {
mousemove: false,
orientation: "vertical"
});
invalidation.then(() => {
compare.remove();
});
}
html`<figure style="height:2000px">${render(() => {
return jsx`<${BeeSwarm} region="FRA" timestep=${timestep_} />`;
})}<figcaption>Hello, bubbles</figcaption></figure>`
viewof timestep_ = Inputs.range([0, 3], {
format: (x) => TIME_STEPS[x],
step: 1,
label: "Time step:"
})
{
const style = await getStyle("Juglans_regia", "45", timestep_);
map6.setStyle(style);
}
render(() => {
return jsx`<${StackedBars} species="Quercus_ilex" region="ITA" />`
})
render(() => {
return jsx`<${StackedBars} species="Quercus_ilex" region="FRA" />`
})
getAllSpeciesStatsForRegion({ GID_1: "BEL.1_1" }, STATS)
async function getStyle(species, rcp, fut) {
/*
const topoKey = `${species}_10_extents_rcp${rcp}`;
const topoUrl = `https://raw.githubusercontent.com/developmentseed/eu-trees4f-vector/main/data/extents/topojson/${topoKey}.json`;
const topoRaw = await fetch(topoUrl);
const topo = await topoRaw.json();
const topoObjs = topo.objects[topoKey].geometries;
const features = topoObjs.map((topoObj) => {
return topojson.feature(topo, topoObj);
});
const featureCol = turf.featureCollection(features);
const simp = turf.simplify(featureCol, { tolerance: 0.05 });
const stable = fut === 0 ? "nat" : "stable";
const treesArea = features.find(
(f) => f.properties.fut === fut && f.properties.clss === stable
);
const trees = randomPointsOnPolygon(2000, treesArea);
*/
const stable = [
"all",
["==", ["get", "nat_1"], 1],
[">", ["get", `sdms_rcp${rcp}_fut${fut}_1`], 500]
];
const decolonized = [
"all",
["==", ["get", "nat_1"], 1],
["<", ["get", `sdms_rcp${rcp}_fut${fut}_1`], 500]
];
const suitable = [
"all",
["==", ["get", "nat_1"], 0],
[">", ["get", `sdms_rcp${rcp}_fut${fut}_1`], 500]
];
const filter =
fut === 0
? ["==", ["get", "nat_1"], 1]
: ["any", stable, decolonized, suitable];
const fillColor =
fut === 0
? COLORS[1]
: [
"case",
stable,
COLORS[1],
decolonized,
COLORS[0],
suitable,
COLORS[2],
"#ff0fff"
];
const icon = fut === 0
? "deciduous_stable"
: [
"case",
stable,
"deciduous_stable",
decolonized,
"deciduous_decolonized",
suitable,
"seedling",
"seedling"
];
const style = {
...BASEMAP,
sources: {
...BASEMAP.sources,
hex10: {
type: "vector",
tiles: [
`https://storage.googleapis.com/eu-trees4f-tiles/hex/${species}/10/{z}/{x}/{y}.pbf`
]
//data: featureCol
},
hex20: {
type: "vector",
tiles: [
`https://storage.googleapis.com/eu-trees4f-tiles/hex/${species}/20/{z}/{x}/{y}.pbf`
]
//data: featureCol
}
/*trees: {
type: "geojson",
data: turf.featureCollection(trees)
}*/
},
layers: [
...BASEMAP.layers,
{
id: "hex10",
type: "fill",
source: "hex10",
"source-layer": `${species}_10_hex`,
filter,
paint: {
"fill-color": fillColor
},
minZoom: 5
},
{
id: "hex10_trees",
type: "symbol",
source: "hex10",
"source-layer": `${species}_10_hex`,
layout: {
"icon-image": icon
},
filter,
paint: { "icon-opacity": 0.5 },
minZoom: 5
},
{
id: "hex20",
type: "fill",
source: "hex20",
"source-layer": `${species}_20_hex`,
filter,
paint: {
"fill-color": fillColor
},
minZoom: 2,
maxZoom: 5
},
{
id: "hex20_trees",
type: "symbol",
source: "hex20",
"source-layer": `${species}_20_hex`,
layout: {
"icon-image": icon
},
filter,
paint: { "icon-opacity": 0.5 },
minZoom: 2,
maxZoom: 5
}
]
};
return style;
}
TIME_STEPS = [2005, 2035, 2065, 2095]
CATEGORIES = ['decolonized', 'stable', 'suitable']
COLORS = ['#c87474', '#89dc6a', '#cdf872']
STATS = FileAttachment("stats.json").json()
BASEMAP = FileAttachment("style.json").json()
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.
