Skip to main content
SimilarExport ZIP
100%

Multiple Views with Brushing

✓ Published0🌍 Public
CCodeDuckie99
Last edited Mar 16, 2021
Created on Mar 16, 2021

This example presents a global map of missing migrant incidents, with circles sized by the total number of dead or missing. A linked date histogram beneath the map allows brush selection to filter the map’s data points interactively. The visualization uses React with D3 v6, employing `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `bin` with `timeMonths` for the histogram. Brushing is implemented via `brushX` and `scaleTime.invert`. Data comes from the Data Canvas Sense Your City dataset.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrants, with circles sized by total dead and missing, alongside a time histogram of the same data. Brushing on the histogram filters the map to show only incidents within the selected date range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `d3.bin` for histogram binning. Data comes from the Missing Migrants Project, rendered as SVG.

Jjwlam83
96% 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

A world map displays circles sized by the total number of dead and missing migrants, with a linked time-series histogram below showing monthly totals. Brushing a date range on the histogram filters the map circles to only those incidents within that period. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for interactive selection, and `d3.bin` with `d3.timeMonths` for histogram binning. Data comes from a CSV of global missing migrants, rendered as SVG.

Wwindwaver
95% match
Loading thumbnail…

Multiple Views With Brushing

This example shows a world map with bubbles representing missing migrants, sized by the total number of dead and missing, alongside a date histogram of the same data. Brushing the histogram filters the map to show only incidents within the selected time range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.brushX`, `d3.histogram`, `d3.scaleSqrt`, and `d3.scaleTime`. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`, and renders as SVG.

Rrstrauss127
95% match
Loading thumbnail…

Multiple Views with Brushing

A world map displays cities, with circle size encoding the total dead and missing; a time-series histogram below shows the same metric over time. Brushing a date range on the histogram filters the map’s circles to events within that span. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX`. Data comes from a CSV of missing migrants, rendered as SVG within a React app.

EEdward-Elric233
94% 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
94% match
Loading thumbnail…

Multiple Views with Brushing

A world map displays missing migrant incidents as semi-transparent bubbles, with a linked time-series histogram beneath it showing monthly death tolls. Brushing a time range in the histogram filters the map to show only incidents within that period. The visualization uses React with D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for the map, `brushX` for interactive selection, and `histogram` with `timeMonths` for binning. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

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