viewof select_alpha = select({'options':available_alphas, value: ini_alpha})
viewof select_leiden = select({'options':['none'].concat(available_leidens), value: 'none'})
select_cluster
import {select} from '@jashkenas/inputs'
d3.select('#set_alpha').empty()
viewof opacity = slider({ min: 0.01, max: 1, value: 0.75, step: 0.01, description: 'shape opacity'})
inst_alpha_index = 0
ini_alpha = 0
container = html `<div style="height:${height}px; border-style:solid; border-color:#d3d3d3; border-width:1px; position:relative;"></div>`
// mutable select_cluster = 'none'
mutable select_cluster = select_leiden
unselected_opacity_255 = 20
selected_deckgl_points = deckgl_points['features'].filter(x => x['properties'][cat_name] == select_cluster)
// passing in JSON object
ini_geojson = JSON.parse(geojson_string)
inst_alpha = 5
available_alphas = Array.from(new Set(ini_geojson["features"].map(x => x.properties.alpha))).sort((a, b) => a - b)
available_leidens = Array.from(new Set(ini_geojson.features.map(x => x.properties[cat_name]))).sort((a, b) => parseInt(a) - parseInt(b))
alpha_features = ini_geojson["features"].filter(x => x.properties.alpha == select_alpha)
geojson = ({
type: "FeatureCollection",
features: alpha_features
})
transcript_radius = 1
cell_layer = new deck.GeoJsonLayer({
id: 'cell_layer',
data: selected_deckgl_points,
opacity: opacity,
stroked: false,
filled: true,
getLineWidth: 0.1,
getFillColor: f => {
var rgb_array = d3.color(f.properties.color)
var rgb = [rgb_array.r, rgb_array.g, rgb_array.b]
return rgb
},
getRadius: transcript_radius,
updateTriggers: {
getFillColor: select_cluster,
},
pickable: false
});
geojson
nbhd_layer = new deck.GeoJsonLayer({
id: 'nbhd_layer',
data: geojson,
opacity: opacity,
stroked: false,
filled: true,
getFillColor: d => {
var rgb_array = d3.color(d.properties.color)
var rgb = [rgb_array.r, rgb_array.g, rgb_array.b]
var inst_color
if (select_cluster === 'none'){
inst_color = rgb
} else {
inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255]
// check gene name
if (d['properties'][cat_name] === select_cluster){
inst_color = rgb
}
}
return inst_color
},
updateTriggers: {
getFillColor: [select_cluster],
},
onClick: (info, event) => {
var inst_cat_name = info.object.properties[cat_name]
if (select_cluster !== inst_cat_name){
mutable select_cluster = inst_cat_name
// mutable select_meta = cat_name
d3.select('#leiden_dropdown').select('select').node().value = inst_cat_name
console.log('new cluster', select_cluster, inst_cat_name)
} else {
mutable select_cluster = 'none'
// mutable select_meta = cat_name
d3.select('#leiden_dropdown').select('select').node().value = 'none'
console.log('none cluster', select_cluster)
}
},
pickable: true
});
cat_name = 'leiden'
deckgl.setProps({layers: [nbhd_layer, cell_layer]});
height = 850
center_x = d3.mean(deckgl_points['features'].map(x => x['geometry']['coordinates'][0]))
center_y = d3.mean(deckgl_points['features'].map(x => x['geometry']['coordinates'][1]))
zoom = 3
min_zoom = -6
INITIAL_VIEW_STATE_2D = ({
target: [center_x, center_y, 0],
zoom: zoom,
minZoom:min_zoom,
})
deckgl = {
container.innerHTML = '';
var view = new deck.OrthographicView({id: 'ortho'})
var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
// controller: true,
controller: {doubleClickZoom: false},
getTooltip: ({object}) => {
return object && ` ${object['properties'][cat_name]}
`},
});
}
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
import {slider} from "@jashkenas/inputs"
d3 = require("d3@5")
zip_geojson_string = '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'
geojson_string = decode_zipped_string(zip_geojson_string)
cell_geojson_string = '{"type": "FeatureCollection", "features": [{"id": "0", "type": "Feature", "properties": {"color": "red", "index": 0, "leiden": "0"}, "geometry": {"type": "Point", "coordinates": [54.340494179096545, 27.836938509379618]}}]}'
deckgl_points = JSON.parse(cell_geojson_string)
// deckgl_points = []
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
// console.log(strData);
return strData
}
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.
