Skip to main content
SimilarExport ZIP
100%

Hist + Map - with Brushing

✓ Published0🌍 Public
SShantanu
Last edited May 20, 2021
Created on May 20, 2021

This interactive visualization combines a proportional-symbol world map with a brushed time-series histogram. The map displays circles scaled by the total number of dead and missing migrants, projected using `d3.geoNaturalEarth1` and `d3.geoPath` with graticules and country boundaries from TopoJSON. The histogram, built with `d3.bin` and `d3.scaleTime`, aggregates monthly totals, and its `d3.brushX` selection filters the map’s data points based on the reported date range. Built with React and D3 v5, it renders entirely as SVG elements.

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.

MIT Licensed

Similar vizzes

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

Combined map and histogram with Brushing

This interactive visualization combines a world bubble map with a time-series histogram to explore missing migrant incidents. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, with circle radii scaled by `d3.scaleSqrt` based on the total dead and missing. Below, a histogram bins incidents by reported date using `d3.bin` and `d3.timeMonths`, with bar heights summed per bin. Users can brush over the histogram with `d3.brushX` to filter the map’s displayed circles. Data comes from a CSV of missing migrants, rendered in SVG with React.

FFonda Irena Santoso
88% match
Loading thumbnail…

Polished Combined map and histogram with Brushing

The visualization pairs a natural Earth projection map with a time-series histogram, showing the total number of dead and missing migrants by reported date and location. A brushing interaction on the histogram filters the map’s circular markers, which are sized with d3.scaleSqrt based on migrant counts. The map uses d3.geoNaturalEarth1 and d3.geoPath with TopoJSON world-atlas data, while the histogram is built with d3.bin, d3.brushX, and React.

FFonda Irena Santoso
88% match
Loading thumbnail…

Fast Brushing

This visualization combines a world map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the histogram to filter the map’s bubbles, which represent the total dead and missing per location, illustrating the geographic distribution of events within a selected time window. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules, while the histogram uses d3.bin and d3.brushX. React’s useMemo optimizes rendering performance, with city data from Simplemaps and country boundaries from World Atlas TopoJSON.

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

Histogram + map + brushing

This example combines a bubble map with a date histogram, using brushing to filter the map by time range. The map displays the total dead and missing migrants by location, with circle sizes scaled via d3.scaleSqrt. The histogram bins reported dates into months using d3.bin and sums values per bin. A d3.brushX selection updates the map’s filtered data. The visualization uses React for state management, d3.geoNaturalEarth1 and d3.geoPath for the geographic projection, and renders all elements as SVG.

MMatias Conde
86% match
Loading thumbnail…

Map Brushing

This example links a world map of missing migrant incidents to a brushing-linked time histogram. The map displays circles scaled with `d3.scaleSqrt` based on total dead and missing counts, projected using `d3.geoNaturalEarth1` and rendered with `d3.geoPath`. A brushed time range filters the map’s circles in real time, using `d3.brushX` and `d3.histogram` to bin monthly totals. The React app uses `useMemo` for performance, with data sourced from a CSV of missing migrants and country boundaries from World Atlas TopoJSON.

FFelix Jacob
86% match
Loading thumbnail…

Missing Migrants on a Map with Brushing

This visualization combines a natural Earth projection map and a time-series histogram to explore missing migrant incidents. A brushing interaction on the date histogram filters the map’s proportional circles, which encode the total dead and missing per location. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with World Atlas TopoJSON data, while the histogram aggregates monthly totals using `d3.bin` and `d3.brushX`. Rendering is done in SVG with React, and the dataset comes from the Missing Migrants Project.

CChris Knight
86% match