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>
<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': 'red'
})
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
tmp = 'something'
polygon_data = [
{
'name': 'something',
'coordinates': [[0,1], [1,1], [2,2]],
'z': 0
},
{
'name': 'something',
'coordinates': [[10,11], [10,10], [12,12]],
'z': 1
}
]
scatter_data = [{'name': 'dog', 'x': 0, 'y': 1, 'z': 1},
{'name': 'elephant', 'x': 2, 'y': 2, 'z': 2}]
// 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
{
const polygon_layer = new deck.PolygonLayer({
id: 'polygon_layer',
data: polygon_data,
getFillColor: [250, 0, 0],
getLineColor: [250, 0, 0],
getLineWidth: d => poly_line_width,
getPolygon: d => d.coordinates,
stroked: true,
filled: false,
wireframe: true,
pickable: true,
// opacity: rescue_opacity
});
const scatter_layer = new deck.ScatterplotLayer({
id: 'scatter_layer',
data: scatter_data,
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: scatter_data,
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: 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_layer, 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
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
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}
`},
});
}
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.
