Optimizing Multiple Views

100%

Optimizing Multiple Views

✓ Published0🌍 Public

Last edited Jun 14, 2022

Created on Jun 14, 2022

Forked from Multiple Views With Brushing

A world map displays missing migrant incidents as semi-transparent circles scaled by the square root of the death toll, with a linked date histogram below. Brushing the histogram filters the map’s circles to the selected time range. The visualization uses React, D3 v5’s `geoNaturalEarth1`, `geoPath`, and `scaleSqrt`, with brushed data filtered via `brushX` and `event.selection`. Data comes from the Missing Migrants Project CSV and world-atlas TopoJSON.

AI-generated description

A map of the world with missing migrants as hotspots. Has brushing! using data from: 'https://missingmigrants.iom.int/data' 'https://unpkg.com/world-atlas@2.0.2/countries-50m.json'

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Views - Migrant Data

This example combines a world map and a time-series histogram to visualize migrant deaths and missing persons. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath`, with circle sizes scaled by the square root of fatalities, while the histogram bins monthly totals. A brush on the histogram filters the map’s circles interactively. Data comes from a CSV of Missing Migrants records, and rendering uses React with SVG and D3 v5 scales, axes, and the `brushX` API.

Jjulesgentry

91% match

Loading thumbnail…

Multiple Views Cleanup

This interactive visualization combines a world map with a time-series histogram to explore missing migrant data. The map uses a D3 geoNaturalEarth1 projection to render country boundaries from the World Atlas TopoJSON, with circles scaled by the square root of the death toll. The lower panel, built with d3.bin and timeMonths thresholds, aggregates deaths by reported date. The React component loads data from a CSV of the Missing Migrants Project, using d3.csv and topojson.feature to process geographic and tabular information.

CChris Briggs

91% match

Loading thumbnail…

Multiple Views with Brushing Faster

A world map displays migrant fatalities with scaled circles, while a time-series histogram below shows monthly death counts. Brushing across the histogram filters the map’s circles to the selected date range. The visualization uses React with D3 v5 for `geoNaturalEarth1` projection, `geoPath`, `scaleSqrt`, `brushX`, and `bin` APIs. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Ttharuta

90% match

Loading thumbnail…

Multiple Views with Fast Brushing

A world map displays the global distribution of missing migrants, with circles sized by the total number of dead and missing. A linked time histogram below shows the same data aggregated by month, with a d3.brushX selection filtering the map’s circles in real time. Using React’s useState and useEffect, the example combines d3.geoNaturalEarth1, d3.geoPath, and d3.scaleSqrt with a TopoJSON world atlas, while the histogram uses d3.bin and d3.scaleTime. Data comes from the Missing Migrants Project.

AAnthony Ynami

90% match

Loading thumbnail…

Optimizing with React

A world map displays the global distribution of missing migrants, with circle size encoding the total number dead or missing for each location. A time-series histogram below the map shows the monthly count of missing migrants, and brushing on this histogram filters the map’s circles to the selected date range. The visualization uses React for component structure, D3's `geoNaturalEarth1` projection and `geoPath` for map rendering, `scaleSqrt` for circle sizing, and a D3 `brushX` to control filtering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

Ddaneslutzky

90% match

Loading thumbnail…

Multiple Views

This interactive visualization combines a world map and a time-series histogram to display missing migrant incidents. The top view uses a natural Earth projection with proportional circles sized by the square root of the reported deaths, while the bottom histogram aggregates the same data by month. Built with React and D3 v7, the example employs d3.geoPath for map rendering, d3.bin for histogram binning, and d3.scaleSqrt for circle sizing. Data comes from a CSV of global missing migrants.

KKai Stewart

90% match

Loading thumbnail…

Missing migrants multiple views

This visualization presents multiple views of missing migrant data from a global 2021 dataset. A world map using a natural Earth projection displays circles scaled by the square root of total dead and missing per location, with tooltips showing exact counts. Below, a date histogram bins reported deaths monthly, stacking totals by time. Built with React and D3 v6, the map uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for geographic rendering, while the histogram employs `bin`, `scaleTime`, `scaleLinear`, and `scaleSqrt` for aggregation and scaling. SVG renders all marks, with the world atlas sourced from TopoJSON.

MmohitPassan

89% match

Loading thumbnail…

[SR] Missing Migrants -- Brushing on Multiple Views

This example shows missing migrant deaths and disappearances on a world map, with a time-series histogram below displaying monthly totals. Brushing across the histogram filters the map’s circles to only show incidents within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with World Atlas TopoJSON, while the histogram uses `d3.bin` and `d3.brushX`. React manages state, and data comes from a CSV of missing migrant records.

Ssuserocc

89% match