data = FileAttachment("Version_2_MMG2023_2019-2021_Data_ToShare@1.xlsx - County.csv").csv({typed: true})
mapboxgl = require('mapbox-gl@^1.5.1/dist/mapbox-gl.js');
deck = require.alias({
h3: {},
s2Geometry: {}
})('deck.gl@8.4.1/dist.min.js')
getDeckGLMap = (layers, pitch) => {
if (pitch === undefined) {
pitch = 0;
}
let container = html `<div style="height:700px"></div>`;
let deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapboxApiAccessToken: mapboxToken,
mapStyle: 'mapbox://styles/mapbox/dark-v10',
layers: layers,
initialViewState: {
longitude: -95.6914,
latitude: 39.0481,
zoom: 3.5,
minZoom: 4,
maxZoom: 17,
pitch: pitch,
bearing: 0,
},
controller: true
});
return container;
}
getDeckGLMap([
new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data: data,
pickable: true,
opacity: 1,
filled: true,
radiusScale: 1,
radiusMinPixels: 1,
radiusMaxPixels: 1,
getPosition: d => [d.Longitude, d.Latitude],
getRadius: d => 1,
getFillColor: d => [255, 140, 0]
})
])
getDeckGLMap([
new deck.HexagonLayer({
id: "food-insecurity-heatmap",
data: data, // Assuming 'data' is already loaded and filtered as needed
radius: 8000, // Adjust this based on the geographic density of your data
elevationRange: [0, 3000], // Adjust the max elevation to suit your data scale
elevationScale: 1000, // Controls how dramatic the 3D effect is
getColorWeight: d => d["# of Food Insecure Persons Overall"],
colorAggregation: "SUM",
getElevationWeight: d => d["# of Food Insecure Persons Overall"],
elevationAggregation: "SUM",
extruded: true, // This is what makes the layer 3D
getPosition: d => [d.Longitude, d.Latitude],
pickable: true,
upperPercentile: 99.9,
lowerPercentile: 0,
colorRange: [ // Define a color range for the hexagons
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
],
})
])
gettDeckGLMap = (layers, pitch , bearing) => { // Set default pitch and bearing
let container = html`<div style="height:700px"></div>`;
let deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapboxApiAccessToken: mapboxToken,
mapStyle: 'mapbox://styles/mapbox/dark-v10',
layers: layers,
initialViewState: {
longitude: -95.6914,
latitude: 39.0481,
zoom: 3.8,
minZoom: 4,
maxZoom: 17,
pitch: pitch = 45, // Adjusted for a tilted view
bearing: bearing = -10, // Adjusted to rotate the view
},
controller: true
});
return container;
}
gettDeckGLMap([
new deck.HexagonLayer({
id: "food-insecurity-heatmap",
data: data, // Assuming 'data' is already loaded and filtered as needed
radius: 8500, // Adjust this based on the geographic density of your data
elevationRange: [0, 3000], // Adjust the max elevation to suit your data scale
elevationScale: 1000, // Controls how dramatic the 3D effect is
getColorWeight: d => d["# of Food Insecure Persons Overall"],
colorAggregation: "SUM",
getElevationWeight: d => d["# of Food Insecure Persons Overall"],
elevationAggregation: "SUM",
extruded: true, // This is what makes the layer 3D
getPosition: d => [d.Longitude, d.Latitude],
pickable: true,
upperPercentile: 99.9,
lowerPercentile: 0,
colorRange: [ // Define a color range for the hexagons
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
],
})
])
mapboxToken = "pk.eyJ1IjoiYm9zdGFkc2J1c3NlbiIsImEiOiJjbHN1a2JsZzYyODA0Mm1uc285N25hdDR5In0.xpGMqGPiskiRgb4wCyBoTg"
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.
