Optimization of Multi-view of Missing Migrants w/ Brush useRef

100%

Optimization of Multi-view of Missing Migrants w/ Brush useRef

✓ Published0🌍 Public

Last edited Jun 15, 2021

Created on Jun 9, 2021

Forked from Multi-view of Missing Migrants w/ Brushing

This interactive visualization combines a bubble map and time bar to explore missing migrant incidents worldwide, using React and D3 v5. The map displays incident locations as circles sized by death counts via `d3.geoEquirectangular` and `d3.geoPath`, while the bar chart aggregates monthly totals. A brush on the time axis, implemented with `d3.brushX` and React `useRef`, filters the map's displayed data based on selected date ranges. Data comes from a CSV of Missing Migrants records.

AI-generated description

A world map showing locations of Missing Migrants, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi-view of Missing Migrants w/ Brushing

This interactive visualization combines a bubble map and a time bar to explore missing migrant incidents worldwide. A brushed time range filters the map’s circles, which scale by total dead and missing. The map uses `d3.geoEquirectangular` and `d3.geoPath` for land, graticules, and interiors. The bar chart bins data monthly via `d3.histogram` and `d3.timeMonths`, with `d3.brushX` enabling temporal selection. Data comes from a CSV of global missing migrant reports.

Ssmile2git

94% 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

92% 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

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…

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

90% match

Loading thumbnail…

optimizing missing migrant brushing

This visualization combines a world map and a bar chart to explore missing migrant incidents. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries, with circle radii scaled by `d3.scaleSqrt` to show death counts. Below, a brushable time-series bar chart using `d3.brushX` filters the map by date range through React state. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`. The React components manage scales, axes, and brushing interactions.

GGuitong Li

90% match

Loading thumbnail…

Migrants Multi View w/ Brushing

This visualization shows a map of missing migrants alongside a time-series histogram, with interactive brushing to filter data across both views. Geographic coordinates are plotted as bubbles on a natural Earth projection using `d3.geoNaturalEarth1` and `d3.geoPath`, sized by the square-root scale of the total dead and missing count. A lower date histogram, built with `d3.bin` and `d3.timeMonths`, uses `d3.brushX` to select a temporal range, which dynamically filters the rendered circles on the map. The React-sourced data comes from a CSV of Missing Migrants Global records rendered as SVG.

AAndres de la Garza

90% 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

90% match