view_type
container = html `<div style="height:${height}px; border-style:solid; border-color:#d3d3d3; border-width:1px"></div>`
dashboard = html`
<div style="display: flex;">
<div style="margin-left: 15px; margin-right: -30px; border:1px; text-align:right;">${viewof view_type} </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>
`
//
// <div style="margin-right: 15px; border:1px; text-align:right;">${viewof select_meta} </div>
ini_view_type = '3D'
view_type
scale_z = 15
cat_colors = ({
'dog': 'blue',
'elephant': 'purple',
'tiger': 'orange'
})
cell_colors = ({
'neuron': 'blue',
'immune': 'purple',
'other': 'orange'
})
viewof view_type = {
const element = html`
<div style="display: inline-block; user-select: none;"></div>`;
d3.select(element)
.selectAll('div')
.data(['2D', '3D'])
.join('span')
.style('min-width', '200px')
.style('max-width', '200px')
.style('margin-right', '10px')
.text(d => d)
.style('font-weight', '550px')
.style("font-family", "sans-serif")
.style("font-size", "16")
.style("text-anchor", "end")
.style('font-weight', 'bold')
.style('color', d => d === ini_view_type ? 'blue': '#808080')
.on('click', function(d){
d3.select(element).selectAll('span')
.style('color', '#808080')
d3.select(this)
.style('color', 'blue')
element.value = d.replace(', ', '')
element.dispatchEvent(new CustomEvent("input"));
})
element.value = ini_view_type
element.dispatchEvent(new CustomEvent("input"))
return element
}
height = 700
5*15-5
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}]
// image = FileAttachment("image_string.txt").text()
// image
// blue square image
image = '"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAHUlEQVR4nGNkYPjPQC5gIlvnqOZRzaOaRzVTRTMAIJ4BJ6WiocQAAAAASUVORK5CYII="'
image_proc = image.slice(1,-1)
// 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 zlayer = Inputs.checkbox([0,1,2,3,4,5,6],{
label : "Z-level",
value : [0,1,2,3,4,5,6]})
scatter_data.filter(item => zlayer.includes(item.z))
scatter_data
filtered_scatter_data = scatter_data.filter(item => item.partition === 1)
{
const 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,
});
var opacity_255 = d3.scaleLinear().domain([0, 1]).range([0, 255])
const 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
},
});
const 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
},
})
const pointcloud_layer = new deck.PointCloudLayer({
id: 'pointcloud_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, scale_z * d.z]
},
getColor: 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,
pointSize:2,
sizeUnits:'meters',
// autoHighlight: true,
highlightColor: d => [50, 50, 50],
radiusMinPixels: radius_min_pixels,
updateTriggers: {
getFillColor: [polygon_opacity]
// getFillColor: select_meta,
// getPosition: map_type
},
})
const bitmap_layer = new deck.BitmapLayer({
id: 'bitmap_layer',
bounds:image_bounds,
image:image_proc
});
// deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_layer]});
if (view_type === '3D'){
deckgl.setProps({layers: [bitmap_layer, polygon_layer3d, pointcloud_layer]});
} else {
deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_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 = {
// // // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
// // // This is an Observable hack: clear previously generated content
// container.innerHTML = '';
if (view_type == '3D'){
var view = new deck.OrbitView({id: 'ortho'})
var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D
} else {
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,
getTooltip: ({object}) => {
return object && ` ${object.name} <br> ${object.cell_type}
`},
});
}
INITIAL_VIEW_STATE_2D = ({
target: [center_x, center_y, 0],
zoom: zoom,
minZoom:min_zoom,
})
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
view_type
d3 = require("d3@5")
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.
