select_gene
gene_options = ['none'].concat(Object.keys(gene_colors))
viewof select_gene_dropdown = select({'options':gene_options, value: 'none'})
mutable select_gene = select_gene_dropdown
transcript_data.map(x => x.name).filter((v, i, a) => a.indexOf(v) === i)
gene_colors = ({'Ddr1': 'purple',
'Glp2r': 'blue',
'Gpr182': 'blue',
'Sstr4': 'orange',
'Th': 'green',
'Trhr': 'red'})
transcript_data_ini = JSON.parse(decode_zipped_string(zip_string))
zip_string = FileAttachment("transcripts_zip_string@1.txt").text()
pako = require('pako/dist/pako.min.js')
container = html `<div style="height:${height}px; border-style:solid; border-color:#d3d3d3; border-width:1px"></div>`
transcript_data = transcript_data_ini.map(d => {
var inst_color_name = gene_colors[d.name]
var rgb = d3.color(inst_color_name)
var inst_color = [rgb.r, rgb.g, rgb.b] // 255
var new_obj = ({
'': d[''],
'name': d.name,
'position': eval(d.position),
'color': inst_color
})
return new_obj
})
// transcript_data = transcript_data_ini
radius = 0.5
radius_min_pixels = 1.5
transitionDuration = 3000
transitions = ({
getPosition: {
duration:transitionDuration,
easing: d3.easeCubic
}
})
rgb = d3.color('red')
inst_color = [rgb.r, rgb.g, rgb.b, 255]
Object.keys(gene_colors)
select_gene
transcript_layer = new deck.ScatterplotLayer({
id: 'transcript_layer',
data: transcript_data,
pickable: is_pickable,
getPosition: d => d.position,
getFillColor: d => {
var inst_color
var unselected_color = [0, 0, 0, 0]
// allow transcript color filtering
if (select_gene === 'none'){
inst_color = d.color
} else {
inst_color = unselected_color
// check gene name
if (d.name === select_gene){
inst_color = d.color
}
}
return inst_color
},
getRadius: transcript_radius,
radiusMinPixels: transcript_radius,
pickable: true,
opacity: transcript_opacity,
visible: visible_transcripts,
updateTriggers: {
getFillColor: 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'
}
}
})
mutable visible_transcripts = true
select_gene
// mutable select_gene = 'none'
layers = [transcript_layer]
is_pickable = true
deckgl.setProps({layers: layers});
view = new deck.OrthographicView({id: 'ortho'})
function ini_deckgl(container){
var deckgl =
new deck.DeckGL({
container,
views:[view],
initialViewState: initial_view_state,
controller: {doubleClickZoom: false},
// getTooltip: ({object}) => {
// return object &&
// `${object['name']}`
// // `pos: ${object.x}, ${object['y']}\n`
// },
getTooltip: ({object}) => object && {
html: `${object.name}`,
style: {
fontSize: '0.8em',
padding: '5px',
}
},
// onViewStateChange: ({viewState}) => {
// debounced_something(viewState)
// return viewState
// },
// onClick: ({info}) => {
// console.log(info)
// return info
// }
});
return deckgl
}
deckgl = ini_deckgl(container)
// d3.max(transcript_data,
mean_x = d3.mean(transcript_data.map(x => x['position'][0]))
mean_y = d3.mean(transcript_data.map(x => x['position'][1]))
min_zoom = -5
zoom = -3.5
initial_view_state = ({
target: [mean_x, mean_y, 0],
zoom: zoom,
minZoom: min_zoom,
maxZoom:10
})
height = 800
detail_zoom_thresh = 1.25
visible_transcripts
mutable fovs = []
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
}
Requirements
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
import {select} from '@jashkenas/inputs'
viewof transcript_radius = slider({
value: 0.75,
min: 0.1,
max: 2.0,
precision: 2,
description: "transcript size"
})
viewof transcript_opacity = slider({
value: 0.75,
min: 0.0,
max: 1.0,
precision: 2,
description: "transcript opacity"
})
d3 = require("d3@5")
import {slider} from "@jashkenas/inputs"
deck
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.
