Voir la page Web du cours pour retrouver l'ensemble des supports.
container = html`<div style="height:600px"></div>`
deckgl = {
const props = {
container,
map: mapboxgl,
mapStyle:
"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
initialViewState: {
longitude: 137.964951,
latitude: 36.237148,
zoom: 5,
minZoom: 1,
maxZoom: 15,
pitch: 40.5,
bearing: -5
},
getTooltip,
controller: true,
layers: [hexagonLayer]
};
// Avoid creating multiple instances
const prevDeckInstance = this;
if (prevDeckInstance) {
prevDeckInstance.setProps(props);
return prevDeckInstance;
}
return await new deck.DeckGL(props);
}
hexagonLayer = {
return new deck.HexagonLayer({
id: "heatmap",
colorRange,
data,
elevationScale: 50,
elevationRange: [0, 5000],
extruded: true,
getPosition: (d) => [d.lng, d.lat],
pickable: true,
opacity: 1,
radius: 10000
});
}
function getTooltip({ object }) {
if (!object) return null;
console.log(object);
// return `
// latitude:
// longitude:
// nombre d'accidents:
// `;
}
colorRange = [
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
]
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.
