Public
Edited
Mar 25, 2024
1 fork
Insert cell
data = FileAttachment("Version_2_MMG2023_2019-2021_Data_ToShare@1.xlsx - County.csv").csv({typed: true})
Insert cell
deckgl = {
return new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapStyle: 'https://free.tilehosting.com/styles/darkmatter/style.json?key=U0iNgiZKlYdwvgs9UPm1',
longitude: -1.4157,
latitude: 52.2324,
zoom: 6,
minZoom: 5,
maxZoom: 15,
pitch: 40.5
});
}
Insert cell
{
const hexagonLayer = new deck.HexagonLayer({
id: 'heatmap',
colorRange,
data,
elevationRange: [0, 1000],
elevationScale: 250,
extruded: true,
getPosition: d => [d.lng, d.lat],
opacity: 1,
radius,
upperPercentile,
lightSettings
});

deckgl.setProps({layers: [hexagonLayer]});
return hexagonLayer;
}
Insert cell
mapboxgl = Object {
version: "0.44.2"
supported: ƒ(e)
workerCount: 3
setRTLTextPlugin: ƒ(e, l)
Map: ƒ(e)
NavigationControl: ƒ(t)
GeolocateControl: ƒ(o)
AttributionControl: ƒ(t)
ScaleControl: ƒ(t)
FullscreenControl: ƒ()
Popup: ƒ(o)
Marker: ƒ(t, e)
Style: ƒ(r, t)
LngLat: ƒ(t, n)
LngLatBounds: ƒ(t, n)
Point: ƒ(t, n)
Evented: ƒ()
config: Object {API_URL: "https://api.mapbox.com", REQUIRE_ACCESS_TOKEN: true, ACCESS_TOKEN: "no-token"}
accessToken: "no-token"
}
Insert cell
deck = Object {
VERSION: "5.2.5"
version: "5.2.5"
log: t {id: "deck", VERSION: "1.0.0", _startTs: 787.8000000007451, _deltaTs: 1502.199999999255, LOG_THROTTLE_TIMEOUT: 0, _storage: t, userData: Object, isEnabled: ƒ(), getPriority: ƒ(), getLevel: ƒ(), getTotal: ƒ(), getDelta: ƒ(), enable: ƒ(), setLevel: ƒ(), warn: ƒ(), error: ƒ(), deprecated: ƒ(), removed: ƒ(), probe: ƒ(), log: ƒ(),}
COORDINATE_SYSTEM: Object {LNGLAT: 1, METER_OFFSETS: 2, METERS: 2, LNGLAT_OFFSETS: 3, IDENTITY: 0}
Deck: class
LayerManager: class
AttributeManager: class
Layer: class
CompositeLayer: class
Viewport: class
WebMercatorViewport: class
PerspectiveViewport: class
OrthographicViewport: class
project: Object {name: "project", dependencies: Array(1), vs: "// EXTERNAL CONSTANTS: these must match JavaScript…on) {\n return project_to_clipspace(position);\n}\n", getUniforms: ƒ(), deprecations: Array(17)}
project64: Object {name: "project64", dependencies: Array(2), vs: "\nconst vec2 WORLD_SCALE_FP64 = vec2(81.48732757568…n, position64xyLow, offset, worldPosition\n );\n}\n", getUniforms: ƒ(), deprecations: Array(2)}
lighting: Object {name: "lighting", dependencies: Array(1), vs: "#define MAX_NUM_OF_LIGHTS 5\n\n// TODO these should …position_worldspace_vec3, normals_worldspace);\n}\n", getUniforms: ƒ(), deprecations: Array(1)}
View: class
MapView: class
FirstPersonView: class
ThirdPersonView: class
OrbitView: class
PerspectiveView: class
OrthographicView: class
MapController: class
experimental: Object {OrbitController: class, ViewportControls: class, MapControls: class, FirstPersonState: class, OrbitState: class, MapState: class, FirstPersonViewport: class, ThirdPersonViewport: class, OrbitViewport: class, EffectManager: class, Effect: class, TRANSITION_EVENTS: Object, LinearInterpolator: class, ViewportFlyToInterpolator: class, TransitionManager: class, extractViewState: ƒ(t), BinSorter: class, linearScale: ƒ(t, e, n), getLinearScale: ƒ(t, e), quantizeScale: ƒ(t, e, n),}
ArcLayer: class
IconLayer: class
LineLayer: class
PointCloudLayer: class
ScatterplotLayer: class
ScreenGridLayer: class
GridLayer: class
GridCellLayer: class
HexagonLayer: class
HexagonCellLayer: class
PathLayer: class
PolygonLayer: class
GeoJsonLayer: class
TextLayer: class
DeckGL: class
}
Insert cell
container = html `<div style="height:600px"></div>`
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