Platform
Resources
Pricing
Sign in
Get started
Xiaoji Chen
Designer. Geek. Beer addict. Data queen.
Workspace
Fork
Published
By
Xiaoji Chen
Edited
Jul 8, 2022
Fork of
deck.gl Playground
•
18 forks
32 stars
Insert cell
Insert cell
Insert cell
container
=
html
`<div style="height:600px"></div>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
deckgl
=
{
const
props
=
{
container
,
map
:
mapboxgl
,
mapStyle
:
'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
,
initialViewState
:
{
longitude
:
-
1.4157
,
latitude
:
52.2324
,
zoom
:
6
,
minZoom
:
5
,
maxZoom
:
15
,
pitch
:
40.5
}
,
controller
:
true
,
layers
:
[
hexagonLayer
]
}
;
// Avoid creating multiple instances
const
prevDeckInstance
=
this
;
if
(
prevDeckInstance
)
{
prevDeckInstance
.
setProps
(
props
)
;
return
prevDeckInstance
;
}
return
new
deck
.
DeckGL
(
props
)
;
}
Insert cell
hexagonLayer
=
{
return
new
deck
.
HexagonLayer
(
{
id
:
'heatmap'
,
colorRange
,
data
,
elevationRange
:
[
0
,
1000
]
,
elevationScale
:
250
,
extruded
:
true
,
getPosition
:
d
=>
[
d
.
lng
,
d
.
lat
]
,
opacity
:
1
,
radius
,
upperPercentile
}
)
;
}
Insert cell
Insert cell
Insert cell
Insert cell
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.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
container
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
radiusSlider
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
radius
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
upperPercentileSlider
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
upperPercentile
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colorRange
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
deckgl
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hexagonLayer
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mapboxgl
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
deck
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML