Published
Edited
Apr 14, 2021
3 forks
container = html `<div style="height:${height}px"></div>`
// viewof radius = Range([0, 255], {step: 1})
radius = 10
import {Select, Range} from '@observablehq/inputs'
viewof select_meta = Select([null].concat(meta_data_cols), {label: "Metadata"})
select_meta
{
const autoHighlight = true
const scatterLayer = new deck.ScatterplotLayer({
data: data,
getPosition: d => [parseFloat(d.x), -parseFloat(d.y)],
// getFillColor: d => [255, 0, 0, 255],
// getFillColor: d => {
// var inst_color = [255, 255, 0, 255]
// return inst_color
// },
getFillColor: d => {
var inst_color = [255, 0, 255, 100]
if (select_meta !== null){
// inst_color = [255, 0, 0, opacity_scale(d[select_meta])]
// inst_color = [255, 0, 0, 255]
// var tmp = opacity_scale(d[select_meta])
var tmp = 1
}
return inst_color
},
// getFillColor: d => {
// var inst_color
// if (select_meta === null){
// inst_color = [0, 0, 255, Math.round(default_opacity * 255)]
// } else {
// inst_color = [255, 0, 0, Math.round(opacity_scale(d[select_meta]))]
// }
// return inst_color
// },
getRadius: radius,
pickable: true,
autoHighlight: true,
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
updateTriggers: {
// This tells deck.gl to recalculat radius when `currentYear` changes
getFillColor: select_meta
},
})
deckgl.setProps({layers: [scatterLayer]});
}
meta_data_cols = Object.keys(data[0])
.filter(x => position_cols.includes(x) === false)
meta_max = Math.max.apply(Math, data.map(function(x) { return parseFloat(x[select_meta]) }))
opacity_scale = d3.scaleLinear()
.domain([0, meta_max])
.range([0, 250])
position_cols = ['x', 'y']
data = [
{
x: 1,
y: 1,
some:0
}
]
// data_viz = data.map(x => {
// var inst_color
// if (select_meta === null){
// inst_color = [0, 0, 255, Math.round(default_opacity * 255)]
// } else {
// inst_color = [255, 0, 0, Math.round(opacity_scale(x[select_meta]))]
// }
// var inst_obj = ({
// 'x': x.x,
// 'y': x.y,
// 'color': inst_color
// })
// return inst_obj
// })
default_opacity = 0.5
radius_min_pixels = 1
height = 500
initial_view_state = ({
target: [0, 0, 0],
zoom: 1
})
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.x} ${object['y']}`},
});
}
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
d3 = require("d3@5")
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.
