Skip to main content
SimilarExport ZIP
100%

9:58 map + bin

✓ Published1🌍 Public
Uumgi
Last edited Mar 3, 2021
Created on Mar 3, 2021

This example combines a proportional-symbol world map with a time-series histogram of monthly totals for dead and missing migrants, sourced from a CSV of global incident records. The map projects each incident’s coordinates using `d3.geoNaturalEarth1` and sizes red circles via `d3.scaleSqrt`, with country polygons colored by a random hue from `d3.hsl`. The lower panel uses `d3.scaleTime` and `d3.histogram` (with `d3.timeMonths` thresholds) to bin incidents by reported date, then renders the counts as SVG rectangles; axes and ticks are built with React components using `d3.scaleLinear` and `d3.timeFormat`.

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…

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

Combined map and histogram

A combined map and histogram visualizes the geographic distribution and temporal trends of missing migrants. The map projects city locations using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with bubble sizes scaled by the square root of the total dead and missing count. Below, a time-series histogram bins reported dates monthly using `d3.histogram`, with bar heights summing the casualties per month. The visualization uses React for component structure and SVG for rendering, with data from the Missing Migrants CSV and world atlas TopoJSON.

FFonda Irena Santoso
84% 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
84% match
Loading thumbnail…

Missing Migrants Map & Hist with React & D3

This visualization combines a proportional-symbol world map with a time-series histogram to show the global distribution and monthly totals of dead and missing migrants. The map uses an Equal Earth projection with `d3.geoPath` and `topojson` world atlas data, sizing circles by the square-root scale of incident counts. The histogram bins incident dates into months using `d3.bin` and `d3.timeMonths`, summing deaths per bin via `d3.sum`. Both views render as SVG, built with React components and D3 v7, drawing from the Missing Migrants Project dataset.

MManon ROMAIN
84% match
Loading thumbnail…

Missing migrants map / histogram

A world map displays circles sized by the total number of dead and missing migrants at each reported location, overlaid on a natural Earth projection rendered with d3.geoPath. A time histogram below aggregates the same data by reported date, using d3.bin and d3.timeMonths to sum deaths per month. Both visualizations use React state and D3 scales (d3.scaleSqrt, d3.scaleTime, d3.scaleLinear) to encode values, with data loaded from a CSV via d3.csv and world geography from a TopoJSON file.

LLewis Ward
84% match
Loading thumbnail…

Missing Migrants Map + Histogram Combined

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 proportional circles sized by the total dead and missing per location, while the histogram shows monthly totals over time. The code applies d3.geoPath for map rendering and d3.bin with time thresholds for histogram aggregation. React manages the component structure, with data loaded from a CSV of the Missing Migrants Project. SVG rendering renders both the map and the histogram, with a square root scale controlling circle radii.

BBen Brophy
84% match
Loading thumbnail…

Missed Migrants on a Map and Date Histogram

This visualization combines a proportional-symbol world map with a time-series histogram to explore migrant deaths and disappearances. The map uses `d3.geoPath` and `d3.geoNaturalEarth1` to project circular marks scaled by the square root of the “Total Dead and Missing” count, overlaid on land and graticule outlines. A date histogram below aggregates these counts by month, using `d3.bin` and `d3.timeMonths`, with bars colored to match the map’s teal palette. Data is loaded via `d3.csv` from a Missing Migrants Project subset.

Ee-ines
84% match