Published
Edited
Sep 25, 2021
container = html `<div style="height:${height}px"></div>`
cors_anywhere = 'https://cors-anywhere.herokuapp.com/'
slice_info = '100960033?groups=28'
// slice_info = '100960081?groups=28'
//slice_info = '100960176?groups=28'
svg_url = cors_anywhere + 'http://api.brain-map.org/api/v2/svg_download/' + slice_info
d3 = require("d3@5")
svg_data = d3.svg(svg_url)
svg_data
// path = svg_data.getElementById("180638373").querySelector('path')
path_list = d3.select(svg_data)
.selectAll('path')
._groups[0]
path = path_list[10]
inst_id = d3.select(path).attr('id')
d3.select(path).attr('style').split('fill:')[1]
path_array = Array.from(path_list)
polygon_data = path_array.map(x => get_coords('something', x))
numSamples = 1000
scale_down = 100
polygon_data[0]
function get_coords(name, path){
var path_length = path.getTotalLength()
var step = Math.ceil(path_length / numSamples)
let points = [];
for (let i = 0; i < numSamples; i++) {
let point = path.getPointAtLength(i * step);
// points.push({ x: point.x, y: point.y });
points.push([point.x/scale_down, point.y/scale_down]);
}
var color = d3.select(path).attr('style').split('fill:')[1]
var structure_id = d3.select(path).attr('structure_id')
var coords = {
'name': name,
'coordinates': points,
'color': color,
'structure_id': structure_id
}
return coords
}
// coords = get_coords('something', path)
// polygon_data = ([
// coords
// ])
polygon_data
// data = points
{
const polygonLayer = new deck.PolygonLayer({
id: 'PolygonLayer',
data: polygon_data,
getFillColor: [250, 0, 0, 50],
getLineColor: [250, 0, 0, 50],
getLineWidth: d => 0.1,
getPolygon: d => d.coordinates,
stroked: true,
filled: true,
wireframe: true,
pickable: true,
// opacity: rescue_opacity
});
deckgl.setProps({layers: [polygonLayer]});
}
INITIAL_VIEW_STATE = ({
target: [2, 10, 0],
zoom: 2
})
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
deckgl = {
// // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
// // This is an Observable hack: clear previously generated content
container.innerHTML = '';
const view = new deck.OrthographicView({id: 'ortho'})
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({object}) => {
return object && ` ${object.name}
`},
});
}
height = 850
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.
