I am a Data Visualization and UI developer. Focusing on creating SPA using React, Redux, D3.js and Jest . I also do data projects when I have time.
Public
Edited
May 29, 2024
1 fork
2 stars
deck = require('deck.gl@6.2.3/deckgl.min.js')
mapboxgl = require('mapbox-gl@~0.50.0/dist/mapbox-gl.js')
d3 = require('d3')
nycRoadAccidents = d3.csv('https://raw.githubusercontent.com/nharrisanalyst/deckgl_sacjs/master/NYPD_Motor_crashes.csv', d=>({
lat: +d.LATITUDE,
long: +d.LONGITUDE,
}))
deckgl = {
const container = html`<div style="height:500px;">`;
yield container;
new deck.DeckGL({
// The HTML container to render into
container,
// Mapbox settings
// set `map: false` to turn off Mapbox base map
map: mapboxgl,
// This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com
mapboxApiAccessToken: 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA',
mapStyle: 'mapbox://styles/mapbox/dark-v9',
// Viewport settings
longitude: -73.9712,
latitude: 40.7831,
zoom: 11,
pitch: 30,
bearing: -30,
layers: [hexegonLayer()]
});
}
scatterPlot = () => new deck.ScatterplotLayer({
data:nycRoadAccidents,
getColor:[255, 0, 0],
getPosition: d => [d.long,d.lat],
radiusScale:10,
})
hexegonLayer = () => new deck.HexagonLayer({
data:nycRoadAccidents,
upperPercentile:99,
pickable: true,
extruded: true,
radius: 200,
elevationScale: 4,
getPosition: d => [d.long,d.lat],
onHover: ({object, x, y}) => {
const tooltip = `${object.centroid.join(', ')}\nCount: ${object.points.length}`;
},
})
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.
