{
const autoHighlight = true
// have deck.gl animate
function apply_map_morph(d){
var inst_x
var inst_y
if (map_type === 'Spatial'){
inst_x = d.x
inst_y = - d.y
} else {
inst_x = umap_x_scale(d['umap-x'])
inst_y = - umap_y_scale(d['umap-y'])
}
return [inst_x, inst_y]
}
var transitions = {
getPosition: {
duration:transitionDuration,
easing: d3.easeCubic
}
}
const scatterLayer = new deck.ScatterplotLayer({
id: 'scatterLayer',
data: data,
getPosition: apply_map_morph,
getFillColor: d => {
var inst_color = [0, 255, 0, 255]
console.log(select_meta)
if (select_meta === 'none'){
// show dim scatterplot
inst_color = [50, 50, 50, 100]
} else {
// value or category based metadata
if (all_genes.includes(select_meta)){
// color by value
////////////////////////////////////////
if (d.name in gex_dict[select_meta]){
var inst_expression = gex_dict[select_meta][d.name]
var inst_opacity = opacity_scale(inst_expression)
inst_color = [255, 0, 0, inst_opacity]
} else {
inst_color = [50, 50, 50, 2]
}
} else {
// color by category
////////////////////////////////////////
if (select_cat === 'all'){
var rgb = d3.color(cat_colors[d[select_meta]])
inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity]
} else {
inst_color = [50, 50, 50, 25]
if (d[select_meta] === select_cat){
var rgb = d3.color(cat_colors[d[select_meta]])
inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity]
}
}
}
}
return inst_color
},
getRadius: cell_radius,
radiusMinPixels: cell_min_radius,
pickable: true,
opacity: cell_opacity,
highlightColor: d => [50, 50, 50],
updateTriggers: {
getFillColor: [select_meta, select_cat],
getPosition: map_type
},
transitions: transitions,
onClick: (info, event) => {
console.log(info.object[cat_name])
if (select_cat !== info.object[cat_name]){
mutable select_cat = info.object[cat_name]
mutable select_meta = cat_name
d3.select('#meta_dropdown').select('select').node().value = cat_name
} else {
mutable select_cat = 'all'
mutable select_meta = cat_name
d3.select('#meta_dropdown').select('select').node().value = cat_name
}
}
})
deckgl.setProps({layers: [scatterLayer]});
}
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.
