Skip to main content
SimilarExport ZIP
100%

Optimizing with React

✓ Published0🌍 Public
Ddaneslutzky
Last edited Oct 20, 2021
Created on Oct 20, 2021

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.

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…

Optimizing Multiple Views

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.

Rrstrauss127
90% match
Loading thumbnail…

Missing Migrants on a Map with Fast Brushing Bars (V1)

A world map uses semi-transparent circles to show the geographic distribution of missing migrants, with circle size encoding the total number dead or missing per location. A brushed time-series histogram below the map filters the displayed circles to a selected date range, updating the map dynamically. The visualization is built with React and D3 v5, using `geoNaturalEarth1` and `geoPath` for the map projection, `scaleSqrt` for circle sizing, and `brushX` for the interactive time filter. Data comes from a CSV of migrant incidents sourced from Simplemaps.

AAndre J Denais
88% match
Loading thumbnail…

Missing Migrants on a Map

A world map visualizes the locations and magnitudes of missing migrant incidents, with semi-transparent circles sized by the total number of dead and missing per coordinate. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for land and graticule rendering, while a square-root scale maps incident counts to circle radii. React manages the component state, loading CSV data and world-atlas TopoJSON via hooks. The SVG rendering provides a clean overview of global migration-related fatalities.

Vvmonney
88% match
Loading thumbnail…

React world map + migrant death/missing points + histogram with brush

This React visualization combines a natural Earth projection world map with migrant death and missing person data, plotted as scaled circles whose radius encodes the total count. A linked histogram below displays the monthly distribution of deaths, featuring a brush filter that dynamically updates the map’s displayed points based on the selected date range. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoGraticule, d3.scaleSqrt, d3.bin, d3.brushX, and d3.timeMonths, rendering SVG elements with topojson world atlas data and CSV migrant records.

SSuperShreejit
88% match
Loading thumbnail…

Missing Migrants on a Map with Time

This interactive visualization combines a world map with a time-series histogram to explore the Missing Migrants Dataset. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries, with circles sized by d3.scaleSqrt according to the total dead and missing per event. A linked date histogram below aggregates monthly totals, using d3.bin and d3.scaleTime. The React components manage state and rendering, with tooltips provided by SVG title elements. Data comes from a CSV of reported incidents, and world geography uses TopoJSON from the world-atlas package.

AAlex Stulov
88% match
Loading thumbnail…

React Performance Optimization

This interactive visualization combines a world map and a time-series histogram to explore migration incidents. The map displays circles sized by the total number of dead and missing migrants, while the histogram shows monthly totals, with a brush tool to filter the map’s data by date range. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleTime` and `histogram` for binning, and `brushX` for interaction, with `useMemo` caching to optimize rendering.

NNikhil Reddy Manda
88% match
Loading thumbnail…

40) Missing Migrants on a Map

This example visualizes missing migrants worldwide, with proportional circles indicating the total dead and missing at each incident location. The map uses an equirectangular projection rendered with d3.geoNaturalEarth1 and d3.geoPath, layered with graticules, land masses, and country interiors. React manages the component lifecycle, while d3.scaleSqrt maps the migrant counts to circle radii. Data comes from a CSV of missing migrant incidents, and world geography is loaded from the world-atlas TopoJSON dataset.

Llefat92
88% match
Loading thumbnail…

Missing Migrants map

This map visualizes missing migrant incidents worldwide, with circles sized proportionally to the total number of dead and missing individuals using a d3.scaleSqrt scale. Each circle is positioned at its recorded coordinates via a geoNaturalEarth1 projection and drawn with geoPath for landmasses, graticules, and country interiors from the world-atlas TopoJSON dataset. The React-based visualization uses D3 v7 to load CSV data containing location coordinates and casualty counts, rendering semi-transparent teal circles over a muted geographic backdrop.

Ddaneslutzky
88% match