Multiple Views with Brushing

100%

Multiple Views with Brushing

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

Forked from Multiple Views with Brushing

A choropleth-style bubble map displays migrant deaths and disappearances by location, with circle size scaled by the square root of the total count via `d3.scaleSqrt`, rendered over land boundaries and graticules using `d3.geoPath` and `d3.geoNaturalEarth1`. A linked time-series histogram below, binned by month with `d3.histogram`, allows brushing via `d3.brushX` to filter the map’s circles in real time. The React app loads CSV and TopoJSON data asynchronously and uses SVG for all marks.

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

A choropleth-style bubble map displays global migrant deaths and disappearances, with a coordinated histogram showing the same data over time. Brushing a time range on the histogram filters the map’s circles in real time, highlighting temporal patterns. The visualization uses React for component structure, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `brushX`, and `bin`, rendering SVG marks. Data comes from the Missing Migrants Project, with country boundaries sourced from World Atlas TopoJSON.

Ccshm407

93% match

Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map and a time-series histogram show global migrant deaths, with brushing the histogram filtering the map’s city markers. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with world-atlas TopoJSON data, while the histogram applies `d3.bin`, `d3.scaleTime`, and `d3.brushX`. React manages state and rendering, with SVG output.

Iiblub

93% match

Loading thumbnail…

Multiple Views with Brushing

A choropleth-style bubble map and time-series histogram display global migrant deaths and disappearances, with brushing on the histogram filtering circles on the map in real time. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and proportional circle sizes scaled by the square root of the death count. The histogram bins monthly totals using `d3.bin` and applies a brush with `d3.brushX` to link the two views. Data comes from the Missing Migrants Project CSV, with React managing state and D3 v5 rendering SVG elements.

HHollyClarke19

93% match

Loading thumbnail…

Multiple Views with Brushing

This visualization combines a bubble map of global migrant deaths with a brushing-linked time series histogram. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to render country boundaries and proportional circles sized by death counts. Selecting a date range with `brushX` on the histogram filters the map’s data in real time. The React app loads CSV data from Simplemaps and TopoJSON world atlas boundaries, rendering both views as SVG.

JJohn Lewis

92% match

Loading thumbnail…

Multiple Views Brushing

A choropleth-style bubble map displays total dead and missing migrants by location, overlaid on a natural Earth projection rendered with `d3.geoPath`. A linked brushing time-series histogram below, built with `d3.brushX`, filters the map’s circles by reported date when the user drags a selection window. The map uses a `d3.scaleSqrt` for circle radii, while the histogram aggregates data into monthly bins via `d3.histogram`. Both views are React components sharing the same SVG canvas, with data loaded from a CSV of migrant incidents and world atlas TopoJSON.

Ffjvoris

92% match

Loading thumbnail…

Multiple Views with Brushing

Two synchronized views explore migrant deaths and disappearances: a bubble map using a natural Earth projection and a time-series histogram. Brushing a time range in the histogram filters the map’s circles, which are scaled by the square root of the total dead and missing. The React app uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.scaleSqrt`, and `d3.brushX`, with country boundaries from World Atlas TopoJSON and city data from Simplemaps. SVG rendering shows graticules, landmasses, and interactive months.

XXiaoleiGuo

92% match

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths and missing persons. Users can brush a time range in the histogram to filter the map’s displayed circles, which are sized using `d3.scaleSqrt` and positioned with `d3.geoPath` and `geoNaturalEarth1`. A reactive `useState` hook manages the brush extent. The map shows city locations from a CSV dataset, with country boundaries from World Atlas TopoJSON, all rendered as SVG with React and D3 v5.

CCurran Kelleher

92% match

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

92% match