Optimized Brushing

100%

Optimized Brushing

✓ Published0🌍 Public

Last edited May 25, 2021

Created on May 25, 2021

Forked from Migrant Deaths Linked Views with Fast 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.

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…

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

92% match

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization shows migrant deaths and missing persons over time and location on a world map. A histogram at the bottom displays the total dead and missing by month, with a brushable time range that dynamically filters the bubbles on the map above. Built with React, it uses D3’s `geoNaturalEarth1` projection, `scaleSqrt` for bubble sizing, and `brushX` for range selection. Data comes from the Missing Migrants Global dataset; country boundaries use the world-atlas TopoJSON.

AAbubakr Khabebulloev

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

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

91% match

Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

An interactive world map displays migrant deaths by location with bubble size proportional to total dead and missing. A linked time-series histogram below allows brushing to filter the map to a date range. The visualization uses React with D3 v5, including `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubbles, and `brushX` for the brushing interaction. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Mmorjyooo

91% match

Loading thumbnail…

Missing Migrants with Brushing

This visualization combines a world map and a time-series histogram to explore the Missing Migrants Dataset. A bubble map plots each migrant death or disappearance event, with circle radius scaled by the total dead and missing count using `d3.scaleSqrt`. Below, a bar chart aggregates deaths by month, and users can brush over the time axis with `d3.brushX` to filter the map, highlighting events within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with world-atlas TopoJSON data, while the React components manage state and rendering.

AAlex Stulov

91% match

Loading thumbnail…

Missing Migrants Multiple Views with Brushing

This interactive visualization combines a natural Earth projection bubble map of missing migrants with a linked brushing-enabled date histogram. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world landmasses from TopoJSON, with circle radii scaled by d3.scaleSqrt based on total dead and missing counts. The histogram bins monthly totals via d3.bin and d3.timeMonths, and the d3.brushX selection filters map circles in real time. Both views use SVG rendering within a React framework, loading data from a CSV of Missing Migrants Global incidents.

KKevin McMorrow

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