container = html `<div style="height:${height}px"></div>`
dashboard = html`
<div style="display: flex;">
<div id="meta_dropdown", style="margin-right: 1px; border:1px; text-align:left;">${viewof select_gene_dropdown} </div>
<div style="margin-left: 2px; margin-right: -100px; border:1px; text_align:left;">${viewof show_image}</div>
<div style="margin-left: -100px; margin-right: 5px; border:1px; text_align:center;">${viewof polygon_opacity}</div>
<div style="margin-left: 5px; margin-right: 1px; border:1px; text_align:left;">${viewof transcripts_paritioned}</div>
<div style="margin-left: -100px; margin-right: 1px; border:1px; text_align:left;">${viewof zlayer}</div>
</div>
<div>
${container}
</div>
`
viewof select_gene_dropdown = select({'options':['none'].concat(Object.keys(cat_colors).sort()), value: init_gene})
mutable select_gene = select_gene_dropdown
init_gene ='tiger'
scale_z = 15
cat_colors = ({
'dog': 'blue',
'elephant':'purple',
'tiger':'orange'
})
ce
boxes
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,
})
scatterLayer = new deck.ScatterplotLayer({
id: 'scatterLayer',
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,
})
alpha_layer = new deck.GeoJsonLayer({
id: 'alpha_layer',
data: minimap_plot,
filled: false,
stroked: true,
lineWidthScale: 10,
lineWidthMinPixels: 2,
wireframe: false,
})
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: -6
})
initial_view_state2 =({
target: [5100, 3100, 0],
zoom: -2
})
ini_global_view_state = () => {
let initialViewState = {
main: {
target: [5500, 3600, 0],
zoom: -5
},
minimap: {
target: [5100, 3100, 0],
zoom: -6
}
}
return initialViewState
}
ini_view_state = ini_global_view_state()
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 views = [
new deck.OrthographicView({id: 'main',
controller: true,
scrollZoom: true,
}),
new deck.OrthographicView({id: 'minimap',
x : 20,
y : 20,
width: '20%',
height: '20%',
background: true,
clear: true,
controller: true,
}),
]
return new deck.DeckGL({
container,
// views: new deck.OrthographicView({id: 'minimap',
// x: 20,
// y : 20,
// width: '20%',
// height: '20%',
// }),
views: views,
initialViewState:ini_view_state,
controller: true,
layers: [alpha_layer, box_layer, scatterLayer],
getTooltip: ({object, layer}) => {
if (object){
if (layer.id == 'box_layer'){
return object && `${object.properties.name}\n${object.properties.col_group}`
}
}
}
});
}
// deckgl = new deck.DeckGL({
// container: container,
// })
// views = [
// new deck.OrthographicView({id: 'minimap',
// x : 20,
// y : 20,
// width: '20%',
// height: '20%',
// }),
// new deck.OrbitView({id: 'main'})
// ]
// deckgl.setProps({views: views})
// deckgl.setProps({layers: [alpha_layer, box_layer]});
deckgl.setProps({layerFilter: ({layer, viewport}) => {
if (layer.id === 'scatterLayer' && viewport.id ==='main'){
return true
}
else if (layer.id === 'alpha_layer'){
return true
}
else if (viewport.id === 'minimap' && layer.id === 'box_layer'){
return true
}
else{
return false
}
}
})
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.
