Multiple Views with Brushing

100%

Multiple Views with Brushing - Working

✓ Published1🌍 Public

Last edited May 5, 2021

Created on May 5, 2021

Forked from Multiple Views with Brushing

This example displays migration incidents on a world map with bubble markers sized by the total number of dead and missing, alongside a time-series histogram of the same metric. A brushable time range on the histogram filters the map’s bubbles to show only incidents within the selected period, demonstrating linked views. The visualization uses React, D3 version 5, and SVG rendering, with `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for brushing, and data from the Missing Migrants Project.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

This example shows a world map of missing migrant incidents, with bubbles sized by the total number of dead and missing. A time-series histogram below the map displays the same data binned by month. Brushing the histogram filters the map’s bubbles in real time. The visualization uses React for the component structure and `d3.geoNaturalEarth1` with `d3.geoPath` for the map, alongside `d3.brushX` and `d3.scaleTime` for the interactive filtering.

Ee-ines

95% match

Loading thumbnail…

Multiple Views With Brushing

This example shows a world map with bubbles representing missing migrants, sized by the total number of dead and missing, alongside a date histogram of the same data. Brushing the histogram filters the map to show only incidents within the selected time range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.brushX`, `d3.histogram`, `d3.scaleSqrt`, and `d3.scaleTime`. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`, and renders as SVG.

Rrstrauss127

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

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

94% match

Loading thumbnail…

Multiple Views with Brushing

This example combines a geographic bubble map with a time-series histogram, linked through interactive brushing. The map displays the total number of dead and missing migrants by location, with circle sizes scaled using d3.scaleSqrt, while the histogram aggregates the same data by month using d3.bin and d3.timeMonths. Dragging a brush across the histogram filters the map’s circles to show only incidents within the selected date range, implemented with d3.brushX and React state. Both views use SVG rendering via d3.geoNaturalEarth1 and d3.geoPath for the map, with data sourced from the Missing Migrants Project CSV.

BBen Seebeck

93% match

Loading thumbnail…

Multiple Views with Brushing

This example shows a world map with bubble markers indicating the total number of dead and missing migrants, alongside a time-series histogram of the same data. Brushing a date range in the histogram filters the bubbles shown on the map. The visualization uses React state to manage the brush selection, D3’s `geoNaturalEarth1` projection and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `brushX` for interactive filtering. Data comes from a CSV of migrant incidents loaded via `d3.csv`.

NNikita Toropov

93% match

Loading thumbnail…

Multiple Views with Brushing

This example combines a world map of migration incidents with a time-series histogram below it. Brushing on the histogram filters the map’s circles, which scale by the total dead and missing. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas land and graticules, while the histogram bins `d3.timeMonths` and sums values. Data comes from the Missing Migrants Project CSV, rendered as SVG via React with D3 scales.

Yyuzhang21

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