Skip to main content
SimilarExport ZIP
100%

Fast Brushing

✓ Published0🌍 Public
SShantanu
Last edited May 21, 2021
Created on May 21, 2021

This visualization combines a world map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the histogram to filter the map’s bubbles, which represent the total dead and missing per location, illustrating the geographic distribution of events within a selected time window. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules, while the histogram uses d3.bin and d3.brushX. React’s useMemo optimizes rendering performance, with city data from Simplemaps and country boundaries from World Atlas TopoJSON.

AI-generated description

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

Fast brushing using -> memoization -> useMemo

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…

Optimized Brushing

This visualization displays migrant deaths and missing persons worldwide on a natural Earth projection map, with bubble sizes scaled by the square root of the total dead and missing count. A linked histogram below shows the same data binned by month, and users can brush across the histogram to filter the map’s bubbles in real time. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, `brushX` for the brushing interaction, and `useMemo` to optimize rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

SShantanu
91% match
Loading thumbnail…

Multiple Views with Fast Brushing

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.

JJoe Hutchins
91% match
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map and time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by total dead and missing using a square-root scale, while the histogram shows monthly totals. Brushing the histogram filters the map’s circles in real time via React state and d3.brushX. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules from the World Atlas TopoJSON, with data from the Missing Migrants Project. React’s useMemo optimizes rendering of both static geographic features and dynamic data updates.

Hhenry c
91% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and missing persons. Brushing on the histogram filters the map’s circles in real time, showing incidents within the selected date range. The map uses a natural Earth projection via d3.geoNaturalEarth1, while the histogram bins monthly totals with d3.histogram and handles brushing through d3.brushX. React’s useMemo optimizes rendering, and data comes from the Missing Migrants Project CSV, loaded with d3.csv.

CCurran Kelleher
90% 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
90% match
Loading thumbnail…

brushing migrant data on a map

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. Users brush over the histogram to filter the map, which displays circles scaled by the total dead and missing per location. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while the histogram leverages d3.bin and d3.brushX. Data comes from a CSV of Missing Migrants Global records, rendered with React and SVG.

BBlake McCarty
90% match
Loading thumbnail…

Optimize Multiple view with brushing

This interactive visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances in 2019. Users brush the histogram to filter the map, which displays circles sized by total dead and missing per location using d3.scaleSqrt. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule over a TopoJSON world atlas, while the histogram bins data by month with d3.histogram. Brushing is implemented with d3.brushX, and the React app manages state for the brush extent.

SShuyu Zheng
90% match
Loading thumbnail…

Brush Missing Migrants

This interactive visualization shows global migrant deaths and disappearances, combining a world map with a time-series histogram. Users can brush over the histogram to filter the map, dynamically revealing incidents within a selected date range. The project uses React for state management, D3 v5 for map projections (`geoNaturalEarth1`), the `topojson` library for world atlas data, and D3's `brushX` for the brushing interaction. The rendered map and histogram are built with SVG elements, and the world atlas is sourced from the `world-atlas` package.

Ssophievanderhorst
90% match