Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

100%

Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

✓ Published0🌍 Public

Last edited May 1, 2024

Created on May 1, 2024

Forked from Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths using a linked-view design, combining a bubble map with a date histogram. The map projects city coordinates using a transverse Mercator projection onto country boundaries and graticules, while the histogram shows the temporal distribution of casualties. Users can brush over the time axis to filter the map's bubbles, which scale in radius based on the square root of the death count. The visualization uses `d3.geoPath`, `d3.scaleSqrt`, and `d3.brushX` within a React framework, pulling data from a CSV of missing migrants and TopoJSON country boundaries.

AI-generated description

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…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths worldwide using a linked-view design. A bubble map shows the geographic locations of casualties, with circle size proportional to the total dead and missing, while a time-series histogram below aggregates deaths by reported date. Users can brush over the histogram to filter the map, updating the visualization in real time. The project uses React with D3 v5 APIs including `geoPath`, `geoNaturalEarth1`, `scaleSqrt`, `scaleTime`, `brushX`, and `histogram`. Data originates from the Missing Migrants Project, with geographic boundaries from the World Atlas TopoJSON.

Rrathan.ramesh00@gmail.com

95% match

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

A linked-view visualization combines a bubble map and a time-series histogram to explore migrant deaths. The map projects incident locations using a natural Earth projection, with bubble size scaled by the square root of total dead and missing. A brush on the histogram filters the map's bubbles in real time. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.brushX`, and React's `useMemo` for efficient recomputation. Data comes from the Missing Migrants Project, and the visualization leverages D3 v5 and React for rendering.

Ddr-rompecabezas

94% match

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization presents migrant deaths worldwide using a bubble map and a linked date histogram. It shows the geographic distribution of fatalities with circle size representing the total dead and missing, while a time-based bar chart allows brushing to filter the map. The code uses React with `useMemo` for performance, and it employs d3 functions like `geoNaturalEarth1`, `geoPath`, `geoGraticule`, `scaleSqrt`, `scaleTime`, `histogram`, and `brushX`. Data comes from the Missing Migrants Project, rendered in SVG with a custom color scheme for map elements.

Llfting96

94% match

Loading thumbnail…

Fork of Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization presents global migrant deaths using a linked-view design, combining an interactive world map and a brushing histogram. A D3 `geoNaturalEarth1` projection renders country boundaries and graticules, while the map displays circles scaled proportionally to the number of dead and missing migrants. Dragging a brush across the time-based histogram filters the map in real-time, highlighting only deaths within the selected date range. Built with React and D3 v5, it uses `d3.scaleSqrt`, `d3.bin`, and `d3.brushX` for data processing and interaction. Data comes from the Missing Migrants Project, sourced as a CSV file.

KKiernan Nesslar

94% match

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a bubble map and a time-series histogram to explore migrant deaths worldwide. The map displays the total dead and missing per location with circle size scaled by magnitude, while the histogram shows monthly totals that can be brushed to filter the map dynamically. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projections, `d3.brushX` for linked brushing, and `d3.bin` to aggregate data into monthly bins. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

NNick Constantine

94% match

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization presents migrant deaths and disappearances worldwide, linking a bubble map to a brushing-enabled date histogram. The map projects each incident's coordinates using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle sizes scaled to the death toll. The histogram aggregates monthly totals, and brushing a time range filters the map in real-time. Built with React and D3 v5, it renders vector graphics via SVG, sourcing data from the Missing Migrants Global dataset and world atlas TopoJSON.

Hhimchan94

94% match

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays migrant deaths and disappearances worldwide, combining a bubble map with a brushing-linked time series histogram. The map projects incident locations using `d3.geoNaturalEarth1` and `d3.geoPath`, with circle areas scaled by death counts. A brushable date histogram built with `d3.brushX` and `d3.bin` filters the map’s bubbles in real time. React hooks like `useMemo` optimize rendering performance, while data comes from the Missing Migrants Project CSV and world boundaries from World Atlas TopoJSON.

CCheng Tang

94% match

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world bubble map of migrant deaths with a linked time-series histogram. Brushing on the histogram filters the map’s circles to show deaths within the selected date range. The map uses a d3.geoNaturalEarth1 projection via d3.geoPath, while the histogram uses d3.brushX, d3.bin, and scaleTime. React’s useMemo optimizes rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Kka40

94% match