Map and Histogram with Brushing

100%

Map and Histogram with Brushing

✓ Published0🌍 Public

Last edited May 3, 2021

Created on May 2, 2021

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`.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Map and Histogram with Brushing

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.

SSerind Joshua McCue

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…

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

91% match

Loading thumbnail…

Optimize Multiple view with brushing

This interactive visualization combines a bubble map and a date histogram to explore global migrant deaths and disappearances in 2019. Users brush the histogram to filter the map, which displays circles sized by total dead and missing per location using d3.scaleSqrt. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule over a TopoJSON world atlas, while the histogram bins data by month with d3.histogram. Brushing is implemented with d3.brushX, and the React app manages state for the brush extent.

SShuyu Zheng

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

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

90% match

Loading thumbnail…

Histogram + map + brushing

This example combines a bubble map with a date histogram, using brushing to filter the map by time range. The map displays the total dead and missing migrants by location, with circle sizes scaled via d3.scaleSqrt. The histogram bins reported dates into months using d3.bin and sums values per bin. A d3.brushX selection updates the map’s filtered data. The visualization uses React for state management, d3.geoNaturalEarth1 and d3.geoPath for the geographic projection, and renders all elements as SVG.

MMatias Conde

90% match

Loading thumbnail…

Add brush - Multiple Views Cleanup

This interactive visualization combines a world bubble map and a time-series histogram to explore global migrant deaths and disappearances. A brush on the histogram filters the map’s circles, revealing only incidents within the selected date range. The map uses a `geoNaturalEarth1` projection with `geoPath` to render land and graticules. The histogram bins data by month using `histogram()` and `timeMonths()`. The implementation leverages React hooks, D3 scales (`scaleSqrt`, `scaleTime`), and an SVG rendering pipeline.

GGokulkrishnan1996

90% match