container = html `<div style="height:${height}px"></div>`
dashboard = html`
<div id='cell_size', style="margin-right: 1px; border:1px; text-align:left;">${viewof radius} </div>
<div>
${container}
<div>
`
// viewof radius = Range([0, 255], {step: 1})
radius_ini = 10
import {Select, Range} from '@observablehq/inputs'
radius
import {slider} from "@jashkenas/inputs"
viewof radius = slider({
value: radius_ini,
min : 0,
max : 100,
step : 5,
descripttion: "Cell Size"
})
boxes
{
const autoHighlight = true
const box_layer = new deck.GeoJsonLayer({
id: 'box_layer',
data : boxes,
getFillColor: d=> {
var inst_color
var rgb = d3.color(box_colors[d.properties.col_group])
inst_color = [rgb.r,rgb.g,rgb.b,255]
return inst_color
},
filled: true,
stroked: false,
pickable: true,
wireframe: false,
})
const scatterLayer = new deck.ScatterplotLayer({
data: points,
getPosition: d => [parseFloat(d.center_x), parseFloat(d.center_y)],
getFillColor: d => [0,0,255,100],
getRadius: radius,
pickable: true,
autoHighlight: true,
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
})
const alpha_layer = new deck.GeoJsonLayer({
id: 'alpha_layer',
data: minimap_plot,
filled: false,
stroked: true,
lineWidthScale: 10,
lineWidthMinPixels: 2,
wireframe: false,
})
deckgl.setProps({layers: [alpha_layer, box_layer]});
}
data = [
{
x: 1.0,
y: 1.0,
name: 'THE point',
}
]
default_opacity = 0.5
radius_min_pixels = 1
height = 500
initial_view_state = ({
target: [5100, 3100, 0],
zoom: -4
})
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, layer}) => {
if (object){
if (layer.id == 'box_layer'){
return object && `${object.properties.name}\n${object.properties.col_group}`
}
}
}
});
}
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
d3 = require("d3@5")
pako = require('pako/dist/pako.min.js')
points = JSON.parse(decode_zipped_string(zip_points))
zip_boxes ='eJytlcGO4jAMhl+l6hlFcRzb8V5H2vPeEVohpjNTLUNRKQeEePd1QHNgmkPVDpU4hK/94w87vdbD5djUv6r6d7Mdzn3z0u33zW5ou0O9quq3x+LJgPW1bl8z6PMP3+7KS8e+Ozb90N7pa33YfmYCAqhdCdTnD3hv6K7b/33vu/MxP2I4H7b1zVbfm+6zGfrL/favgD/d/vL+2Myu6/rX9rAdHvtZryWgQ1HR6FlZiVYVRlEn7BFSQuK0WVVrldmYhBFWCp2IfQ/dbG5W95dXWOI1jL2ehmb7b55YiImdAApTwhRiklUVScVRDMJgJVBSymWC4BIyxRJZSp9OjtOfPYclnnHs+a09few+2uNpnusQGBwlj5Ej2v9oJUAUcRoRGZQkWRflYgPBfFBCCSxETwbH0c+acYnm+JPHBAvZ3CUgZetBlrCqxKtjAA42imypeB9Z7+dySgWukDuVG+c+y41L5NJPyrWu8C5GohTVImzcchMxOib7tkuDAtzLtOD5ZPBQIEvp08lC+rNmWqKZx5oXHBMIqC6JnT8UE6HaCBImJ57F3ibWJRw014mY5nIGFLhx7lRunJvtbm7/AUDgHcU='
boxes = JSON.parse(decode_zipped_string(zip_boxes))
box_colors = ({'chips': '#1f77b4',
'fishchips': '#aec7e8',
'steak': '#ff7f0e',
'tuna': '#ffbb78'})
minimap_plot = JSON.parse(decode_zipped_string(zip_minimap_plot))
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.
