height = 800
container = {
return html `<div id='the-container' style="height:${height}px; border-style:solid; border-color:#d3d3d3; border-width:1px; position: relative;"></div>`
}
// container = html `<div style="height:800px; border-style:solid; border-color:#d3d3d3; border-width:1px"></div>`
dashboard = html`
<div style="display: flex;">
<div id="meta_dropdown", style="margin-right: 1px; border:1px; text-align:left;">${viewof select_cell_dropdown} </div>
<div style="margin-left: 20px; margin-right: 5px; border:1px; text_align:center;">${viewof cell_size}</div>
</div>
<div>
${container}
</div>
`
Object.keys(cell_colors).sort()
viewof select_cell_dropdown = select({'options':['none'].concat(Object.keys(cell_colors).sort()), value: 'none'})
mutable select_cell = select_cell_dropdown
scale_z = 1
cell_colors = ({
'INC': '#1f77b4',
'EXC': '#aec7e8',
'Epen': '#ff7f0e',
'Mural': '#ffbb78',
'OGC': '#2ca02c',
'OPC': '#98df8a',
'Endo': '#d62728',
'MGC': '#ff9896',
'ASC': '#9467bd'})
rgb = d3.color(cell_colors['INC'])
rgb.r
d3.color(cell_colors[1])
ini_opacity = .5
import {slider, select} from '@jashkenas/inputs'
viewof cell_size = slider({
value: radius,
min : 0,
max : 10,
step : .5,
description: "Cell Size"
})
viewof cell_opacity = slider({
value: 1,
min : 0,
max : 1,
step : 1,
description: "Cell Opacity"
})
// this way we can perform a filtering of the scattered data using the selected gene
scatter_data_proc = scatter_data.filter(d => {
if (select_cell === 'none'){
return d
} else {
return d.cell_type === select_cell
}
})
select_cell
scatter_data_proc
pointcloud_layer = new deck.PointCloudLayer({
id: 'pointcloud_layer',
data: scatter_data_proc,
getPosition: d => {
return [d.x, d.y, scale_z * d.z]
},
getColor: d => {
var inst_color
var unselected_color = [0, 0, 0, 1]
var rgb = d3.color(cell_colors[d.cell_type])
if (select_cell === 'none'){
inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(cell_opacity)]
} else {
inst_color = unselected_color
if (d.cell_type === select_cell){
inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(cell_opacity)]
}
}
return inst_color
},
getRadius: cell_size,
pickable: true,
pointSize: cell_size,
sizeUnits:'meters',
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
updateTriggers: {
getColor: [select_cell]
},
onClick: (info, event) => {
if (select_cell !== info.object.cell_type){
mutable select_cell = info.object.cell_type
d3.select('#meta_dropdown').select('select').node().value = info.object.cell_type
} else {
mutable select_cell = 'none'
d3.select('#meta_dropdown').select('select').node().value = 'none'
}
}
})
opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255])
opacity_255(255)
deckgl.setProps({layers: [pointcloud_layer]});
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
// image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]
// [[left, bottom], [left, top], [right, top], [right, bottom]]
image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]
image_size = 10
radius = 1
radius_min_pixels = 0.5
center_x = 638.47
center_y = -521.105
deckgl = {
container.innerHTML = '';
var view = new deck.OrbitView({id: 'orbit'})
var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({object, layer}) => {
if (object){
return object && ` ${object.name}\n${object.cell_type} `
} },
});
}
INITIAL_VIEW_STATE_3D = ({
target: [center_x, center_y, 0],
rotationX: 90,
// rotationOrbit: -720,
// minRotationX: -720,
// minRotationOrbit: -720,
zoom: zoom,
minZoom:min_zoom
})
min_zoom = -1.5
zoom = 0
d3 = require("d3@5")
pako = require('pako/dist/pako.min.js')
function decode_zipped_string(b64Data){
// Get some base64 encoded binary data from the server. Imagine we got this:
// Decode base64 (convert ascii to binary)
var strData = atob(b64Data);
// Convert binary string to character-number array
var charData = strData.split('').map(function(x){return x.charCodeAt(0);});
// Turn number array into byte-array
var binData = new Uint8Array(charData);
// Pako magic
var data = pako.inflate(binData);
// // Convert gunzipped byteArray back to ascii string:
// var strData = String.fromCharCode.apply(null, new Uint16Array(data));
// https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript
var strData = new TextDecoder().decode(data);
// Output to console
return strData
}
// geojson_string = decode_zipped_string(zip_geojson_string)
zip_polygon_data3d = 'eJxtjcEKwjAMhl8l5JxD282Lr1KKDBe0sKaydQcV331dDirbIIH/I+T//BulS4xnwCknLvcoNyTAa85jH6UrPNWb94bAEjQmEHj7lx2B0xzWJx6GS3k+tE54HrOsXa+KzYfgQOWOXC1BHXtSl9mArlL7hZ07pjQL/9xhAXupP1k='
polygon_data3d = JSON.parse(decode_zipped_string(zip_polygon_data3d))
polygon_data3d
zip_scatter_data = 'eJyN0ruOFTEMBuBXWU29RHbiKy0VDS+AEEripFrQFhQsiHcnXCbnFEhMN5ZG+fTb//vvx+f6aRyvHw4AxhJTOYZR77N2ws5NtKC1UDkeH46v60cFSahreFnDK8n4Z/q2JhRJvL77eHr6+OXl+fe7b9+9OX48PtygCKwGjUcUJudpVbJ1K4ZEIownRO7JNsQuSe2ErCT4LwQgblHZ+6CVpbRuY4ohxByjs54Qoyf3EyIqyfMJoV5IBKAahdBJO3H2RuwVZo1QqH3A/epINiR0tzrnS4naCtWi2nQKjwqYgx3zACKYtxutDJk3BJoyboguJRpZfkXCxpShN1geDODSLQ/cq1vbTHSDGJPLCeVyBcKCecbqQJ2kagYa2USrdvQGsSG15Lcy2Oog/4Xs0olQiuXpYSvQqnUrPfLUNhTWOMd2cPXZbieCBOfm1oWuOI2q4BjMhUZMy04yslUebZbI2ymeCHceub9QwStVyFlRrZcpQTJLXSINYeFJrZeyy+2afF9IMCfanVs7/Tf04SdhrgOH'
scatter_data = JSON.parse(decode_zipped_string(zip_scatter_data))
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.
