Skip to main content
SimilarExport ZIP
100%

Map Brushing

✓ Published0🌍 Public
FFelix Jacob
Last edited Mar 10, 2023
Created on Mar 10, 2023

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.

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…

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

Brushing Missing Migrants Data

Brushing a time-series histogram filters a world map of missing migrant incidents, showing only records within the selected date range. The map renders with `d3.geoNaturalEarth1` and `d3.geoPath`, sizing circles by total dead and missing via a square-root scale. The histogram uses `d3.bin`, `d3.brushX`, and React state to update the filtered data. Data comes from a Missing Migrants Project CSV subset, with world geography from TopoJSON.

RRichardPearce60
90% match
Loading thumbnail…

Fork of Multiple Views with Brushing

This example integrates a world map and a time-series histogram to visualize missing migrants incidents. The map plots circles sized by the total dead and missing using a square-root scale, while the histogram aggregates counts by month. Users brush a time range in the histogram to filter the map’s data dynamically. The visualization uses React for components, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for brushing, and d3.bin for histogram binning, pulling data from a CSV of global missing migrants.

Aanniedekock1m
90% match
Loading thumbnail…

Missing Migrants on a Map with Fast Brushing Bars (V1)

A world map uses semi-transparent circles to show the geographic distribution of missing migrants, with circle size encoding the total number dead or missing per location. A brushed time-series histogram below the map filters the displayed circles to a selected date range, updating the map dynamically. The visualization is built with React and D3 v5, using `geoNaturalEarth1` and `geoPath` for the map projection, `scaleSqrt` for circle sizing, and `brushX` for the interactive time filter. Data comes from a CSV of migrant incidents sourced from Simplemaps.

AAndre J Denais
89% match
Loading thumbnail…

brushing World Map migrants

This example shows a world map of missing migrants, with bubble circles sized by the total dead and missing count at each location. A linked histogram below displays the same data over time, and brushing a time range filters the map’s bubbles to only show incidents within that period. The visualization uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for the map projection, d3.scaleSqrt for bubble sizing, and d3.brushX for the interactive time filter. Data comes from a CSV of missing migrants, rendered as SVG.

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

Multiple Views with Brushing

This example shows a world map of missing migrants, with circles sized by total dead and missing, alongside a time histogram of the same data. Brushing on the histogram filters the map to show only incidents within the selected date range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `d3.bin` for histogram binning. Data comes from the Missing Migrants Project, rendered as SVG.

Jjwlam83
89% 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
89% match