Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
Public
Edited
Jul 14, 2024
2 stars
deck.gl | population density map of South Koreathree.js | Physics basicthree.js | Shader (galaxy)three.js | Shader patternsthree.js | Shader (Sea)three.js | Shader basicdeck.gl | LineLayer + Tooltipdeck.gl | TripsLayer + Animationthree.js | FontLoaderthree.js | Camera animationthree.js | GLTFLoaderthree.js | OrbitControls
deck.gl | HexagonLayer + Camera Animation
Also listed in…
Big data visualization
update = (city) => {
const cityData = cities.filter((d) => d.name === city)[0];
deckgl.setProps({
initialViewState: {
longitude: cityData.longitude,
latitude: cityData.latitude,
zoom: cityData.zoom,
pitch: 40.5,
bearing: -27,
transitionDuration: 3000,
transitionInterpolator: new deck.FlyToInterpolator(),
transitionEasing: d3.easeSinInOut
}
});
}
deckgl = {
return new deck.DeckGL({
container,
layers,
initialViewState: viewState,
controller: true
})
}
colorRange = {
return [
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
];
}
layers = [
new deck.GeoJsonLayer({
id: "base-world",
data: worldUrl,
stroked: true,
filled: true,
lineWidthMinPixels: 0.5,
getLineColor: [8, 17, 29],
getFillColor: [8, 17, 29] // Land color
}),
new deck.HexagonLayer({
id: "heatmap",
colorRange,
data,
elevationRange: [0, 3000],
elevationScale: data && data.length ? 50 : 0,
extruded: true,
getPosition: (d) => [d.lng, d.lat],
radius: 500, // 1000
upperPercentile: 100,
pickable: true,
opacity: 1,
material,
lightSettings,
transitions: {
elevationScale: 3000
}
})
]
lightSettings = {
return {
lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
ambientRatio: 0.4,
diffuseRatio: 0.6,
specularRatio: 0.2,
lightsStrength: [0.8, 0.0, 0.8, 0.0],
numberOfLights: 2
};
}
viewState = ({
longitude: -1.415727,
latitude: 52.232395,
zoom: 6,
minZoom: 3,
maxZoom: 6,
pitch: 40.5,
bearing: -27
})
material = ({
ambient: 0.64,
diffuse: 0.6,
shininess: 32,
specularColor: [51, 51, 51]
// specularColor: [255, 255, 255]
})
data = await d3.csv(dataUrl, d3.autoType)
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.
