Multiple Views with Brushing

100%

Multiple Views with Brushing

✓ Published70🌍 Public

Last edited Dec 12, 2020

Created on Oct 10, 2019

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths and missing persons. Users can brush a time range in the histogram to filter the map’s displayed circles, which are sized using `d3.scaleSqrt` and positioned with `d3.geoPath` and `geoNaturalEarth1`. A reactive `useState` hook manages the brush extent. The map shows city locations from a CSV dataset, with country boundaries from World Atlas TopoJSON, all rendered as SVG with React and D3 v5.

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…

Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths and disappearances worldwide. The map displays incidents as proportional circles overlaid on natural Earth projections using `d3.geoNaturalEarth1` and `d3.geoPath`, while the histogram aggregates monthly totals. Users can brush the time axis with `d3.brushX` to filter the map’s displayed incidents in real time. Both views use SVG rendering within a React framework, with data sourced from the Missing Migrants Project CSV and country boundaries from World Atlas TopoJSON.

GGeniXiong

95% match

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a world bubble map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the date histogram to filter the map, dynamically updating the displayed circles. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while the histogram uses `d3.bin` and `d3.brushX`. Data comes from a CSV of Missing Migrants Global records, rendered as SVG circles with `d3.scaleSqrt` sizing.

NNikhil Reddy Manda

94% match

Loading thumbnail…

Multiple Views with Brushing

This visualization combines a bubble map of global migrant deaths with a brushing-linked time series histogram. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries and proportional circles sized by death counts. Selecting a date range with `brushX` on the histogram filters the map’s data in real time. The React app loads CSV data from Simplemaps and TopoJSON world atlas boundaries, rendering both views as SVG.

JJohn Lewis

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

Two coordinated views show migrant deaths and disappearances worldwide. A bubble map projects incidents using `d3.geoNaturalEarth1` and `geoPath`, with circle radii scaled by `scaleSqrt`. A time histogram beneath aggregates monthly totals using `d3.bin` and `sum`. Interactive `brushX` brushing filters map circles by date range, linking the views. Data comes from the Missing Migrants Project CSV, rendered as SVG in React with D3 v5.

Jj-PGi

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

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

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