Combined map and histogram with Brushing

100%

Combined map and histogram with Brushing

✓ Published1🌍 Public

Last edited Apr 25, 2021

Created on Apr 25, 2021

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.

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…

Missing Migrants Multiple View with Brushing

This interactive visualization combines a global bubble map and a time-series histogram to explore missing migrant incidents. Users can brush over the histogram to filter the map, which displays circles sized by the total dead and missing count. The map uses d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, while the histogram employs d3.bin and d3.brushX for temporal aggregation and selection. Data comes from a CSV of missing migrants and world atlas TopoJSON, rendered with React and SVG.

JJohn Huang

93% match

Loading thumbnail…

Brushing

This example links a bubble map and a date histogram to explore missing migrant incidents. The map projects circles sized by the total dead and missing using d3.geoNaturalEarth1 and d3.geoPath, while the histogram bins monthly counts with d3.bin and d3.scaleTime. Users can brush the histogram with d3.brushX, which dynamically filters the map's circles to show only incidents within the selected date range. Data comes from a CSV of reported migrant deaths, and the visualization is built with React and rendered as SVG.

Ccynichole

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

92% match

Loading thumbnail…

brushing migrant data on a map

This interactive visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. Users brush over the histogram to filter the map, which displays circles scaled by the total dead and missing per location. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while the histogram leverages d3.bin and d3.brushX. Data comes from a CSV of Missing Migrants Global records, rendered with React and SVG.

BBlake McCarty

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

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

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

92% match

Loading thumbnail…

Missing Migrants with Brushing

This visualization uses a world map with bubbles to show the total number of dead and missing migrants, with bubble size scaled by the square root of the count. A time-series histogram below the map displays the same data binned by month, and users can brush over this chart to filter the map to only show incidents within the selected time range. The map is rendered using `d3.geoPath` with natural Earth projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX` for interactive filtering. Data comes from the Missing Migrants Project CSV, and all rendering is done in SVG within a React framework.

Ppnlinyz

92% match