Skip to main content
SimilarExport ZIP
100%

React world map + migrant death/missing points + histogram with brush

✓ Published0🌍 Public
SSuperShreejit
Last edited May 17, 2022
Created on May 17, 2022

This React visualization combines a natural Earth projection world map with migrant death and missing person data, plotted as scaled circles whose radius encodes the total count. A linked histogram below displays the monthly distribution of deaths, featuring a brush filter that dynamically updates the map’s displayed points based on the selected date range. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoGraticule, d3.scaleSqrt, d3.bin, d3.brushX, and d3.timeMonths, rendering SVG elements with topojson world atlas data and CSV migrant records.

AI-generated description

A react World Map chart + migrants of world map: topo-json data and migrants: data

MIT Licensed

Similar vizzes

Loading thumbnail…

React world map + migrant death/missing points + histogram

This visualization combines a world map with a histogram of migrant deaths and missing persons. The map uses a D3 natural Earth projection with SVG paths for land, borders, and graticules, overlaid with circles scaled by the square root of the reported deaths. Below, a time-based histogram bins monthly totals using d3.bin and displays them as rectangular bars. Data is loaded from CSV and TopoJSON sources, rendered with React, with tooltips showing counts and dates.

SSuperShreejit
95% match
Loading thumbnail…

React world map + migrant death/missing points

A React-based world map displays migrant deaths and missing persons as semi-transparent circles, sized using a square-root scale to encode the reported total per location. The natural Earth projection renders geographic landmasses and graticules via `d3.geoPath`, with topojson world-atlas data providing country boundaries. Circle positions derive from parsed CSV coordinates, while hover tooltips reveal the reported date and death count. The visualization uses `d3.scaleSqrt` for radius mapping and processes data through custom React hooks for asynchronous loading of both map and migrant datasets.

SSuperShreejit
93% match
Loading thumbnail…

Optimized Brushing

This visualization displays migrant deaths and missing persons worldwide on a natural Earth projection map, with bubble sizes scaled by the square root of the total dead and missing count. A linked histogram below shows the same data binned by month, and users can brush across the histogram to filter the map’s bubbles in real time. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, `brushX` for the brushing interaction, and `useMemo` to optimize rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

SShantanu
90% match
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map and time-series histogram to explore migrant deaths and disappearances. The map displays circles sized by total dead and missing using a square-root scale, while the histogram shows monthly totals. Brushing the histogram filters the map’s circles in real time via React state and d3.brushX. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules from the World Atlas TopoJSON, with data from the Missing Migrants Project. React’s useMemo optimizes rendering of both static geographic features and dynamic data updates.

Hhenry c
89% match
Loading thumbnail…

Fast Brushing

This visualization combines a world map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the histogram to filter the map’s bubbles, which represent the total dead and missing per location, illustrating the geographic distribution of events within a selected time window. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules, while the histogram uses d3.bin and d3.brushX. React’s useMemo optimizes rendering performance, with city data from Simplemaps and country boundaries from World Atlas TopoJSON.

SShantanu
89% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

A world map displays migrant deaths by city, with circle size proportional to the total dead and missing. A date histogram below shows the temporal distribution of these deaths, and users can brush over a time range to filter the map to only show cities with deaths in that period. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.scaleSqrt` for circle sizing, and `d3.brushX` for interactive selection. Data comes from a CSV of migrant deaths, and country boundaries are rendered from the World Atlas TopoJSON.

Kkemee
89% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and missing persons. Brushing on the histogram filters the map’s circles in real time, showing incidents within the selected date range. The map uses a natural Earth projection via d3.geoNaturalEarth1, while the histogram bins monthly totals with d3.histogram and handles brushing through d3.brushX. React’s useMemo optimizes rendering, and data comes from the Missing Migrants Project CSV, loaded with d3.csv.

CCurran Kelleher
89% match
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a natural Earth projection world map with a time-series histogram to explore migrant deaths in 2019. The map displays bubbles sized by the total dead and missing, while the histogram aggregates the same data by month. A brush on the histogram filters the map in real-time, highlighting events within the selected date range. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, `geoGraticule`, `scaleSqrt`, and `brushX` for the brushing interaction. Data comes from the Missing Migrants Project, and the map utilizes the World Atlas TopoJSON for country boundaries.

ZZG
88% match