Dataviz 12 - Multiple views with brushing

100%

Dataviz 12 - Multiple views with brushing

✓ Published0🌍 Public

Last edited Nov 27, 2021

Created on Nov 27, 2021

This visualization combines a world map and a histogram to display global migrant deaths and disappearances over time. A bubble map shows individual incidents with circle size scaled by the square root of the death toll, using a Natural Earth projection with graticules from the World Atlas TopoJSON. A date histogram below aggregates the same data monthly. Brushing a time range on the histogram filters the map’s displayed incidents, demonstrating linked views via `d3.brushX` and `d3.event.selection` within a React framework.

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

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

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

93% match

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a world map and a time series histogram to explore migrant deaths and disappearances. The map displays circles sized by death counts using d3.geoNaturalEarth1 and d3.geoPath, while the histogram aggregates monthly totals with d3.histogram. Brushing on the histogram filters the map’s data through a brushX interaction, updating the circles in real time. The data comes from the Missing Migrants Project CSV, rendered as SVG within a React framework.

Nnkohdatavis

93% match

Loading thumbnail…

44) Multiple Views with Brushing

This visualization combines a geographic bubble map with a time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by the square-root-scaled count of total dead and missing, using D3’s `geoNaturalEarth1` projection and `geoPath` for the world atlas. The histogram aggregates the same data by month, using D3’s `bin` and `scaleTime`. Brushing on the histogram, implemented with `brushX`, filters the map’s data points. The map and histogram are linked, with the map updating dynamically to show only records within the brushed date range.

Llefat92

93% match

Loading thumbnail…

Multiple view with brushing

This visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances. The map uses a natural Earth projection with proportional circle sizes via `d3.scaleSqrt`, while the histogram bins the same data by month using `d3.histogram`. Users can brush the histogram with `d3.brushX` to filter the map’s circles, linking the two views. The React-based SVG rendering loads CSV data from Missing Migrants and world-atlas TopoJSON for geographic basemaps.

SShuyu Zheng

93% match

Loading thumbnail…

Optimize Multiple view with brushing

This interactive visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances in 2019. Users brush the histogram to filter the map, which displays circles sized by total dead and missing per location using d3.scaleSqrt. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule over a TopoJSON world atlas, while the histogram bins data by month with d3.histogram. Brushing is implemented with d3.brushX, and the React app manages state for the brush extent.

SShuyu Zheng

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

92% match