Multiple Views with Brushing

100%

Multiple Views with Brushing

✓ Published0🌍 Public

Last edited Mar 28, 2021

Created on Mar 28, 2021

This example demonstrates linked brushing between a world bubble map and a time-series histogram, both rendered as SVG in React. The map plots migrant deaths and missing persons by location with circle radii scaled by d3.scaleSqrt, while the histogram aggregates the same metric monthly using d3.bin and d3.timeMonths. Brushing the histogram with d3.brushX filters the map’s displayed circles in real time. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map projection, and loads data from a CSV of the Missing Migrants Global 2019 subset.

AI-generated description

A scatter plot of Data Canvas Sense Yout City Dataset

MIT Licensed

Similar vizzes

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

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

96% 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 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 combines a bubble map and a date histogram to explore the Missing Migrants Dataset. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from World Atlas TopoJSON, with circle size scaled by the square root of deaths. The histogram below aggregates monthly totals using `d3.bin` and `d3.timeMonths`. Brushing the histogram with `d3.brushX` filters the map’s circles by date range, demonstrating linked views through React state.

Kkrandslam

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

94% match

Loading thumbnail…

Multiple Views with Brushing

This example presents a world map with bubbles representing the total number of dead and missing migrants, sourced from a CSV dataset. A time-series histogram below the map aggregates the same data by month. Brushing along the histogram’s x-axis with `d3.brushX` filters the map’s circles in real-time. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic shapes, while React manages the SVG rendering. A sqrt scale determines bubble sizes, and country boundaries come from a TopoJSON world atlas.

Mmtabaka

94% match

Loading thumbnail…

Multiple Views with Brushing

This example combines a world map and a time-series histogram to visualize migrant deaths. Brushing a time range in the histogram filters the map’s bubble markers, which use d3.scaleSqrt for sizing and d3.geoNaturalEarth1 projections via geoPath. The code uses React with useEffect for data loading and d3.brushX for interactive selection, rendering SVG elements.

LLaura Johnson

94% match