Skip to main content
SimilarExport ZIP
100%

Multiple Views with Brushing

✓ Published1🌍 Public
AAnthony Zornig
Last edited Jan 29, 2022
Created on Oct 3, 2021

A geographic map of the world displays cities, with circles sized by the "Total Dead and Missing" count. A time-series histogram at the bottom allows brushing to filter the map. The brush selection, implemented with `d3.brushX`, dynamically updates the visible data points. This example uses `d3.geoNaturalEarth1` projection and SVG rendering within a React framework, pulling from a CSV of missing migrant data.

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 world map displays cities, with circle size encoding the total dead and missing; a time-series histogram below shows the same metric over time. Brushing a date range on the histogram filters the map’s circles to events within that span. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for the projection and graticules, while the histogram uses `d3.scaleTime`, `d3.histogram`, and `d3.brushX`. Data comes from a CSV of missing migrants, rendered as SVG within a React app.

EEdward-Elric233
96% match
Loading thumbnail…

Multiple Views with Brushing

This example shows a world map of missing migrants, with circles sized by total dead and missing, alongside a time histogram of the same data. Brushing on the histogram filters the map to show only incidents within the selected date range. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` for the map, `d3.brushX` for brushing, and `d3.bin` for histogram binning. Data comes from the Missing Migrants Project, rendered as SVG.

Jjwlam83
94% match
Loading thumbnail…

Multiple Views with Brushing

A world map displays circles sized by the total number of dead and missing migrants per location, with a time-series histogram below showing monthly totals. Brushing a time range in the histogram filters the map’s circles to that period. The visualization uses React, D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `geoGraticule`, `brushX`, and `scaleSqrt`, rendering SVG with data from the Missing Migrants Project and world atlas TopoJSON.

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

Multiple Views with Brushing

A world map displays circles sized by the total number of dead and missing migrants, with a linked time-series histogram below showing monthly totals. Brushing a date range on the histogram filters the map circles to only those incidents within that period. The visualization uses React with D3 v5, employing `d3.geoNaturalEarth1` for the map projection, `d3.brushX` for interactive selection, and `d3.bin` with `d3.timeMonths` for histogram binning. Data comes from a CSV of global missing migrants, rendered as SVG.

Wwindwaver
93% match
Loading thumbnail…

Multiple Views with Brushing

This example presents a world map with bubbles representing the total number of dead and missing migrants, sourced from a CSV dataset. A time-series histogram below the map aggregates the same data by month. Brushing along the histogram’s x-axis with `d3.brushX` filters the map’s circles in real-time. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic shapes, while React manages the SVG rendering. A sqrt scale determines bubble sizes, and country boundaries come from a TopoJSON world atlas.

Mmtabaka
93% 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