Multiple Views with Brushing for debugging

100%

Multiple Views with Brushing for debugging

✓ Published0🌍 Public

Last edited Oct 20, 2021

Created on Oct 20, 2021

Forked from Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore missing migrant data, with brushing on the histogram filtering the map's circles. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries and graticules, while circle size encodes the total dead and missing count via `d3.scaleSqrt`. The histogram's brush, implemented with `d3.brushX`, updates the filtered dataset in real time, demonstrating linked views for debugging data patterns. Data comes from the Global Missing Migrants dataset, and the rendering uses SVG within a React framework.

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 w/ Brushing - Episode 44

This visualization combines a bubble map and a date histogram into a linked view for exploring missing migrant data. Brushing the histogram filters the map, showing only incidents within the selected time range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render world boundaries, with circle radii scaled by `d3.scaleSqrt` based on total dead and missing. The histogram aggregates counts by month using `d3.bin` and `d3.timeMonths`, with brushing implemented via `d3.brushX`. Data comes from a CSV of global missing migrants, rendered in SVG within a React framework.

Rroc286

94% match

Loading thumbnail…

Multiple Views (Brushing)

This interactive visualization combines a bubble map and a date histogram to explore missing migrant incidents. Brushing a time range in the histogram filters the map’s bubbles, which are scaled by total dead and missing using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath for land outlines, while the histogram employs d3.bin and d3.brushX. Data comes from the Missing Migrants Project CSV, rendered as SVG in React.

Bbsolomon103

94% match

Loading thumbnail…

Multiple Views With Brushing

This example shows a world map with bubbles representing missing migrants, sized by the total number of dead and missing, alongside a date histogram of the same data. Brushing the histogram filters the map to show only incidents within the selected time range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.brushX`, `d3.histogram`, `d3.scaleSqrt`, and `d3.scaleTime`. Data comes from the Missing Migrants Project CSV, loaded via `d3.csv`, and renders as SVG.

Rrstrauss127

93% match

Loading thumbnail…

Multiple Views with Brushing

This example combines a bubble map and a date histogram to explore the Missing Migrants Dataset. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from World Atlas TopoJSON, with circle size scaled by the square root of deaths. The histogram below aggregates monthly totals using `d3.bin` and `d3.timeMonths`. Brushing the histogram with `d3.brushX` filters the map’s circles by date range, demonstrating linked views through React state.

Kkrandslam

93% match

Loading thumbnail…

Multiple Views with Brushing

A world map displays migrant deaths and missing persons as scaled bubbles, with a time-series histogram below showing monthly totals. Brushing on the histogram is initiated via `brushX`, though only logging to the console. The visualization uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `histogram` with `timeMonths` thresholds for binning. Data comes from the Missing Migrants Project CSV, rendered with React and D3 v5 in SVG.

Ddanrhymes

93% match

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a world bubble map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the date histogram to filter the map, dynamically updating the displayed circles. The map uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while the histogram uses `d3.bin` and `d3.brushX`. Data comes from a CSV of Missing Migrants Global records, rendered as SVG circles with `d3.scaleSqrt` sizing.

NNikhil Reddy Manda

93% match

Loading thumbnail…

Multiple Views with Brushing

This example presents a global map of missing migrant incidents, with circles sized by the total number of dead or missing. A linked date histogram beneath the map allows brush selection to filter the map’s data points interactively. The visualization uses React with D3 v6, employing `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, and `bin` with `timeMonths` for the histogram. Brushing is implemented via `brushX` and `scaleTime.invert`. Data comes from the Data Canvas Sense Your City dataset.

CCodeDuckie99

93% match

Loading thumbnail…

Multiple Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths and disappearances worldwide. The map displays incidents as proportional circles overlaid on natural Earth projections using `d3.geoNaturalEarth1` and `d3.geoPath`, while the histogram aggregates monthly totals. Users can brush the time axis with `d3.brushX` to filter the map’s displayed incidents in real time. Both views use SVG rendering within a React framework, with data sourced from the Missing Migrants Project CSV and country boundaries from World Atlas TopoJSON.

GGeniXiong

93% match