in examples/website/brushing/app.js [116:191]
export default function App({
data,
enableBrushing = true,
brushRadius = 100000,
strokeWidth = 2,
opacity = 0.7,
mapStyle = 'mapbox://styles/mapbox/light-v9'
}) {
const {arcs, targets, sources} = useMemo(() => getLayerData(data), [data]);
const layers = arcs &&
targets && [
new ScatterplotLayer({
id: 'sources',
data: sources,
brushingRadius: brushRadius,
brushingEnabled: enableBrushing,
// only show source points when brushing
radiusScale: enableBrushing ? 3000 : 0,
getFillColor: d => (d.gain > 0 ? TARGET_COLOR : SOURCE_COLOR),
extensions: [brushingExtension]
}),
new ScatterplotLayer({
id: 'targets-ring',
data: targets,
brushingRadius: brushRadius,
lineWidthMinPixels: 2,
stroked: true,
filled: false,
brushingEnabled: enableBrushing,
// only show rings when brushing
radiusScale: enableBrushing ? 4000 : 0,
getLineColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR),
extensions: [brushingExtension]
}),
new ScatterplotLayer({
id: 'targets',
data: targets,
brushingRadius: brushRadius,
brushingEnabled: enableBrushing,
pickable: true,
radiusScale: 3000,
getFillColor: d => (d.net > 0 ? TARGET_COLOR : SOURCE_COLOR),
extensions: [brushingExtension]
}),
new ArcLayer({
id: 'arc',
data: arcs,
getWidth: strokeWidth,
opacity,
brushingRadius: brushRadius,
brushingEnabled: enableBrushing,
getSourcePosition: d => d.source,
getTargetPosition: d => d.target,
getSourceColor: SOURCE_COLOR,
getTargetColor: TARGET_COLOR,
extensions: [brushingExtension]
})
];
return (
<DeckGL
layers={layers}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
getTooltip={getTooltip}
>
<StaticMap
reuseMaps
mapStyle={mapStyle}
preventStyleDiffing={true}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
</DeckGL>
);
}