Public
Edited
Dec 16, 2023
Insert cell
Insert cell
Insert cell
Insert cell
getTooltip = {
return ({ object }) => {
if (object && object.properties) {
return `${object.properties.LOCATION}
- Habitat: ${object.properties.HABITAT}
- Significance: ${object.properties.SIGNIFIC}
`;
}
};
}
Insert cell
getPolylayer = () =>
new deck.PolygonLayer({
id: "polygon-layer",
data: animalGeoJSON.features,
pickable: true,
stroked: true,
filled: true,
wireframe: true,
opacity: 0.9,
lineWidthMinPixels: 1,
getPolygon: (d) => d.geometry.coordinates,
getFillColor: [255, 50, 50],
getLineColor: [0, 0, 0],
getLineWidth: 10
})
Insert cell
token = {
// Don't use this token. It will be rotated frequently. Get your own at https://mapbox.com
return "pk.eyJ1Ijoiam9obmhhbGRlbWFuIiwiYSI6ImNrMjIxNnBrdTAxN3Mzb3BmbWFzbnV6OGoifQ.HrfAiASrw9EQetZn13xAPg";
}
Insert cell
deck = require.alias({
// optional dependencjei
h3: {},
s2Geometry: {}
})("deck.gl@~8.0.0/dist.min.js")
Insert cell
mapboxgl = require("mapbox-gl@^1.4.1/dist/mapbox-gl.js")
Insert cell
animalGeoJSON = {
return {
...wildlifekeyareas,
features: wildlifekeyareas.features.filter(
(d) =>
d.properties.TAXON === selectedAnimal &&
d.geometry &&
d.geometry.coordinates &&
d.geometry.coordinates.length
)
};
}
Insert cell
animals = Object.keys(
wildlifekeyareas.features.reduce((accum, d) => {
accum[d.properties.TAXON] = true;
return accum;
}, {})
).sort()
Insert cell
wildlifekeyareas = FileAttachment("WildlifeKeyAreas.json").json()
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