Notebooks 2.0 is here.
deckgl_map = {
// // Default View
// //////////////////////////////////
// var deckgl = new deck.DeckGL({
// container,
// mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
// initialViewState: {
// longitude: lng,
// latitude: lat,
// zoom: 11,
// maxZoom: 21,
// bearing: 0
// },
// controller: true,
// });
// Orthographic View
// //////////////////////////////////
const view = new deck.OrthographicView({id: 'ortho'})
// const view = new deck.OrbitView({id: 'ortho'})
var INITIAL_VIEW_STATE = ({
target: [lng, lat, 0],
zoom: 10
})
var deckgl = new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
getTooltip: ({object}) => {
return object && ` ${object.x}, ${object['y']}
`},
});
return deckgl
}
{
// const pathLayer = new deck.PathLayer({
// id: 'PathLayer',
// data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-lines.json',
// /* props from PathLayer class */
// // billboard: false,
// getColor: d => {
// const hex = d.color;
// // convert to RGB
// return hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16));
// },
// getPath: d => d.path,
// getWidth: d => 5,
// // miterLimit: 4,
// // rounded: false,
// // widthMaxPixels: Number.MAX_SAFE_INTEGER,
// widthMinPixels: 2,
// widthScale: 20,
// // widthUnits: 'meters',
// /* props inherited from Layer class */
// // autoHighlight: false,
// // coordinateOrigin: [0, 0, 0],
// // coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
// // highlightColor: [0, 0, 128, 128],
// // modelMatrix: null,
// // opacity: 1,
// parameters: {
// depthMask: false
// },
// pickable: true,
// // visible: true,
// // wrapLongitude: false,
// });
const lineLayer = new deck.LineLayer({
id: 'LineLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json',
/* props from LineLayer class */
getColor: d => [Math.sqrt(d.inbound + d.outbound), 140, 0],
getSourcePosition: d => d.from.coordinates,
getTargetPosition: d => d.to.coordinates,
getWidth: 2,
// widthMaxPixels: 12,
// widthMinPixels: 0,
// widthScale: 1,
// widthUnits: 'pixels',
/* props inherited from Layer class */
// autoHighlight: false,
// coordinateOrigin: [0, 0, 0],
// coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
// highlightColor: [0, 0, 128, 128],
// modelMatrix: null,
// opacity: 1,
pickable: true,
// visible: true,
// wrapLongitude: false,
});
deckgl_map.setProps({layers: [lineLayer]});
}
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.3.7/dist.min.js')
height = 500
lat = 37.74
lng = -122.4
polygon_map_data = polygon_map_data_ini.features.map(x => ({'contour': x.geometry.coordinates[0]}) )
polygon_map_data_ini = JSON.parse(map_response.body)
map_response = {
const response = await fetch(polygon_map_url);
return {
ok: response.ok,
body: await response.text()
};
}
// polygon_map_url = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json'
polygon_map_url = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json"
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.
