dv2020-ep45-viz46 - missing migrants brushing - optimized

100%

dv2020-ep45-viz46 - missing migrants brushing - optimized

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 29, 2023

Forked from dv2020-ep44-viz45 - missing migrants brushing

This visualization combines a bubble map and a time-series histogram to explore the Missing Migrants Dataset, with brushing linking the two views. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country borders, shorelines, and graticules, with circle sizes scaled by d3.scaleSqrt. The histogram aggregates monthly totals via d3.histogram, while d3.brushX enables selecting a date range that filters the map’s bubbles. React manages state for the brush selection, and SVG renders all elements.

AI-generated description

A bubble map & histogram of the Missing Migrants Dataset with "brushing".

Episode 45

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep44-viz45 - missing migrants brushing

A bubble map and histogram visualize the Missing Migrants Dataset, showing the geographic distribution and monthly counts of dead and missing migrants. The histogram uses a brushing interaction via `d3.brushX` to filter the map’s bubbles by date range. The map is rendered with `d3.geoPath` and a natural Earth projection, while data is loaded through `d3.csv` and world map topology via `d3.json` with TopoJSON. The React-based interface uses D3 scales and SVG elements for rendering.

Zzach b.

95% match

Loading thumbnail…

Dataviz 2020_Ep45 - 36. Missing Migrants6 - Performance Optimized Brushing (Multiple Views)

This interactive visualization combines a geographic bubble map with a time-series histogram to explore records of missing migrants. The map plots incidents using D3's `geoNaturalEarth1` projection, while the histogram aggregates counts by month. Users brush over the histogram to filter the map’s circles in real-time, leveraging D3’s `brushX` and React state for synchronized updates. Data is loaded via `d3.csv` from a published subset, and the rendering uses SVG with React components.

MMinwoo Pak

92% match

Loading thumbnail…

Missing Migrants Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global missing migrant data from a CSV dataset. Users can brush across the histogram to filter the map by date range, with linked views updating simultaneously. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for country boundaries, while the histogram applies d3.bin with timeMonths thresholds and d3.brushX for selection. React manages state for the brush extent, and d3.scaleSqrt sizes bubbles by the total dead and missing count.

MMichael Bergerson

91% match

Loading thumbnail…

Missing Migrants Multiple Views with Brushing React Performance Optimization

This visualization shows the geographic distribution and temporal trends of missing migrants worldwide, with a bubble map of incident locations and a linked date histogram for time-based filtering. Brushing the histogram filters the map’s circles in real time. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for bubble sizing, and `d3.brushX` for interactive selection, with `useMemo` and `useEffect` optimizing performance. Data comes from the Missing Migrants Project CSV.

MMichael Bergerson

90% match

Loading thumbnail…

Missing Migrants - Brushing

This interactive visualization combines a world map and a time-series histogram to explore data on missing migrants. Brushing on the histogram filters the map’s bubble marks, which are sized by the total dead and missing using a square-root scale. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land and graticules from TopoJSON, while the histogram employs `d3.bin`, `d3.brushX`, and scales for time and linear values. React manages state and rendering, with D3 v5 handling data loading and axes.

SSai Phaltankar

90% match

Loading thumbnail…

dv2020-ep43-viz44 - missing migrants map & histogram (cleaned up)

This visualization combines a bubble map and histogram to explore the Missing Migrants Dataset. The map uses a natural Earth projection with D3’s `geoPath` and `geoNaturalEarth1` to plot incident locations as scaled circles, while the histogram aggregates reported deaths by month using `d3.bin` and `scaleTime`. Built with React and D3 v5, the SVG rendering overlays graticules, country borders, and shorelines from TopoJSON world-atlas data, with circles sized by a square-root scale. The histogram’s axes and bars are generated with `scaleLinear`, `scaleTime`, and `timeMonths`, presenting temporal patterns alongside geographic distribution.

Zzach b.

90% match

Loading thumbnail…

Multiple Views (Brushing)

This interactive visualization combines a bubble map and a date histogram to explore missing migrant incidents. Brushing a time range in the histogram filters the map’s bubbles, which are scaled by total dead and missing using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath for land outlines, while the histogram employs d3.bin and d3.brushX. Data comes from the Missing Migrants Project CSV, rendered as SVG in React.

Bbsolomon103

90% match

Loading thumbnail…

dv2020-ep41-viz43 - missing migrants map & histogram

This visualization combines a bubble map and a histogram to explore the Missing Migrants Dataset. The map uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to plot incident locations, with circle radii scaled by the square root of the "Total Dead and Missing" count using `scaleSqrt`. A histogram below bins the same data by reported date, aggregating monthly totals with `d3.histogram` and `timeMonths`. Both charts are rendered as SVG within a React component, pulling geographic and CSV data from external URLs.

Zzach b.

90% match