Multiple Views with Brushing

100%

Multiple Views with Brushing

✓ Published1🌍 Public

Last edited Dec 28, 2021

Created on Oct 1, 2021

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.

AI-generated description

Line Chart

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

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

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

95% match

Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map and time-series histogram display global migrant deaths and disappearances, with brushing on the histogram filtering circles on the map in real time. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and proportional circle sizes scaled by the square root of the death count. The histogram bins monthly totals using `d3.bin` and applies a brush with `d3.brushX` to link the two views. Data comes from the Missing Migrants Project CSV, with React managing state and D3 v5 rendering SVG elements.

HHollyClarke19

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

93% match

Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map displays migrant deaths and disappearances by location, with circle size scaled by the square root of the total count via `d3.scaleSqrt`, rendered over land boundaries and graticules using `d3.geoPath` and `d3.geoNaturalEarth1`. A linked time-series histogram below, binned by month with `d3.histogram`, allows brushing via `d3.brushX` to filter the map’s circles in real time. The React app loads CSV and TopoJSON data asynchronously and uses SVG for all marks.

SSam

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

92% match

Loading thumbnail…

Multiple Views Brushing

A choropleth-style bubble map displays total dead and missing migrants by location, overlaid on a natural Earth projection rendered with `d3.geoPath`. A linked brushing time-series histogram below, built with `d3.brushX`, filters the map’s circles by reported date when the user drags a selection window. The map uses a `d3.scaleSqrt` for circle radii, while the histogram aggregates data into monthly bins via `d3.histogram`. Both views are React components sharing the same SVG canvas, with data loaded from a CSV of migrant incidents and world atlas TopoJSON.

Ffjvoris

92% match