Skip to main content
SimilarExport ZIP
100%

Multiple Views with Brushing

✓ Published0🌍 Public
Ddumbdataguy@gmail.com
Last edited Feb 3, 2024
Created on Jan 28, 2024

This example shows global migration incidents through a bubble map and a linked time-series histogram. Brushing a time range in the histogram filters the circles displayed on the map, revealing spatial patterns of events. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for world boundaries, while the histogram uses `d3.bin` and `d3.brushX`. Data comes from a CSV of Missing Migrants, with circle size scaled by `d3.scaleSqrt` based on reported deaths.

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…

Multiple Views with Brushing

This example pairs a natural Earth bubble map with a time-series histogram, both rendered as SVG, to visualize global migrant deaths and disappearances. Brushing on the histogram filters the map’s circles in real time, showing only incidents within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projections and country boundaries from TopoJSON, while the histogram aggregates monthly totals with `d3.bin` and `d3.sum`. Data comes from the Missing Migrants Project, with circle sizing scaled by `d3.scaleSqrt`. React manages state, and D3’s `brushX` drives the interactive filtering.

ZZG
94% match
Loading thumbnail…

Multiple Views with Brushing

Two coordinated views show global migration incidents, with a scatterplot-style map on top and a date histogram below. A temporal brush on the histogram filters the geographic bubble map, which uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render the world atlas. The histogram uses `d3.bin`, `d3.timeMonths`, and `d3.scaleSqrt` for the bubble sizing, while `d3.brushX` enables interactive selection. Deceased and missing migrant totals drive both the bubble radii and histogram bar heights.

Ddaneslutzky
94% match
Loading thumbnail…

Multiple Views with Brushing

This example combines a world map of migration incidents with a time-series histogram below it. Brushing on the histogram filters the map’s circles, which scale by the total dead and missing. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas land and graticules, while the histogram bins `d3.timeMonths` and sums values. Data comes from the Missing Migrants Project CSV, rendered as SVG via React with D3 scales.

Yyuzhang21
93% match
Loading thumbnail…

Multiple Views with Brushing

This example demonstrates linked brushing between a world bubble map and a time-series histogram, both rendered as SVG in React. The map plots migrant deaths and missing persons by location with circle radii scaled by d3.scaleSqrt, while the histogram aggregates the same metric monthly using d3.bin and d3.timeMonths. Brushing the histogram with d3.brushX filters the map’s displayed circles in real time. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map projection, and loads data from a CSV of the Missing Migrants Global 2019 subset.

RRajat Dangat
93% match
Loading thumbnail…

Multiple Views with Brushing

This example shows a world map with bubble markers indicating the total number of dead and missing migrants, alongside a time-series histogram of the same data. Brushing a date range in the histogram filters the bubbles shown on the map. The visualization uses React state to manage the brush selection, D3’s `geoNaturalEarth1` projection and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `brushX` for interactive filtering. Data comes from a CSV of migrant incidents loaded via `d3.csv`.

NNikita Toropov
93% match
Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrant incidents, with bubbles sized by the total number of dead and missing. A time-series histogram below the map displays the same data binned by month. Brushing the histogram filters the map’s bubbles in real time. The visualization uses React for the component structure and `d3.geoNaturalEarth1` with `d3.geoPath` for the map, alongside `d3.brushX` and `d3.scaleTime` for the interactive filtering.

Ee-ines
93% match
Loading thumbnail…

Multiple Views with Brushing

Two coordinated views show migration incidents by location and time. A bubble map projects incident coordinates using d3.geoNaturalEarth1 and d3.geoPath, with circle sizes scaled by the square root of deaths and missing persons. A time histogram below aggregates incidents by month using d3.bin and d3.timeMonths, summing the same metric. Brushing the histogram with d3.brushX filters the map’s circles to the selected date range. Data comes from a CSV of H1B visa records, while state boundaries use TopoJSON from the US Atlas.

Yyinhao0424
93% match
Loading thumbnail…

Multiple Views with Brushing - Working

This example displays migration incidents on a world map with bubble markers sized by the total number of dead and missing, alongside a time-series histogram of the same metric. A brushable time range on the histogram filters the map’s bubbles to show only incidents within the selected period, demonstrating linked views. The visualization uses React, D3 version 5, and SVG rendering, with `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for brushing, and data from the Missing Migrants Project.

RRMartins11
93% match