Skip to main content
SimilarExport ZIP
100%

Bubble Map and Histogram with Brushing

✓ Published0🌍 Public
SSerind Joshua McCue
Last edited Aug 23, 2022
Created on Aug 23, 2022

This interactive visualization combines a bubble map and a histogram to explore global migrant deaths. Users can brush over the time-series histogram to filter the map’s circles, adjusting the displayed data by reported date. The map uses a `geoNaturalEarth1` projection rendered with `d3.geoPath`, while the histogram uses `d3.brushX`, `d3.bin`, and `scaleTime`. Data comes from a CSV of Missing Migrants incidents, with circle size scaled by the square root of the death count.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

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

TODO: Migrant Deaths Linked Views with Brushing

This interactive visualization links a bubble map and a time-series histogram to explore migrant deaths and disappearances worldwide. The map displays the total dead and missing per location with bubble size scaled by magnitude, while the histogram shows monthly totals over time. Brushing a time range in the histogram filters the map’s bubbles to show only incidents within that period. The visualization uses React with d3.scaleSqrt, d3.geoNaturalEarth1, and d3.geoPath for mapping, and d3.brushX for the linked selection. Data comes from a CSV of Missing Migrants Global incidents.

WWarren-Fitzhenry
90% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This example links a bubble map of migrant deaths with a brushed time-series histogram. Users can brush a date range in the histogram to filter the circles shown on the world map. The map renders SVG circles with `d3.geoNaturalEarth1` and `d3.geoPath` for country boundaries, while the histogram uses `d3.bin`, `d3.brushX`, and `d3.scaleTime` to aggregate monthly totals. Data comes from the Missing Migrants Project CSV, with interactions managed in React.

MMila Frerichs
90% match
Loading thumbnail…

Brushing-Combined Migrants on a Map

A world map displays migrant deaths as green bubbles scaled by mortality count, synced with a brushing-enabled time histogram below. Dragging the histogram’s brush filters the map’s bubbles to show only incidents within the selected date range. Built with React and D3 v7, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `brushX` with `scaleTime.invert` to link selections. Data comes from a CSV of reported migrant incidents.

Ww.fukuyama@gmail.com
90% match
Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a bubble map of global migrant deaths and disappearances with a brushing-enabled time-series histogram. Users can brush over a date range in the histogram, which filters the data points displayed on the map, highlighting incidents within the selected period. The map uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw country boundaries and graticules, while a square-root scale (`d3.scaleSqrt`) sizes the bubbles based on casualty counts. The histogram uses `d3.histogram` to bin data by month and `d3.brushX` to enable the linked selection. Data comes from the Missing Migrants Project, rendered in SVG within a React component.

EEevikettu
89% match
Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization links a bubble map of migrant deaths with a brushing-enabled histogram. The map plots circles sized by total dead and missing using a square-root scale, while the histogram aggregates monthly totals. Users brush the time axis to filter the map to corresponding dates. The code uses React, D3 v5 APIs like `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `histogram`, with data from a CSV hosted on GitHub and world boundaries from TopoJSON.

XXiaoleiGuo
89% match