Miltiple views with brushing

100%

Miltiple views with brushing

✓ Published0🌍 Public

Last edited Jun 15, 2021

Created on Jun 15, 2021

This example shows a linked brushing interaction between a date histogram and a world map of migrant deaths, where dragging a brush across the time axis filters the bubbles displayed on the map. The histogram aggregates monthly totals using d3.bin and d3.sum, while the map projects coordinates with d3.geoNaturalEarth1 and d3.geoPath. The brush is implemented with d3.brushX, and updates are triggered via React state. Data comes from a CSV of missing migrants, and the world atlas is loaded from TopoJSON.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Multiple Views with Brushing

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.

RRajat Dangat

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

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

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

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

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

92% match