Skip to main content
SimilarExport ZIP
100%

React Performance Optimization - Episode 45

✓ Published0🌍 Public
Rroc286
Last edited Mar 17, 2022
Created on Mar 16, 2022

This interactive visualization combines a world bubble map and a time-series histogram to explore global migrant deaths in 2019. Users brush over the histogram to filter the map, which plots circles sized by the number of dead and missing at each location. The code uses React with `useMemo` for performance, D3 v5 utilities like `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`, and renders via SVG. Data comes from the Missing Migrants Project and world boundaries from World Atlas TopoJSON.

AI-generated description

Memoized

  • xScale
  • binnedData

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.

This iteration is optimized for performance using React's useMemo hook.

MIT Licensed

Similar vizzes

Loading thumbnail…

45) React Performance Optimization

This interactive visualization combines a bubble map and a time-series histogram to explore missing migrant incidents. The map projects circles scaled by the square root of the total dead and missing, while brushing the histogram filters the map's displayed data. The code uses React with d3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for the map, and `scaleSqrt`, `scaleTime`, `bin`, and `brushX` for the histogram. Data is loaded via d3's `csv` function.

Llefat92
92% 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
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
87% match
Loading thumbnail…

React world map + migrant death/missing points + histogram

This visualization combines a world map with a histogram of migrant deaths and missing persons. The map uses a D3 natural Earth projection with SVG paths for land, borders, and graticules, overlaid with circles scaled by the square root of the reported deaths. Below, a time-based histogram bins monthly totals using d3.bin and displays them as rectangular bars. Data is loaded from CSV and TopoJSON sources, rendered with React, with tooltips showing counts and dates.

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

Final project

The visualization combines a bubble map with a time-series histogram to display migrant deaths and disappearances worldwide. The map uses a d3.geoNaturalEarth1 projection with d3.geoPath to render world landmasses, graticules, and country boundaries, while bubble sizes encode the total dead and missing through a d3.scaleSqrt. A brushed d3.brushX on the histogram filters the map’s circles interactively, with data sourced from the Missing Migrants Project CSV. React’s useMemo optimizes rendering of the static map layers and computed scales.

HHanqin Zhou
86% match
Loading thumbnail…

Missing Migrants (part 7) : Optimizing performance

A dashboard maps migrant deaths worldwide alongside a time-series histogram, with a linked brush filtering the map’s circles by date range. Built with React and D3 v7, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for circle sizing, and `brushX` for interactive filtering. The histogram aggregates monthly totals via `bin` and `timeMonths`, with axes rendered from `scaleTime` and `scaleLinear`. Data comes from the Missing Migrants Project CSV, with geographic boundaries from TopoJSON.

JJun Suzuki
86% match
Loading thumbnail…

Missing Migrants Multiple Views with Brushing React Performance Optimization

This visualization shows the geographic distribution and temporal trends of missing migrants worldwide, with a bubble map of incident locations and a linked date histogram for time-based filtering. Brushing the histogram filters the map’s circles in real time. Built with React and D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for bubble sizing, and `d3.brushX` for interactive selection, with `useMemo` and `useEffect` optimizing performance. Data comes from the Missing Migrants Project CSV.

MMichael Bergerson
86% match