Skip to main content
SimilarExport ZIP
100%

Optimized React w/ Brushing

✓ Published0🌍 Public
PPadoSensei
Last edited Mar 31, 2021
Created on Mar 31, 2021

A choropleth of missing migrant incidents combines a world map with a filterable timeline. Geographic data from the World Atlas TopoJSON renders via `d3.geoPath` and `d3.geoGraticule` in an SVG, overlaid with circles sized by `d3.scaleSqrt`. A date histogram below, built with `d3.scaleTime` and `d3.histogram`, uses `d3.brushX` to select a date range. This brushing interaction filters the bubble map circles, revealing temporal patterns in the dataset.

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.

Refactor for optimization

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

Analyzing missing migrants data by Multiple Views with Brushing

A choropleth-style bubble map displays global locations of missing migrants, with circle size encoding the total dead and missing count. A brushed date histogram below filters the map to show only incidents within a selected time range. The visualization uses React, D3 v5’s `geoPath` with `geoNaturalEarth1` projection, `scaleSqrt` for bubble radii, and `brushX` for interactive filtering. Data comes from the Missing Migrants Project CSV, rendered as SVG with World Atlas TopoJSON country boundaries.

Bblackbottt
87% match
Loading thumbnail…

Map and Histogram with Brushing

This interactive visualization combines a world map of bubble markers with a linked time-series histogram, allowing users to brush over a date range to filter the geographic data. It plots migrant deaths and disappearances from a global dataset, with bubble size scaled by the square root of the count using `d3.scaleSqrt`. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world atlas data. Brushing is implemented with `d3.brushX`, and the React components re-render filtered circles accordingly. The histogram is built with `d3.bin` and `d3.timeMonths`.

Nnexus1058
87% match
Loading thumbnail…

Optimize Multiple view with brushing

This interactive visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances in 2019. Users brush the histogram to filter the map, which displays circles sized by total dead and missing per location using d3.scaleSqrt. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule over a TopoJSON world atlas, while the histogram bins data by month with d3.histogram. Brushing is implemented with d3.brushX, and the React app manages state for the brush extent.

SShuyu Zheng
87% match
Loading thumbnail…

Multiple views with brushing

A choropleth-style bubble map displays global migrant deaths and disappearances, with a coordinated histogram showing the same data over time. Brushing a time range on the histogram filters the map’s circles in real time, highlighting temporal patterns. The visualization uses React for component structure, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin`, rendering SVG marks. Data comes from the Missing Migrants Project, with country boundaries sourced from World Atlas TopoJSON.

Ccshm407
87% match
Loading thumbnail…

10:32 brushing

A choropleth-style bubble map of global migration incidents is linked to a brushed date histogram. The map displays circles sized by the total number of dead and missing people, with colors assigned per country. Brushing the histogram filters the map’s circles to show only data within the selected date range. The visualization uses React for state management, d3.scaleSqrt for sizing, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for the histogram brush, and data from the Missing Migrants Project.

Uumgi
87% match
Loading thumbnail…

Multiple Views Brushing

A choropleth-style bubble map displays total dead and missing migrants by location, overlaid on a natural Earth projection rendered with `d3.geoPath`. A linked brushing time-series histogram below, built with `d3.brushX`, filters the map’s circles by reported date when the user drags a selection window. The map uses a `d3.scaleSqrt` for circle radii, while the histogram aggregates data into monthly bins via `d3.histogram`. Both views are React components sharing the same SVG canvas, with data loaded from a CSV of migrant incidents and world atlas TopoJSON.

Ffjvoris
87% match
Loading thumbnail…

Optimized 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.

SShantanu
87% match