Published
Edited
May 1, 2021
2 forks
container = html `<div style="height:${height}px"></div>`
height = 700
tmp = 'something'
polygon_data = [
{
'name': 'something',
'coordinates': [[0,1], [1,1], [2,2]]
}
]
scatter_data = [{'name': 'one', 'x': 0, 'y': 1},
{'name': 'two', 'x': 2, 'y': 2}]
// image = FileAttachment("image_string.txt").text()
// image
// blue square image
image = '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAHUlEQVR4nGNkYPjPQC5gIlvnqOZRzaOaRzVTRTMAIJ4BJ6WiocQAAAAASUVORK5CYII="'
image_proc = image.slice(1,-1)
// image.slice(1,-1)
{
const polygon_layer = new deck.PolygonLayer({
id: 'polygon_layer',
data: polygon_data,
getFillColor: [250, 0, 0, 50],
getLineColor: [250, 0, 0, 50],
getLineWidth: d => 0.1,
getPolygon: d => d.coordinates,
stroked: true,
filled: true,
wireframe: true,
pickable: true,
// opacity: rescue_opacity
});
const scatter_layer = new deck.ScatterplotLayer({
id: 'scatter_layer',
data: scatter_data,
getPosition: d => {
return [d.x, d.y]
},
getFillColor: [0, 0, 250, 150],
getRadius: radius,
pickable: true,
// autoHighlight: true,
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
updateTriggers: {
// getFillColor: select_meta,
// getPosition: map_type
},
})
const bitmap_layer = new deck.BitmapLayer({
id: 'bitmap_layer',
bounds:image_bounds,
image:image_proc
});
deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_layer]});
// deckgl.setProps({layers: [bitmap_layer]});
}
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
// image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]
// [[left, bottom], [left, top], [right, top], [right, bottom]]
image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]
image_size = 10
radius = 1
radius_min_pixels = 0.5
center_x = 0
center_y = 0
INITIAL_VIEW_STATE = ({
target: [center_x, center_y, 0],
zoom: zoom,
minZoom:min_zoom
})
min_zoom = -1.5
zoom = 0
deckgl = {
// // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
// // This is an Observable hack: clear previously generated content
container.innerHTML = '';
const view = new deck.OrthographicView({id: 'ortho'})
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({object}) => {
return object && ` ${object.name}
`},
});
}
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.
