Fork of Multiple Views with Brushing

100%

Fork of Multiple Views with Brushing

✓ Published0🌍 Public

Last edited Dec 29, 2023

Created on Dec 29, 2023

Forked from Multiple Views with Brushing

This example presents a dashboard combining a world map of missing migrants with a brushing-enabled time series. The map uses a bubble plot where circle size encodes the total number of dead and missing individuals, projected with `geoNaturalEarth1` and rendered via `d3.geoPath`. The time series histogram, built with `d3.histogram` and `d3.brushX`, allows users to filter the map by date range. The visualization is built with React and D3 v5, using SVG elements, and sources migrant data from a CSV alongside 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.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization shows missing migrants worldwide, with a bubble map displaying locations scaled by death count and a date histogram showing monthly totals. Users brush the histogram’s time axis to filter the map, updating circles dynamically. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map projection, `d3.bin` and `d3.brushX` for the histogram and brushing, and SVG for rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

PPrakash Khunti

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

94% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a geographic bubble map with a time-series bar chart, linked through interactive brushing. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render world landmasses, with circle size encoding total dead and missing migrants. Brushing the histogram filters map points by reported date. Data comes from the Missing Migrants Project CSV, rendered via React with D3 v5, including `scaleSqrt`, `scaleTime`, `histogram`, and `brushX`.

Jjiangruofan

94% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a world map and a time-series histogram to explore missing migrants data. The map displays circles sized by the square-root of the total dead and missing per reported location, using a Natural Earth projection with graticules and land boundaries. A brushable bar chart below filters the map by date range. The code leverages `d3.geoPath` for map rendering, `d3.scaleSqrt` for circle sizing, `d3.brushX` for interactive selection, and `d3.histogram` for binning monthly totals. Data comes from the Missing Migrants Project and world-atlas TopoJSON.

MMohammed Abdul Razak Wahab

94% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a world map of missing migrant incidents with a brushable time-series histogram. The map displays circles sized by the total dead and missing, while the histogram allows users to brush over time ranges to filter the map data. Built with React and D3 v5, it uses `geoNaturalEarth1` projections, `geoPath` for map rendering, `brushX` for temporal selection, and `scaleSqrt` for circle sizing. Data comes from the Missing Migrants Project dataset.

SShan Gao

94% match

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a world map and a time-series histogram to explore migration incidents. A bubble map plots reported locations, with circle area scaled by the square root of the total dead and missing count. Below, a date histogram shows the same metric aggregated by month. Users can brush a time range on the histogram, which filters the map's displayed circles based on the selected date range. The map uses `d3.geoNaturalEarth1` projections, `d3.geoPath`, and `d3.geoGraticule` to render sphere, graticules, and land features from World Atlas TopoJSON. React manages state and rendering, while D3 v5 handles scales, binning (`d3.histogram`), time formatting, and the brushing interaction (`d3.brushX`). Data comes from the Missing Migrants Project subset.

Mmuwu16

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