Map and Bar

100%

✓ Published1🌍 Public

Last edited Mar 14, 2023

Created on Mar 14, 2023

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants on Map and Bar

The visualization combines a world map with a time-series bar chart to explore global migrant deaths and disappearances. Geographic locations are plotted as circles scaled by the square root of the total dead and missing, while the lower histogram aggregates the same metric by month, using a D3 time-scale and binning. The map uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for the projected landmasses, and the chart is built with React components. Data comes from a CSV file of Missing Migrants incidents, rendered entirely as SVG.

Ddumbdataguy@gmail.com

91% match

Loading thumbnail…

Missing Migrants on a Map with Bars

This visualization combines a world map with a time-series bar chart to show the global distribution and monthly trends of missing migrants. The map uses a natural Earth projection with semi-transparent circles scaled by the square root of the total dead and missing, while the lower histogram aggregates the same metric by month. Built with React and D3 v7, the map employs `geoNaturalEarth1` and `geoPath` for geographic rendering, while the histogram uses `scaleTime`, `histogram`, and `scaleLinear` to bin data from the Missing Migrants Project CSV. SVG renders all marks, with tooltips on bars for exact values.

BBen Seebeck

90% 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…

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

87% 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

87% match

Loading thumbnail…

a

This visualization combines a world bubble map with a time-series bar chart to explore missing migrant incidents by location and date. Circles sized proportionally to the total dead and missing count are projected using `d3.geoNaturalEarth1` and `d3.geoPath`, overlaid on land features and graticules from TopoJSON. A linked brush on the histogram, built with `d3.brushX`, filters the map’s data by reported date. React’s `useMemo` optimizes rendering, and the data originates from the Missing Migrants Project CSV.

Bbigstonecompany

87% match

Loading thumbnail…

34. Missing Migrants Multiple Views

This visualization combines a world map with a time-series bar chart to display data on missing migrants. The map uses a natural Earth projection with sized circles to show total deaths and missing persons by location, while the histogram aggregates the same metric by reported date. Built with React and D3 v5, the example employs `geoNaturalEarth1` for projection, `scaleSqrt` for circle sizing, and `bin` with `timeMonths` thresholds for the histogram. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

PPrashish Paudel

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