Skip to main content
SimilarExport ZIP
100%

Histogram + map + brushing

✓ Published0🌍 Public
MMatias Conde
Last edited Oct 13, 2023
Created on Oct 12, 2023

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.

AI-generated description

A program that loads in some data CSS Named Colors using D3 utilities and uses React state to Keep track of the data.

MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Map and Histogram with Brushing

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

Nnexus1058
90% 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
90% match
Loading thumbnail…

Polished Combined map and histogram with Brushing

The visualization pairs a natural Earth projection map with a time-series histogram, showing the total number of dead and missing migrants by reported date and location. A brushing interaction on the histogram filters the map’s circular markers, which are sized with d3.scaleSqrt based on migrant counts. The map uses d3.geoNaturalEarth1 and d3.geoPath with TopoJSON world-atlas data, while the histogram is built with d3.bin, d3.brushX, and React.

FFonda Irena Santoso
89% match
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
88% match
Loading thumbnail…

10:32 brushing

A choropleth-style bubble map of global migration incidents is linked to a brushed date histogram. The map displays circles sized by the total number of dead and missing people, with colors assigned per country. Brushing the histogram filters the map’s circles to show only data within the selected date range. The visualization uses React for state management, d3.scaleSqrt for sizing, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.brushX for the histogram brush, and data from the Missing Migrants Project.

Uumgi
88% match
Loading thumbnail…

Multiple Views with Brushing

This example combines a geographic bubble map with a time-series histogram, linked through interactive brushing. The map displays the total number of dead and missing migrants by location, with circle sizes scaled using d3.scaleSqrt, while the histogram aggregates the same data by month using d3.bin and d3.timeMonths. Dragging a brush across the histogram filters the map’s circles to show only incidents within the selected date range, implemented with d3.brushX and React state. Both views use SVG rendering via d3.geoNaturalEarth1 and d3.geoPath for the map, with data sourced from the Missing Migrants Project CSV.

BBen Seebeck
87% 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
87% match