Stylized scatter plot

100%

Stylized scatter plot

✓ Published1🌍 Public

Last edited Apr 5, 2021

Created on Apr 4, 2021

This stylized scatter plot visualizes the ages and missing dates of children from The Lost Children dataset. It uses React to render an SVG with d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, alongside custom AxisBottom, AxisLeft, and Marks components. Each circle represents a missing child, with a native tooltip via the `<title>` element. The chart is styled with the Poppins font and muted tick colors, and data is loaded asynchronously using d3.csv.

AI-generated description

A scatter plot of The Lost Children .

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Missing Migrants Global dataset, mapping reported dates against total dead and missing individuals. The visualization uses a Poppins font and a custom teal color scheme to create a polished, modern aesthetic. Built with React and D3 v5, the implementation leverages `scaleLinear` for axes, `extent` for domain calculation, and `csv` for data loading. The SVG marks are rendered as circles with 7-pixel radii, and hovering reveals formatted tooltip values. Axis labels are rotated and positioned to clearly communicate the x-axis as Petal Length and the y-axis as Sepal Width.

Kkemee

80% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot uses a responsive React component and D3 scales to map age against income from a CSV dataset. The visualization employs D3’s `scaleLinear` and `extent` functions to compute domains, with custom `AxisBottom` and `AxisLeft` components rendering SVG tick marks and labels. Each data point is an SVG circle with a `title` tooltip showing formatted values via D3’s `format`. The chart features rotated axis labels, a Poppins font, and a clean color palette, with styling applied through CSS classes.

SSamir Nandardhane

79% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis shows reported dates over time, while the y-axis displays the total number of dead and missing individuals. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering ticks and labels. Circle marks include native SVG `<title>` tooltips showing formatted dates.

RRoberto

78% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This interactive scatter plot visualizes the Missing Migrants Dataset, where each circle represents a single migration event. The x-axis maps the reported date over time, while the y-axis shows the total number of dead and missing individuals. Built with React and D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axis scaling, rendered as SVG circles with tooltips revealing exact dates. The code demonstrates reusable components for axes and marks, with data loaded asynchronously via `d3.csv`.

YYedrup

78% match

Loading thumbnail…

Missing migrants scatter plot logscale

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single migration event. The x-axis shows reported dates over time, while the y-axis uses a logarithmic scale to display the total number of dead and missing individuals, enabling comparison across widely varying magnitudes. Built with React and D3 v5, it implements custom AxisBottom and AxisLeft components using scaleTime and scaleLog, renders SVG circles via a Marks component, and includes tooltips showing dates through SVG title elements.

AAndrea Picciau

78% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each circle representing a single event and its position encoding the reported date on the x-axis and the total dead and missing on the y-axis. The visualization uses a logarithmic y-scale to accommodate the wide range of values and a time scale for the x-axis, with native SVG `<circle>` elements rendered via React. The code leverages d3’s `scaleTime`, `scaleLog`, `csv`, and `extent` functions to load and transform the data, while custom React components (AxisBottom, AxisLeft, Marks) handle the axis ticks and data point rendering.

AAravind Shenoy

78% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes 400+ missing migrant events from a 2019 subset of the Missing Migrants Dataset, mapping reported dates on the x-axis against the total dead and missing count on the y-axis. Each circle represents a single event, with tooltips showing the date. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `csv` for data loading. SVG elements render axes and marks, while reusable components like `AxisBottom`, `AxisLeft`, and `Marks` structure the layout with styled grid lines and a Poppins font.

KKunkgg

77% match

Loading thumbnail…

Fork of Missing Migrants Scatter Plot

This scatter plot visualizes the Missing Migrants Dataset, with each point representing a single event plotted by reported date against total dead and missing. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes, while React components render SVG circles for data marks. The code imports data through D3’s `csv` loader, applies date and numeric parsing in the row function, and includes interactive tooltips via SVG `<title>` elements showing formatted dates.

MMatthew Talty Colvard

77% match