Skip to main content
SimilarExport ZIP
100%

Multiple Views with Brushing

✓ Published0🌍 Public
ZZG
Last edited Sep 30, 2020
Created on Sep 30, 2020

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.

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

Multiple views with brushing

A choropleth-style bubble map displays global migrant deaths and disappearances, with a coordinated histogram showing the same data over time. Brushing a time range on the histogram filters the map’s circles in real time, highlighting temporal patterns. The visualization uses React for component structure, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin`, rendering SVG marks. Data comes from the Missing Migrants Project, with country boundaries sourced from World Atlas TopoJSON.

Ccshm407
95% 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
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 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
95% match
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 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
95% match
Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map and a time-series histogram show global migrant deaths, with brushing the histogram filtering the map’s city markers. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with world-atlas TopoJSON data, while the histogram applies `d3.bin`, `d3.scaleTime`, and `d3.brushX`. React manages state and rendering, with SVG output.

Iiblub
95% match