Migrant Chart

100%

✓ Published2🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This chart displays the total number of dead and missing migrants over time, using a scatter plot where each point represents a reported date and its corresponding death toll. The visualization loads data from a CSV file using D3’s `csv` utility and React state, then renders the chart with SVG elements. The x-axis employs `scaleTime` with a formatted date tick label, while the y-axis uses `scaleLinear` to map the count values. The React components for axes and data marks are built with `d3` utilities and styled via Poppins font and custom CSS classes.

AI-generated description

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

Plotting the SF temeprature dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Migrant

This visualization shows the total number of dead and missing migrants over time in 2019, plotted as a scatterplot of individual data points on an SVG canvas. Each circle represents a reported incident, with its position determined by the reported date on the x-axis and the total dead and missing count on the y-axis. The chart includes labeled axes and tick marks, styled with a custom color palette. Built with React and D3 v5, the code uses `scaleLinear`, `scaleTime`, and `extent` to compute scales, while the data is loaded via `csv` from a URL and processed in the custom `useData` hook.

MMark Lam

93% match

Loading thumbnail…

Migrant Deaths

A line chart displays the total number of dead and missing migrants over time, with each reported date plotted along the x-axis and the corresponding death count on the y-axis. The visualization uses React with D3 v7, employing `scaleTime`, `scaleLinear`, `line`, and `curveCardinal` to generate the smooth path and individual data points. Data is loaded from a CSV file containing global migrant incidents. Small circles with tooltips on hover provide additional details for each date.

JJohn Lewis

93% match

Loading thumbnail…

Migrant Deaths

A scatterplot visualizes reported migrant deaths over time, with each circle representing a date and the total number of dead and missing. The visualization uses D3 utilities (`scaleTime`, `scaleLinear`, `extent`, `timeFormat`) to compute scales and axes while React renders SVG elements. Data is loaded via D3’s `csv` from a Missing Migrants Project subset, with axes and circles styled subtly.

Ffjvoris

92% match

Loading thumbnail…

Migrant Chart Log Scale

This visualization plots the total number of dead and missing migrants over time, using a logarithmic y-axis to accommodate the wide range of values in the dataset. The chart displays individual data points as circles, with tooltips showing the exact reported date for each point. Built with React and D3 v7, the code uses scaleTime and scaleLog for the axes, while the data is loaded asynchronously via d3.csv from a Missing Migrants subset. The SVG rendering includes custom axis components and styled tick marks.

Jjbruzzo

92% match

Loading thumbnail…

Migrant Deaths

This chart visualizes the total number of migrants reported dead or missing over time, using a bar chart where each bar represents a monthly bin. The data is loaded from a CSV file and processed using D3’s `bin` and `timeMonths` functions to aggregate the counts, while the y-axis scales the maximum total. The visualization is rendered as SVG elements within a React application, with axes and marks generated by custom components like `XAxis`, `YAxis`, and `Marks`. The chart highlights the temporal distribution of migrant fatalities, with tooltips showing exact totals on hover.

PPadoSensei

91% match

Loading thumbnail…

Missing Migrants

This visualization plots the number of dead and missing migrants over time, with each circle representing a reported incident. The y-axis shows the total dead and missing, while the x-axis displays dates using `scaleTime` and `timeFormat`. The data comes from a CSV file of Missing Migrants Global records. React manages the component state, while D3 v5 functions like `csv`, `scaleLinear`, and `extent` handle data loading and scaling. The chart renders as an SVG with custom axes and marks components.

MMark Lam

91% match

Loading thumbnail…

Missing migrants

This visualization displays the number of dead and missing migrants reported over time, plotting each report as a dot on a scatter plot with a time-based x-axis and a linear y-axis for the count. The chart uses a React component structure, with D3 utilities like `scaleTime`, `scaleLinear`, and `extent` from d3 to compute scales and domains, while SVG elements render the points and axes. Data is loaded asynchronously via d3's `csv` function from a remote source, and the graph includes axis labels, tick marks, and tooltip functionality on each circle.

LLewis Ward

91% match

Loading thumbnail…

Missing Migrants Line Chart

This line chart visualizes the total number of dead and missing migrants over time, with data sourced from a CSV file of global migration incidents. The chart aggregates reported dates into monthly bins using d3.bin and d3.timeMonths, then sums the fatalities per bin. The visualization uses SVG rendering with React components for the axes and marks, scaling time with d3.scaleTime and linear values with d3.scaleLinear. Data loading is handled via d3.csv within a custom React hook, and the chart includes labeled axes and interactive circle markers for each data point.

Iiblub

91% match