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: 15px; border:1px; text-align:left;">${viewof select_gene_dropdown} </div>
<div style="margin-left: 30px; margin-right: 15px; border:1px; text_align:right;">${viewof show_image}</div>
<div style="margin-left: 30px; margin-right: 15px; border:1px; text_align:right;">${viewof polygon_opacity}</div>
<div style="margin-left: 30px; margin-right: 15px; border:1px; text_align:right;">${viewof transcripts_paritioned}</div>
<div style="margin-left: 30px; margin-right: 15px; border:1px; text_align:right;">${viewof zlayer}</div>
</div>
<div>
${container}
</div>
`
Object.keys(cat_colors).sort()
viewof select_gene_dropdown = select({'options':['none'].concat(Object.keys(cat_colors).sort()), value: 'none'})
mutable select_gene = select_gene_dropdown
scale_z = 15
cat_colors = ({
'dog': 'blue',
'elephant': 'purple',
'tiger': 'orange'
})
cell_colors = ({
'neuron': 'blue',
'immune': 'purple',
'other': 'orange'
})
// height = 800
// polygon_data = [
// {
// 'name': 'something',
// 'coordinates': [[0,1], [1,1], [2,2]],
// 'z': 10,
// 'cell_type' : 'neuron',
// 'z_level': 1
// },
// {
// 'name': 'something2',
// 'coordinates': [[4,4], [10,4], [10,10],[4,10]],
// 'z': 10,
// 'cell_type': 'immune',
// 'z_level': 2
// }
// ]
// polygon_data3d = [
// {
// 'name': 'something',
// 'coordinates': [[0,1,30], [1,1,30], [2,2,30]],
// 'cell_type': 'neuron',
// 'z': 3
// },
// {
// 'name': 'something2',
// 'coordinates': [[4,4,15], [10,4,15], [10,10,15],[4,10,15]],
// 'cell_type': 'immune',
// 'z': 3
// }
// ]
// scatter_data = [{'name': 'dog', 'x': 0, 'y': 1, 'z': 1, 'partition': 0},
// {'name': 'elephant', 'x': 2, 'y': 2, 'z': 2, 'partition': 1},
// {'name': 'tiger', 'x': 4, 'y': 5, 'z': 3, 'partition': 1}]
// blue square image
image = '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAHUlEQVR4nGNkYPjPQC5gIlvnqOZRzaOaRzVTRTMAIJ4BJ6WiocQAAAAASUVORK5CYII="'
image_proc = image.slice(1,-1)
poly_line_width = 3
ini_opacity = .5
import {slider, select} from '@jashkenas/inputs'
viewof polygon_opacity = slider({
value: ini_opacity,
min : 0,
max : 1,
step : .1,
description: "Polygon Opacity"
})
viewof transcripts_paritioned = Inputs.toggle({
label : "Partitioned Transcripts Only",
// value : false,
values :[1,0]
})
viewof show_image = Inputs.toggle({label: "Image", value: true})
viewof zlayer = Inputs.checkbox([0,1,2,3,4,5,6],{
label : "Z-level",
value : [0,1,2,3,4,5,6]})
// this way we can perform a filtering of the scattered data using the selected gene
scatter_data_proc = scatter_data.filter(item => zlayer.includes(item.z))
.filter(d => {
if (select_gene === 'none'){
return d
} else {
return d.name === select_gene
}
})
select_gene
filtered_scatter_data = scatter_data.filter(item => item.partition === 1)
.filter(d => {
if (select_gene === 'none'){
return d
} else {
return d.name === select_gene
}
})
// .filter(d => {
// if (select_gene !== 'none'){
// return d
// }
// })
bitmap_layer = new deck.BitmapLayer({
id: 'bitmap_layer',
bounds:image_bounds,
image:image_proc,
visible: show_image
});
pointcloud_layer = new deck.PointCloudLayer({
id: 'pointcloud_layer',
data: transcripts_paritioned === 0? scatter_data_proc: filtered_scatter_data.filter(item => zlayer.includes(item.z)),
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(cat_colors[d.name])
if (select_gene === 'none'){
inst_color = [rgb.r, rgb.g, rgb.b, 255]
} else {
inst_color = unselected_color
if (d.name === select_gene){
inst_color = [rgb.r, rgb.g, rgb.b, 255]
}
}
return inst_color
},
getRadius: radius,
pickable: true,
pointSize:2,
sizeUnits:'meters',
// autoHighlight: true,
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
updateTriggers: {
getColor: [select_gene]
},
onClick: (info, event) => {
if (select_gene !== info.object.name){
mutable select_gene = info.object.name
d3.select('#meta_dropdown').select('select').node().value = info.object.name
} else {
mutable select_gene = 'none'
d3.select('#meta_dropdown').select('select').node().value = 'none'
}
}
})
// scatter_layer = new deck.ScatterplotLayer({
// id: 'scatter_layer',
// data: transcripts_paritioned === 0? scatter_data.filter(item => zlayer.includes(item.z)): filtered_scatter_data.filter(item => zlayer.includes(item.z)),
// getPosition: d => {
// return [d.x, d.y]
// },
// getFillColor: d => {
// var inst_color
// var rgb = d3.color(cat_colors[d.name])
// inst_color = [rgb.r, rgb.g, rgb.b, 255]
// return inst_color
// },
// getRadius: radius,
// pickable: true,
// // autoHighlight: true,
// highlightColor: d => [50, 50, 50],
// radiusMinPixels: radius_min_pixels,
// updateTriggers: {
// // getFillColor: select_meta,
// // getPosition: map_type
// },
// })
opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255])
polygon_layer3d = new deck.PolygonLayer({
id: 'polygon_layer3d',
data: polygon_data3d,
getFillColor: d => {
var inst_color
var rgb = d3.color(cell_colors[d.cell_type])
inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)]
return inst_color
},
getLineColor: d => {
var inst_color
var rgb = d3.color(cell_colors[d.cell_type])
inst_color = [rgb.r, rgb.g, rgb.b, opacity_255(polygon_opacity)]
return inst_color
},
getLineWidth: d => 100,
getPolygon: d => d.coordinates,
getElevation: d => scale_z,
lineWidthMinPixels: 30,
stroked: true,
filled: false, // nick-working
extruded : true,
wireframe: true,
pickable: true,
updateTriggers: {
getFillColor: polygon_opacity,
getLineColor: polygon_opacity
},
});
// polygon_layer = new deck.PolygonLayer({
// id: 'polygon_layer',
// // data: polygon_data,
// data: polygon_data.filter(item => zlayer.includes(item.z_level)),
// getFillColor: d => {
// var inst_color
// var rgb = d3.color(cell_colors[d.cell_type])
// inst_color = [rgb.r, rgb.g, rgb.b, 255]
// return inst_color
// },
// getLineColor: d => {
// var inst_color
// var rgb = d3.color(cell_colors[d.cell_type])
// inst_color = [rgb.r, rgb.g, rgb.b, 255]
// return inst_color
// },
// getLineWidth: d => poly_line_width,
// getPolygon: d => d.coordinates,
// stroked: true,
// filled: true,
// wireframe: false,
// pickable: true,
// // opacity: 0.1, // polygon_opacity,
// });
deckgl.setProps({layers: [bitmap_layer, polygon_layer3d, 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 = 0
center_y = 0
deckgl = {
container.innerHTML = '';
var view = new deck.OrbitView({id: 'ortho'})
var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({object}) => {
return object && ` ${object.name} <br> ${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 = 'eJyLrlbKS8xNVbJSUErJT1fSUVCqALINgHQlkDYE0lVQuiCxqCSzJDM/DyRfq6OA0Jiak1qQkZhXAtNtBNVtBNVthKbbEEV3SWZ6ahFMqwlUqylUqzGG1lgAgEsvhQ=='
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.
