Skip to main content
SimilarExport ZIP
100%

Multiple Views with Fast Brushing

✓ Published0🌍 Public
JJoe Hutchins
Last edited Mar 1, 2022
Created on Feb 28, 2022

This example shows a world map of migrant deaths and disappearances from 2014 to 2022, overlaid with a brushing timeline. A geographic map displays circles scaled by the total dead and missing, while a histogram below shows counts over time. Brushing the histogram filters the map’s circles in real time, using React’s `useMemo` for performance. Built with D3 v7, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for mapping, while the histogram uses `scaleTime`, `bin`, and `brushX` for interactive filtering.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

Country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

This iteration is optimized for performance using React's useMemo hook.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Views with Fast Brushing

A world map displays migrant deaths and missing persons by location, with circle size scaled to the count. A synchronized date histogram below supports brush selection, filtering the map’s circles in real time. Built with React, D3 v5, and SVG, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `useMemo` for performance. Data comes from the Missing Migrants Project and World Atlas TopoJSON.

Mmkt-ds
94% match
Loading thumbnail…

Multiple Views with Fast Brushing

This visualization combines a world map and a time-series bar chart to explore migrant deaths and disappearances. Users brush a date range on the histogram to filter the map’s circle markers, which scale by the number of casualties. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for landmasses, while the histogram bins monthly totals via `d3.bin` and `brushX`. Data comes from a CSV of global missing migrant incidents, rendered with React and D3 v5.

SSong Tao Chen
93% match
Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a time-series histogram to visualize migrant deaths. The map uses a natural Earth projection with graticules and land outlines, while circles sized by square-root scaling represent the dead and missing. The histogram bins the same data by date, and its interactive brush selection filters the map's circles, demonstrating linked views. The visualization uses React components, D3’s `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `bin`, and `brushX` for the interaction, with data sourced from a CSV of missing migrants.

KKai Stewart
93% match
Loading thumbnail…

Multiple Views with Brushing Faster

A world map displays migrant fatalities with scaled circles, while a time-series histogram below shows monthly death counts. Brushing across the histogram filters the map’s circles to the selected date range. The visualization uses React with D3 v5 for `geoNaturalEarth1` projection, `geoPath`, `scaleSqrt`, `brushX`, and `bin` APIs. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Ttharuta
93% match
Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a world map and a time series histogram to explore migrant deaths and disappearances. The map displays circles sized by death counts using d3.geoNaturalEarth1 and d3.geoPath, while the histogram aggregates monthly totals with d3.histogram. Brushing on the histogram filters the map’s data through a brushX interaction, updating the circles in real time. The data comes from the Missing Migrants Project CSV, rendered as SVG within a React framework.

Nnkohdatavis
92% match
Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a timeline to visualize migration incidents, using brushing to link the two views. The map displays circles sized by the total dead and missing, while the histogram below shows monthly totals. Dragging a brush on the histogram filters the map to show only incidents within the selected time range. The visualization uses React for components, d3.geoNaturalEarth1 and d3.geoPath for the map, d3.brushX for interaction, and d3.bin for histogram binning, drawing with SVG.

Mmkt-ds
92% match
Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrants, with circles sized by total dead and missing, alongside a time histogram of the same data. Brushing on the histogram filters the map to show only incidents within the selected date range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `d3.bin` for histogram binning. Data comes from the Missing Migrants Project, rendered as SVG.

Jjwlam83
92% match
Loading thumbnail…

Multiple Views with Brushing

A world map displays the locations and magnitudes of missing migrant incidents, sized by total dead and missing. A temporal bar chart below shows the corresponding monthly counts over time. Brushing a time range in the histogram filters the map’s circles to only incidents within that period. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas data, while the histogram uses `d3.bin`, `d3.scaleTime`, and `d3.brushX`, all rendered as SVG via React.

Zzyniax
92% match