Skip to main content
SimilarExport ZIP
100%

multiple views of map + chart D3/react

✓ Published1🌍 Public
MMohammed Banani | MbDev
Last edited May 13, 2022
Created on May 13, 2022

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.

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

A D3 map

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.

Mmaavwin6
88% match
Loading thumbnail…

Map and Bar

This example combines a world map with a time-series bar chart to visualize reported migrant deaths and disappearances. The map uses a natural Earth projection with proportional circles sized by the square root scale of the total dead and missing per location, while the lower histogram aggregates the same metric by month. The visualization is built with React and D3 v5, using d3.geoNaturalEarth1 and d3.geoPath for geographic rendering, d3.bin and d3.scaleTime for temporal binning, and loads data from a CSV of missing migrants alongside TopoJSON world atlas boundaries.

NNikita Toropov
88% 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
88% 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
88% match
Loading thumbnail…

Migrants Multiple Views

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 with graticules and country boundaries from TopoJSON, plotting circles scaled by `d3.scaleSqrt` to represent the total dead and missing per location. The histogram below aggregates the same data by month using `d3.histogram` and `d3.timeMonths`, with bar heights reflecting cumulative deaths. Both views are rendered as SVG within a React app, using `d3.csv` to load the Missing Migrants dataset and `topojson` for geographic features.

FFAN CHI YU(范紀予)
88% match
Loading thumbnail…

Missing & Death Migrate multi view

This visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map uses a D3 geoNaturalEarth1 projection with geoPath, rendering circles scaled by the square root of the total dead and missing per location, overlaid on graticule and land features from the world-atlas TopoJSON. Below, a React-based histogram bins the data by reported date using D3’s bin and timeMonths, summing casualties per month and displaying bars with hover tooltips. Data comes from a CSV of global migrant incidents.

AAmir
88% match
Loading thumbnail…

Multiple Views Cleanup

This visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map uses a natural Earth projection with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to render land, graticules, and proportional circles sized by `d3.scaleSqrt`. Below it, a date histogram bins monthly totals via `d3.histogram` and `d3.timeMonths`, with axes drawn from provided CSV data of missing migrants. The React framework manages SVG rendering, with `d3.csv` loading the dataset.

NNikhil Reddy Manda
88% match