container = html `<div style="height:${height}px"></div>`
viewof map_morph = slider({
value: 0,
min: 0,
max: 1,
precision: 3,
description: 'Slide between "Map" and "UMAP"'
})
// 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"})
{
const autoHighlight = true
const scatterLayer = new deck.ScatterplotLayer({
data: data_viz,
getPosition: d => [parseFloat(d.x), -parseFloat(d.y)],
getFillColor: d => d.color,
getRadius: radius,
pickable: true,
// autoHighlight: true,
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
})
const metaScatterLayer = new deck.ScatterplotLayer({
data: data_viz,
getPosition: d => [parseFloat(d.x), -parseFloat(d.y)],
getFillColor: d => d.meta_color,
getRadius: radius * meta_size_scale,
pickable: false,
// autoHighlight: true,
// highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels * meta_size_scale,
})
deckgl.setProps({layers: [scatterLayer, metaScatterLayer]});
}
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,
'umap-x':2,
'umap-y':2
}
]
x_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['x']) }))
x_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['x']) }))
y_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['y']) }))
y_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['y']) }))
umap_x_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['umap-x']) }))
umap_x_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['umap-x']) }))
umap_y_min = Math.min.apply(Math, data.map(function(o) { return parseFloat(o['umap-y']) }))
umap_y_max = Math.max.apply(Math, data.map(function(o) { return parseFloat(o['umap-y']) }))
umap_x_scale = d3.scaleLinear()
.domain([umap_x_min, umap_x_max])
.range([x_min, x_max]);
umap_y_scale = d3.scaleLinear()
.domain([umap_y_min, umap_y_max])
.range([y_min, y_max]);
data_viz = data.map(x => {
var inst_color
if (select_meta === null){
inst_color = [50, 50, 50, 100]
} else {
inst_color = [50, 50, 50, 100 * unselected_opacity_scale]
}
var meta_color
if (select_meta === null){
meta_color = [0, 0, 0, 0]
} else {
meta_color = [255, 0, 0, opacity_scale(x[select_meta])]
}
var umap_x = umap_x_scale(parseFloat(x['umap-x']))
var umap_y = umap_y_scale(parseFloat(x['umap-y']))
var inst_x = x.x * (1 - map_morph) + umap_x * map_morph
var inst_y = x.y * (1 - map_morph) + umap_y * map_morph
var inst_obj = ({
'x': inst_x,
'y': inst_y,
'color': inst_color,
'meta_color': meta_color
})
return inst_obj
})
data_viz[0]
import {slider} from '@jashkenas/inputs'
unselected_opacity_scale = 0.25
meta_size_scale = 3
default_opacity = 0.5
radius_min_pixels = 1
height = 500
initial_view_state = ({
target: [0, 0, 0],
zoom: 1,
minZoom:-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}) => {
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.
