Skip to main content
SimilarExport ZIP
100%

React Scatter Plot: Missing Migrants w/ Log Scale

✓ Published0🌍 Public
Hhunsingeruk@gmail.com
Last edited Oct 21, 2023
Created on Oct 20, 2023

This React-based scatter plot visualizes missing migrant incidents over time, with each point representing a single event and the y-axis using a log scale to accommodate the wide range of reported dead and missing counts. The code uses d3.scaleTime, d3.scaleLog, and d3.bin to aggregate monthly totals, while rendering circles as SVG marks. The visualization filters out events with counts of one or fewer, and uses data from the Missing Migrants Dataset, with axes and labels drawn via custom D3 components within a React component hierarchy.

AI-generated description

A program that shows missing migrant data in a scatter plot.

Data: Missing Migrants Dataset.

Each point in the plot represents a single event.

MIT Licensed

Similar vizzes

Loading thumbnail…

Log scale Missing Migrants Scatter Plot

This scatter plot visualizes missing migrant incidents over time, with each point representing a single event and the y-axis using a log scale to display the "Total Dead and Missing" count. Built with React and D3 v5, the visualization renders as an SVG, using `scaleTime` for the x-axis, `scaleLog` for the y-axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw tick marks and circles. Data comes from the Missing Migrants Dataset, loaded via D3’s `csv` function, with tooltips showing the reported date on hover.

SShuyu Zheng
93% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes missing migrant incidents over time, with the y-axis using a logarithmic scale to accommodate the wide range of reported deaths. The visualization shows each incident as a circle plotted against its reported date and total dead and missing count. The code uses d3.scaleLog and d3.scaleTime for scaling, React for component structure, and SVG for rendering. Data comes from the Data Canvas Sense Your City Dataset, loaded via d3.csv from a GitHub gist.

BBen Seebeck
92% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This interactive scatter plot visualizes the Missing Migrants Dataset, where each point represents a single event and shows the number of dead or missing individuals over time. The visualization uses a log scale on the y-axis to accommodate the wide range of values, with a time-based x-axis formatted as dates. Built with React and D3 v5, it renders as SVG and employs `scaleLog`, `scaleTime`, and `extent` from D3, with custom axis components and circle marks that display tooltips on hover.

Ttrissentety
92% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, where each point represents a single migrant incident positioned by reported date on the x-axis and total dead or missing count on the y-axis. The y-axis uses a logarithmic scale to accommodate extreme variations in incident severity. Built with React and D3 v5, the visualization employs d3.scaleTime, d3.scaleLog, d3.extent, and d3.max for scale construction, rendering SVG circles with tooltips that display formatted dates.

LLaura Johnson
92% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This visualization uses a scatter plot to display the Missing Migrants Dataset, with each point representing a single event where the x-axis shows the reported date and the y-axis shows the total dead and missing. The y-axis uses a logarithmic scale to handle the wide range of values, from 1 to the maximum in the dataset. The implementation leverages React with D3 v5 APIs such as `scaleTime`, `scaleLog`, `extent`, and `timeFormat`, rendering the chart as SVG with custom axis components and marks.

AAlex Stulov
92% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single migration event. The x-axis encodes reported dates using a time scale, while the y-axis uses a logarithmic scale to display the total number of dead and missing, compressing large values for clarity. Built with React and rendered as SVG, the visualization uses d3.scaleLog, d3.scaleTime, and d3.csv for data loading. Axis components are custom React functions that generate tick marks and labels, with tooltips on each circle showing the exact date.

Jj-PGi
92% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This visualization displays the Missing Migrants Dataset as a scatter plot, where each point represents a single migration event. The x-axis encodes the reported date using a time scale, while the y-axis uses a logarithmic scale to show the total dead and missing count. The chart is built with React and D3 v5, using scaleTime and scaleLog for the axes, with SVG circles rendered by a custom Marks component. Tooltips show the full date via native SVG titles.

MMichael Bruno
92% match
Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migrant incident. The x-axis shows the reported date on a time scale, while the y-axis displays the total dead and missing on a logarithmic scale. The visualization uses React with D3 v5, employing scaleTime for dates and scaleLog for the numeric axis, with SVG circles rendered through custom React components. Hovering over a circle reveals the exact date via a tooltip.

Vvmonney
92% match