Skip to main content
SimilarExport ZIP
100%

Multiple Views with Brushing - Faster

✓ Published0🌍 Public
RRMartins11
Last edited May 5, 2021
Created on May 5, 2021

Brushing a time-series histogram filters a world map of migrant disappearance incidents, with circles sized by the square-root-scaled death toll. The React app uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for map projections, while `d3.scaleTime`, `d3.histogram`, and `d3.brushX` handle temporal binning and selection. Data comes from a CSV of Missing Migrants records, rendered as SVG with `useMemo` to cache computations.

AI-generated description

Fork of The World Map, with optimization improvements to make it faster. Uses mostly useMemo hook by React to do these optimizations

MIT Licensed

Similar vizzes

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
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

A world map displays circles sized by the total number of dead and missing migrants, with a linked time-series histogram below showing monthly totals. Brushing a date range on the histogram filters the map circles to only those incidents within that period. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for interactive selection, and `d3.bin` with `d3.timeMonths` for histogram binning. Data comes from a CSV of global missing migrants, rendered as SVG.

Wwindwaver
93% match
Loading thumbnail…

Multiple Views with Brushing

This example pairs a natural Earth bubble map with a time-series histogram, both rendered as SVG, to visualize global migrant deaths and disappearances. Brushing on the histogram filters the map’s circles in real time, showing only incidents within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projections and country boundaries from TopoJSON, while the histogram aggregates monthly totals with `d3.bin` and `d3.sum`. Data comes from the Missing Migrants Project, with circle sizing scaled by `d3.scaleSqrt`. React manages state, and D3’s `brushX` drives the interactive filtering.

ZZG
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

Two synchronized views explore migrant deaths and disappearances: a bubble map using a natural Earth projection and a time-series histogram. Brushing a time range in the histogram filters the map’s circles, which are scaled by the square root of the total dead and missing. The React app uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, and `d3.brushX`, with country boundaries from World Atlas TopoJSON and city data from Simplemaps. SVG rendering shows graticules, landmasses, and interactive months.

XXiaoleiGuo
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
93% match
Loading thumbnail…

Multiple Views with Brushing

A world map displays missing migrant incidents as semi-transparent bubbles, with a linked time-series histogram beneath it showing monthly death tolls. Brushing a time range in the histogram filters the map to show only incidents within that period. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for the map, `brushX` for interactive selection, and `histogram` with `timeMonths` for binning. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Ttharuta
93% match