Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
MMinwoo Pak
Last edited Jul 27, 2021
Created on Jul 26, 2021

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

dv2020-ep45-viz46 - missing migrants brushing - optimized

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.

Zzach b.
92% match
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.
91% match
Loading thumbnail…

Missing Migrants Multiple View with Brushing

This interactive visualization combines a global bubble map and a time-series histogram to explore missing migrant incidents. Users can brush over the histogram to filter the map, which displays circles sized by the total dead and missing count. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while the histogram employs d3.bin and d3.brushX for temporal aggregation and selection. Data comes from a CSV of missing migrants and world atlas TopoJSON, rendered with React and SVG.

JJohn Huang
91% match
Loading thumbnail…

Missing Migrants Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore global missing migrant incidents. Users brush over the histogram to filter the map, revealing the geographic distribution of deaths and missing persons within a selected time range. The map uses a natural Earth projection with proportional circle sizes for death counts, while the histogram aggregates monthly totals. Built with D3.js v7 and React, it employs `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.bin`, `d3.brushX`, and `d3.scaleSqrt` for data processing and rendering as SVG elements. Data comes from a CSV of Missing Migrants Global incidents.

KKazushige Okuma
91% match
Loading thumbnail…

Optimized Brushing Missing Migrants Data

This interactive dashboard visualizes missing migrant incidents worldwide, combining a bubble map with a brushing histogram. A world map shows the geographic distribution and magnitude of casualties via scaled circles, while a time-based histogram below allows users to brush a date range, filtering the map to display only incidents within that period. Built with React and D3 v7, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` for map projections, `d3.bin` for histogram aggregation, and `d3.brushX` for interactive selection, with data sourced from the Missing Migrants Project.

RRichardPearce60
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…

Missing Migrants Multiple Views, with Brushing

This example visualizes missing migrant incidents worldwide with a bubble map and a brushing-linked date histogram. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, with circle sizes scaled by `d3.scaleSqrt` to represent the total dead and missing per incident. The histogram, built with `d3.bin` and `d3.scaleTime`, shows monthly totals and supports brushing via `d3.brushX`; when a date range is selected, the map filters its circles to matching incidents. Both views share data from a CSV of global missing migrants, rendered as SVG within React.

LLove Wessman
90% match