Public
Edited
Aug 14, 2024
1 fork
selectState(selectedState)
deckgl = new deck.DeckGL({
container,
layers: [layer],
initialViewState: {
latitude: 40,
longitude: -100,
zoom: 3,
pitch: 0,
bearing: 0
},
views: [view],
getTooltip: ({ object }) => {
if (object) {
// Assuming your GeoJSON properties include a 'name' field for state names
return {
html: `<strong>${object.properties.name}</strong>`,
style: {
backgroundColor: "#000000",
fontSize: "1.2em"
}
};
}
return null;
},
getCursor: ({ isDragging }) => (isDragging ? "grabbing" : "default")
})
layer = new deck.GeoJsonLayer({
id: "counties",
data: states,
pickable: true,
stroked: true,
filled: true,
extruded: false,
wireframe: true,
lineWidthScale: 20,
lineWidthMinPixels: 2,
getFillColor: (d, i) => {
const { r, g, b, a } = d3.color(colorScale(i.index)) ?? {
r: 0,
g: 0,
b: 0,
a: 255
};
return [r, g, b, a];
},
getLineColor: [255, 255, 255],
getLineWidth: 1,
autoHighlight: true,
highlightColor: [255, 255, 0, 100] // Yellow highlight with some transparency
})
colorScale = d3.scaleSequential(d3[`interpolate${colorScheme}`]).domain([0, 50])
view = new deck.MapView({repeat: true})
import { colorSchemes, colorSchemeOrInterpolate } from "cbf6047da8d9fe17"
counties = FileAttachment("counties.json").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.
