Scatter Plot

100%

✓ Published3🌍 Public

Last edited Mar 4, 2021

Created on Mar 2, 2021

This example shows a scatter plot of the Missing Migrants Project data, plotting reported dates against the total number of dead and missing individuals. The visualization uses React to render SVG circles, with D3 scales and axes handling the projection of data points. The code utilizes `scaleLinear` for both axes, `extent` for domain calculation, and `csv` for data loading. Interactive tooltips are provided via SVG `<title>` elements, while the chart includes labeled axes for clarity.

AI-generated description

use react, d3, to parse and visualize data about iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, where each point represents a single migration event, plotting reported dates against the total number of dead and missing. The visualization uses React with D3 v7 scales (scaleTime and scaleLinear) to map data to SVG circles. The code loads data via d3.csv and renders axes using custom React components, with tooltips provided through SVG title elements on each circle.

JJoe Hutchins

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

93% match

Loading thumbnail…

Missing Migrants Scatter Plot

A scatter plot of the Missing Migrants Dataset, where each point represents a single migration event and shows the reported date of the event against the total number of dead and missing. The visualization uses D3 scales (scaleTime, scaleLinear) to map data to SVG coordinates, with React components rendering the axes and circular marks. Native SVG `<title>` elements provide simple tooltips displaying the formatted date, while the dataset is loaded via D3's CSV parser.

KKolezhannochka

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

93% match

Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event where the reported date is plotted against the total number of dead and missing. The visualization uses D3 version 5 for scales and formatting, specifically `scaleTime`, `scaleLinear`, `extent`, and `timeFormat`, while rendering as an SVG within a React application. Data is loaded via D3’s `csv` function from a GitHub-hosted CSV file. The circles, axes, and tick marks are all generated using React components, with tooltips showing the formatted date using `timeFormat`.

Ssophburke

93% match

Loading thumbnail…

Missing Migrants Scatter Plot

A scatter plot visualizes the Missing Migrants Dataset, showing each reported event as a point along a time axis against the total number of dead and missing. The plot uses d3.scaleTime and d3.scaleLinear for axes, with React components rendering SVG circles for marks. Data is loaded via d3.csv from a gist, and the axis labels and tick marks are generated using d3 time formatting.

Jjwlam83

92% match

Loading thumbnail…

Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration incident. The x-axis maps the reported date using a time scale, while the y-axis uses a logarithmic scale to show the total dead and missing, with hover tooltips displaying the exact date. Built with React and D3 v5, the visualization renders as an SVG, using `scaleTime`, `scaleLog`, and `extent` from D3 to compute scales and domains. The code loads the dataset via D3's `csv` function and uses custom React components for axes and marks.

Mmarianamartins87

92% match