Fork of Multiple Views With Brushing

100%

Fork of Multiple Views With Brushing

✓ Published0🌍 Public

Last edited Feb 15, 2023

Created on Feb 14, 2023

This example combines a bubble map with a date histogram to visualize missing migrant incidents. Brushing the histogram filters the map’s displayed circles, linked through shared state. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for country boundaries, while the histogram applies `d3.bin` and `d3.brushX`. React manages the UI, and data comes from a CSV of global migrant records.

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…

Fork of Multiple Views with Brushing

This example combines a bubble map and a histogram to visualize missing migrants data. The map uses a natural Earth projection with d3.geoNaturalEarth1 and d3.geoPath to plot circles sized by death tolls, while the histogram aggregates reported deaths by month using d3.bin and d3.timeMonths. Users can brush the histogram with d3.brushX to filter the map in real time, with state managed through React hooks. Data comes from a CSV of migrant incidents, rendered as SVG.

Lldtho

96% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global missing migrant incidents, with brushing on the histogram filtering the map’s displayed circles. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, while circle sizes encode the total dead and missing via `d3.scaleSqrt`. The histogram bins data by month using `d3.bin` and `d3.timeMonths`, with `d3.brushX` enabling interactive time-range selection. The React app (v16.9) manages brush state, filtering the map data accordingly. Data comes from a CSV of missing migrants, with country shapes from World Atlas TopoJSON.

RRay Yang

95% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore missing migrant incidents worldwide. A brushed time range in the histogram filters the circles displayed on the map, which use d3.geoNaturalEarth1 and d3.geoPath for geographic projection. Data comes from the Missing Migrants Project CSV. The React app uses d3.scaleSqrt for bubble sizing, d3.bin for histogram binning, and d3.brushX for interactive selection.

AAga Domanska

95% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a world bubble map with a date histogram, both rendered as SVGs in React. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to plot migrant deaths and disappearances, with circle sizes scaled by `d3.scaleSqrt`. The histogram bins reported dates into months using `d3.histogram` and `d3.timeMonths`, summing totals per bin. A `d3.brushX` on the histogram filters the map’s data through a shared brush extent, enabling interactive cross-filtering between views. Data comes from the Missing Migrants Project CSV.

AAhmed Mamdouh

94% match

Loading thumbnail…

Fork of Fork of Multiple Views with Brushing

This visualization combines a bubble map with a date histogram to explore missing migrants globally. The map projects city locations using a natural Earth projection and scales circle radii by the square root of the death count. Brushing on the histogram filters the map in real-time, using `d3.brushX` to select a date range. The React app uses `d3.scaleSqrt`, `d3.geoPath`, and `d3.histogram` to process data from the Missing Migrants dataset and render SVG marks.

RRupendra Pamisetty

94% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram into a single SVG view, showing the total number of dead and missing migrants over time and across geographic locations. Users can brush a time range in the histogram to filter which incidents appear on the map. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land and graticules from World Atlas TopoJSON, while circles sized with `d3.scaleSqrt` encode mortality counts. The histogram is built with `d3.bin`, `d3.scaleTime`, and `d3.brushX`. Data comes from a CSV of migrant incidents.

Eevers-codeshop-ai

93% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This example combines a bubble map and a date histogram to visualize global migrant deaths and disappearances. The map uses d3.geoNaturalEarth1 projection to plot circles sized with d3.scaleSqrt for each incident’s total dead and missing, while the histogram aggregates the same metric by reported date. A d3.brushX selection on the histogram filters the map’s circles to show only incidents within the brushed date range. The visualization is built with React and renders SVG elements, using data from the Missing Migrants Project and world atlas TopoJSON.

Zzongkenchai

93% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a world bubble map with a date histogram, enabling linked brushing and filtering. The map displays the total number of dead and missing migrants by location, with circle size proportional to the count. Users brush a time range on the histogram to filter the map’s data in real time. Built with React and D3 version 5, it uses D3’s `geoNaturalEarth1` projection, `geoPath`, `geoGraticule`, and `scaleSqrt` for the map, and `scaleTime`, `histogram`, `brushX`, and `select` for the histogram. Data comes from the Missing Migrants Project, with country boundaries from World Atlas TopoJSON.

RRupendra Pamisetty

93% match