Skip to main content
SimilarExport ZIP
100%

Missing Migrants (Again)

✓ Published1🌍 Public
WWaseem Medhat
Last edited Dec 6, 2020
Created on Nov 29, 2020

This scatterplot visualizes the relationship between reported dates and the total dead and missing for migrants, using React and D3 v5. Each circle represents one incident, positioned by date on the x-axis and casualty count on the y-axis. The code builds scales with d3.scaleTime and d3.scaleLinear, renders axes through custom components, and loads CSV data via d3.csv. The SVG output applies a teal fill to marks and styled grid lines.

AI-generated description

Repeating the Datavis 2020 series of videos for the missing migrants visualization.

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants Part I

This scatterplot visualizes the total number of dead and missing migrants over time, with each circle representing a reported incident date and casualty count. The visualization uses React to render SVG elements, with D3 scales (scaleTime, scaleLinear) mapping data to axes. The code loads CSV data via d3.csv, applies custom tick formatting with timeFormat, and renders axes through reusable AxisBottom and AxisLeft components. Circle marks are drawn using D3's data-binding approach within a React component structure, styled with a teal fill color.

WWaseem Medhat
96% match
Loading thumbnail…

Missing Migrants

This scatterplot displays reported dates of missing migrant incidents against the total dead and missing, using an SVG rendered with React and D3 v7 scales. The chart plots each incident as a circle, with time on the x-axis and casualty counts on the y-axis, colored in teal. Data is loaded via `d3.csv` from a GitHub Gist, and axes are constructed with `scaleTime` and `scaleLinear`. Native SVG `<title>` elements provide tooltips showing the formatted date on hover.

KKevin McMorrow
95% match
Loading thumbnail…

Missing Migrants

This scatterplot visualizes reported dates versus total dead and missing migrants, with each circle representing a data point and hovering to reveal the exact date. The visualization is built with React and renders as an SVG using D3 v5’s `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` functions for axes and ticks. Data is loaded via `d3.csv` from a GitHub-hosted subset of the Missing Migrants dataset, and the circles are colored teal with a Poppins font for labels.

NNikhil Reddy Manda
94% match
Loading thumbnail…

Missing Migrants Scatter

This scatter plot charts the reported dates of migrant incidents against the total number of dead and missing, revealing temporal patterns in the data. Using D3’s `scaleTime` and `scaleLinear` for axes and `React` components for rendering, each circle represents an incident with a native SVG `<title>` tooltip. The visualization loads CSV data from a GitHub gist via `d3.csv`, with React state management handling asynchronous data retrieval and rendering a loading message until the dataset arrives.

AAndre J Denais
94% match
Loading thumbnail…

Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single reported incident. The x-axis maps the reported date using a time scale, while the y-axis shows the total number of dead and missing individuals on a linear scale. Built with React and D3.v5, the visualization renders SVG circles with tooltips that display the date on hover. The code utilizes D3’s `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` APIs, along with the `csv` function to load the data from a GitHub gist. Axes are constructed from reusable React components, and the plot includes clearly labeled axes for time and casualty counts.

CCurran Kelleher
94% match
Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot displays reported incidents of missing migrants over time, with each circle representing a reported date and the corresponding total number of dead and missing individuals. The visualization uses React to render SVG elements, while D3 v5 handles data loading via `csv()` and scales with `scaleTime()` and `scaleLinear()`. Custom axis components generate the time-based x-axis with formatted date ticks and a linear y-axis, with tooltips revealing exact dates for each data point. The dataset comes from a CSV file of global missing migrant reports.

Eelena
94% match
Loading thumbnail…

Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, where each circle represents a single migration event, plotted by reported date on the x-axis and total dead and missing on the y-axis. The visualization uses React with D3 v5 scales and tick generators, rendering marks as SVG circles with hover tooltips showing the exact date. The y-axis uses a linear scale to show casualty counts, while the x-axis employs D3's time-based `scaleTime` for chronological ordering. Data is loaded asynchronously from a CSV file using D3's `csv` parser.

MMohammed Banani | MbDev
93% match
Loading thumbnail…

Missing Migrants Part II

This visualization plots the number of dead and missing migrants over time, using a scatter plot to show each reported incident. The x-axis represents the reported date, while the y-axis shows the total dead and missing count. The chart uses React to render SVG elements, with D3.js v5 providing scales and axes. The code employs `scaleTime` and `scaleLinear` for axis scaling, `extent` to find data domains, and `histogram` to bin the data, though only the raw scatter points are displayed via the `Marks` component. Data is loaded from a CSV file.

WWaseem Medhat
93% match