Skip to main content
SimilarExport ZIP
100%

Migrant Deaths Linked Views with Brushing

✓ Published0🌍 Public
Jjulia-richards
Last edited Apr 26, 2020
Created on Apr 26, 2020

This interactive visualization combines a world map and time series histogram to explore meteorite landing data, using linked brushing to filter the map based on date selection. The map displays circles sized by meteorite mass using the d3.geoNaturalEarth1 projection and d3.geoPath, while the histogram aggregates monthly mass totals using d3.bin and d3.brushX. Data comes from a CSV of meteorite landings, with country boundaries rendered from World Atlas TopoJSON. React hooks manage state and memoize computations, with SVG rendering for both views.

AI-generated description

The final installment from the online course Datavis 2020.

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.

This iteration is optimized for performance using React's useMemo hook.

MIT Licensed

Similar vizzes

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization links a world map of migrant deaths with a time-series histogram, using brushing to filter data across both views. The map displays circles sized by the total dead and missing, while the histogram shows monthly totals, with brush selection updating the map's highlighted points. Built with React and D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleSqrt for circle sizing, and d3.brushX for interactive filtering. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

NNikhil
91% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization uses a world map and a time-series histogram to explore migrant deaths. A linked brushing interface in the date histogram filters the bubble map, which uses `d3.geoNaturalEarth1` and `d3.geoPath` to render circle sizes proportional to deaths. The histogram bins data by month using `d3.histogram` and `brushX`. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON. React's `useMemo` optimizes rendering of the SVG marks.

Nnkohdatavis
91% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example shows two linked views of migrant death data: a natural Earth projection world map with semi-transparent circles scaled by total deaths and missing persons, and a date histogram of monthly totals. Brushing a time range in the histogram filters the circles on the map, revealing temporal patterns. The map uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` with TopoJSON world atlas boundaries. The histogram uses `d3.bin`, `d3.scaleTime`, and `d3.brushX` within a React component, rendering SVG marks for both views.

NNodirbek Parpibaev
91% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization presents migrant deaths through two linked views: a world map with proportional circles and a time-series histogram. Users brush a date range in the histogram to filter which data points appear on the map. Built with React and D3 v5, the map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while the histogram employs d3.histogram, d3.scaleTime, and d3.brushX for interactive filtering. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

Ssriramvsharma
90% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization presents migrant deaths and missing persons with two linked views: a world map with scaled circles for total deaths and a brushing-enabled time histogram. Users brush over the monthly histogram to filter the map’s circles to show only incidents within that date range. The map uses `geoNaturalEarth1` projection with `geoPath` and `geoGraticule`, while the histogram aggregates data with `d3.histogram` and `brushX`. Circle radii are set with `scaleSqrt`, and React’s `useMemo` optimizes rendering. Data comes from a CSV of reported incidents.

SSarahKiyani
90% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example presents a linked-view visualization of migrant deaths using a world map and a time-series histogram. A bubble map shows the geographic distribution of fatalities, while a brushed date histogram filters the map to show data within a selected time range. The visualization uses React with `useMemo` for performance optimization, D3 v5 for map projection (`geoNaturalEarth1`), geographic paths (`geoPath`), and scales (`scaleSqrt`, `scaleTime`), as well as `brushX` for interactive brushing. Data is loaded from a CSV dataset, and country boundaries come from World Atlas TopoJSON.

XXiaoleiGuo
90% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization combines a world map and a timeline to explore migrant deaths, with brushing linking the two views. The map displays circles sized by the total dead and missing per location using a square-root scale, while the histogram aggregates deaths by month. A brush on the histogram filters the map to show only data within the selected date range. The code uses React, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `scaleTime`, `bin`, `brushX`, and TopoJSON for world atlas boundaries.

Ssafdarawan
90% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization combines a world map and a time-series histogram to explore migrant deaths. The map displays proportional circles for each incident, with the histogram below showing the temporal distribution of casualties. Users can brush over a time range in the histogram to filter the map, highlighting only incidents within that period. Built with React and D3, it uses `d3.geoPath` for geographic projections, `d3.scaleSqrt` for circle sizing, and linked views through shared state.

XXiaoleiGuo
90% match