dashboard = html`
<div id='dashboard'>
<div style="display: flex;">
<div style="margin-right: 15px; border:1px; text-align:left;">${viewof opacity} </div>
<div id="metadata_dropdown", style="margin-right: 15px; border:1px; text-align:right;">Metadata ${viewof select_metadata_dropdown} </div>
</div>
<div style=flex-basis:50%; border:1px ">${container} </div>
</div>
`
// <div id="radius_dropdown", style="margin-right: 15px; border:1px; text-align:right;">Radius ${viewof select_radius} </div>
// <div style="display: flex;">
// <div style="margin-right: 15px; border:1px; text-align:left;">${viewof radius} </div>
// <div style="margin-right: 15px; border:1px; text-align:left;">${viewof opacity} </div>
// </div>
// <div style="margin-top: 15px; flex-basis:50%; border:1px ">${container} </div>
// viewof select_radius = select({'options':available_radius, value: ini_radius})
ini_meta = 'center_x'
// viewof select_metadata_dropdown = select({'options':['none'].concat(meta_data_cols), value: ini_meta})
viewof select_metadata_dropdown = select({'options':meta_data_cols, value: ini_meta})
// meta_data_cols = geojson
meta_data_cols = Object.keys(geojson.features[0].properties)
import {select} from '@jashkenas/inputs'
d3.select('#set_radius').empty()
viewof opacity = slider({ min: 0.01, max: 1, value: 0.75, step: 0.01, description: 'shape opacity'})
// inst_radius_index = 0
// ini_radius = 0
container = html `<div style="height:${height}px; border-style:solid; border-color:#d3d3d3; border-width:1px; position:relative;"></div>`
mutable select_meta = select_metadata_dropdown
unselected_opacity_255 = 20
// selected_deckgl_points = deckgl_points['features'].filter(x => x['properties'][cat_name] == select_meta)
meta_values = geojson.features.map(x => x.properties[select_meta])
meta_max = d3.max(meta_values)
meta_min = d3.min(meta_values)
opacity_scale = d3.scaleLinear()
.domain([0, meta_max])
.range([0, 255])
// passing in JSON object
ini_geojson = JSON.parse(geojson_string)
available_radius = Array.from(new Set(ini_geojson["features"].map(x => x.properties.radius))).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))
// radius_features = ini_geojson["features"].filter(x => x.properties.radius == select_radius)
// geojson = ({
// type: "FeatureCollection",
// features: radius_features
// })
geojson = ini_geojson
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_meta,
// },
// pickable: false
// });
geojson
nbhd_layer = new deck.GeoJsonLayer({
id: 'nbhd_layer',
data: geojson,
opacity: opacity,
stroked: false,
filled: true,
getFillColor: d => {
// // using predefined color
// //////////////////////////
// var rgb_array = d3.color(d.properties.color)
// var rgb = [rgb_array.r, rgb_array.g, rgb_array.b]
// var inst_color
// if (select_meta === '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_meta){
// inst_color = rgb
// }
// }
// return inst_color
var inst_value = d.properties[select_meta]
var inst_opacity = opacity_scale(inst_value)
return [255, 0, 0, inst_opacity]
},
updateTriggers: {
getFillColor: [select_meta],
},
onClick: (info, event) => {
var inst_cat_name = info.object.properties[cat_name]
if (select_meta !== inst_cat_name){
mutable select_meta = inst_cat_name
// mutable select_meta = cat_name
d3.select('#metadata_dropdown').select('select').node().value = inst_cat_name
console.log('new cluster', select_meta, inst_cat_name)
} else {
mutable select_meta = 'none'
// mutable select_meta = cat_name
d3.select('#metadata_dropdown').select('select').node().value = 'none'
console.log('none cluster', select_meta)
}
},
pickable: true
});
cat_name = 'leiden'
deckgl.setProps({layers: [nbhd_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 = -5
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 = 'eJzFmMGO4jAMhl8F9TxUiRMn9lxX2vPeEVoh6I6QWIq6HWkR4t03BebQ4gyuWIYDBxLj+PfX/Ak9FO1+VxWvk+J7tWjfm+pbvdlUy3Zdb4uXSfHrPPgnBcwOxXrVBZpuYvCrbmjX1Luqaden6EOxrLZt1fz8m75MPVoqjXcIxnhDhlP4ZX7fzSOwLdEHsJZdNCF08/WmbrolmmrVpW8Wq/V7lxqNMcc08FbVv6u22Z9W+6jnR73Zv51rX9Z1s1pvF+25/NlsyoMy6GUyJRupBI6IkQgt+/nLRI4Eb3wZ2VNAJkp1niIFaZ5syRh8ZEa2xNwFXg3mMkqBcpHC0lNrTcA0SGwcOecAsnquk87nx9TYD852NGcc1v4UzOoGqpEIukTG1gyGs4+NGCkWKaydgazT3WcMoxnbYUH0FMj6Bo6AMpQWMpxhmDLkUoqRcpnC4hnQSu190m406Svp2CftXKAymkiAbKKz/BjTvmmwbChnhwEQS59ioiVE7yNmNgpbDyVYg6mLxmHMbT054U1/uJSoNhyd6D5gP34rC8/RZ4AJHkJY2z01DkmXCFjac5mUN63hUqTebVSy+4hxNGLJf56AWN8+NRFJmQgZhildNqUQKVap93+d8D7l8N/v1xYMUMkhLe9iao5xX3a/FpFIgdazxTJaB4YDMznIGWGXCUofPOKpiyFjrXJGrfnrjxOd7D7jePfdmp6CWNs9NQ7BBUW+kq/KGdXurz5PVKL7fOn+e3V4CmD92akHIigTGUu2KqdUm/+IE14lvE+Z775Tk+tTBhOI05LpNE6fYL7uTi0SkQIhNQLTgxghdc57sLm3FhDSn8CyazI7z+B8btfJGbXOoLYanerBO5DxL7uuHqTwOWJ6zB9kbfvUPKQNIiOWNl0mp9Ya9G6j0j2APP5N15UB3djHD4Ks758aiWStMmbpupzJKUTeeQLolHec58d/4r6KJw=='
// zip_geojson_string = 'eJzNWEuL4kAY/CshZ236/djrwp7nLh5Es4PgTiSbOYj436ejzCFJNdTgIZ6ETlndVSX1tbnW/eXc1L+q+k+z6z+75nd7OjX7/th+1Kuq/vtY/J8Bm2t9PAxAOTyYfGtYOnftuen64x19rfftqe0GSNcchsfd7nD8HB5ZKeUtL7w37b+m7y539DffW3u6vD/23rdtdzh+7PrH9pvNOjgVhbTGaSmtjDKuqrW31gttfXDSKG9U2K4qjFRRB2GtdcmHlIzS9g41E2haVTYqkZy3GeaSiikNwNlikRIh8THB3usYnBP5y5laBht1Uc+ccru9ZWO/c1JL5UTr/4GlU2ghpDhZLeeOkPiQ861hRpzqcUR6qYho9byh+WMM9YWMlJ8DS5wICs+JdocxccrHMZmlYvqBft5ULcmg9PSnb8qcCAoPinaHQZHax0nZxWYTO0YQ0CkpRXDRG2ODV8m6QqEEq6RQLgUltbE+lQqqQEiWKF/LnOpxRG6xscTKZ/0EVQIDQt2EGekO5WuZUj1OyC9Wd/QI4R0FLQJDmvWSKVEi5NODjlI+jim80j0ceoqASksdRfJZosmPg1SlIlHWmCiM18nKnES2vVBOmJKtT76QOd3jkOILXcLx9KD9nBcJTgh0E2Zk+5MfcIzmcT7phW7gUDztJqoQHBDqpQIn2558IVO6J39kF3vjwOunLUX3XxwTulMXOAGSG3JPzs1JTou9ceDHB0TG5IJQ3skM1UGXxodW2nvhvM++h+hCsRYhH1ufdCGToicZLfbKgTeAdBQ0CUwIFiMi5BuULmVO9CSi5V438COE9hT0CEwJ3aohIwQ+O+c44UNO29sXVJ6T1w=='
// 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.
