A D3 map

100%

✓ Published0🌍 Public

Last edited Jan 28, 2021

Created on Jan 28, 2021

This visualization combines a D3 natural Earth projection map with a time-series histogram. The map displays circles sized by migrant death tolls using `geoNaturalEarth1` and `geoPath`, while the histogram bins reported dates into monthly intervals using `d3.histogram` and `scaleTime`. The React app loads country boundaries from World Atlas TopoJSON and migrant data from a CSV, rendering all elements as SVG.

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…

A D3 map

This interactive visualization shows migrant deaths and disappearances worldwide, combining a geographic bubble map with a temporal histogram. A D3 natural Earth projection renders the world map, with semi-transparent circles sized by death counts using a square root scale. The histogram below aggregates monthly totals, and both views share the same dataset of recorded incidents. The visualization is built with React, D3 v4 geo and scale utilities, and SVG rendering, using data from the Missing Migrants Project.

Mmaavwin6

89% match

Loading thumbnail…

multiple views of map + chart D3/react

This visualization combines a natural Earth projection world map with a time-series bar chart to display global migrant fatalities. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to render country boundaries and graticules, with circle sizes scaled by d3.scaleSqrt based on reported deaths. The histogram below aggregates monthly death totals using d3.bin and d3.timeMonths, drawing both bars and a smooth curve via d3.curveNatural. React manages the component structure, while data comes from a CSV of missing migrant incidents and TopoJSON world atlas boundaries.

MMohammed Banani | MbDev

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

87% match

Loading thumbnail…

Multiple diagrams and maps

A map and a time-series histogram visualize missing migrant data. The map uses a D3 natural Earth projection (`geoNaturalEarth1`) to place circles sized by the square root scale of casualties at their coordinates. The histogram below bins reported dates into monthly intervals using `d3.histogram` and `d3.timeMonths`, drawing rects scaled by total deaths. Both use `d3.scaleSqrt` and `d3.scaleLinear` within a React SVG rendering.

Ppatasky

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

87% match

Loading thumbnail…

Multiple Views Cleanup

This example combines a world map with a date histogram to visualize migrant deaths and disappearances in 2019. The map uses a natural Earth projection and scaled circles to show the geographic distribution of incidents, while the histogram displays the monthly count over time. D3’s `geoNaturalEarth1`, `geoPath`, and `scaleSqrt` handle the map and circle sizing, while `scaleTime`, `histogram`, and `timeMonths` bin the temporal data. City and country boundaries come from the World Atlas TopoJSON, and the dataset is loaded via `d3.csv`. The visualization is rendered as SVG within a React component structure.

MmangoJ0106

86% match

Loading thumbnail…

Migrants on a Map

This visualization displays migrant deaths as proportional circles on a natural Earth projection map. The data, sourced from a CSV file containing coordinates and death counts, is plotted using d3.scaleSqrt to size each circle according to the number of fatalities. The map is rendered with React and SVG elements, utilizing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, with d3.geoGraticule adding grid lines. The world atlas features come from TopoJSON, and the circles are semi-transparent green to show overlapping incidents.

Ww.fukuyama@gmail.com

86% match

Loading thumbnail…

Map and Histogram

A map and histogram visualize the global distribution and monthly totals of migrant deaths and disappearances. The map uses a natural Earth projection with graticules and country borders, while scaled dark red circles represent the number of dead and missing at each location. The histogram below aggregates these incident counts by month. The visualization is built with React, D3 v5 (including `geoNaturalEarth1`, `geoPath`, `scaleSqrt`, `scaleTime`, and `bin`), and SVG rendering, pulling data from a CSV of missing migrants and world atlas TopoJSON.

Nnexus1058

86% match