// selectState(selectedState)
deckgl = new deck.DeckGL({
container,
layers: [
new TopoJSONLayer({
id: "topojson-layer",
data: counties10m,
topologyObject: "counties",
pickable: true,
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]
})
],
initialViewState: {
target: [0, 0, 0],
zoom: 1
},
views: new deck.MapView()
})
class TopoJSONLayer extends deck.CompositeLayer {
static layerName = "TopoJSONLayer";
static defaultProps = {
...deck.GeoJsonLayer.defaultProps,
topologyObject: null,
preProcessTopology: { type: "function", value: null, optional: true }
};
updateState({ props, oldProps, changeFlags }) {
super.updateState({ props, oldProps, changeFlags });
if (
changeFlags.dataChanged ||
props.topologyObject !== oldProps.topologyObject
) {
const { data, topologyObject, preProcessTopology } = props;
if (!data) {
this.setState({ geojson: null });
return;
}
let topology = data;
if (preProcessTopology) {
topology = preProcessTopology(topology);
}
const objectName =
topologyObject || this._selectDefaultTopologyObject(topology);
const geojson = topojson.feature(topology, topology.objects[objectName]);
this.setState({ geojson });
}
}
_selectDefaultTopologyObject(topology) {
const objects = Object.keys(topology.objects);
if (objects.length === 0) {
throw new Error("TopoJSON data contains no objects");
}
return objects[0];
}
renderLayers() {
const { geojson } = this.state;
if (!geojson) return null;
return new deck.GeoJsonLayer(
this.getSubLayerProps({
id: "geojson",
data: geojson,
// Forward all other props to GeoJsonLayer
...this.props
})
);
}
}
// 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})
counties10m = FileAttachment("counties-10m@1.json").json()
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.
