Multiple views with brushing

100%

Multiple views with brushing

✓ Published0🌍 Public

Last edited Mar 31, 2021

Created on Mar 30, 2021

This visualization combines a bubble map and a time-series histogram to explore missing and dead migrants worldwide. The map uses a natural Earth projection with scaled circles to represent incident counts, while the histogram aggregates monthly totals. Users can brush over the histogram to filter the map’s displayed data in real time. The code uses React, D3 v5’s `geoNaturalEarth1`, `scaleSqrt`, `brushX`, and TopoJSON for world atlas data.

AI-generated description

A visualisation of two charts, firstly a bubble chart to show missing/dead migrants across the globe, and secondly overlayed on top of this is a missing/dead migrants over time, to hopefully better analyse said data.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

92% match

Loading thumbnail…

Multiple Views (Brushing)

This interactive visualization combines a bubble map and a date histogram to explore missing migrant incidents. Brushing a time range in the histogram filters the map’s bubbles, which are scaled by total dead and missing using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath for land outlines, while the histogram employs d3.bin and d3.brushX. Data comes from the Missing Migrants Project CSV, rendered as SVG in React.

Bbsolomon103

92% match