Scatterplot

100%

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

An animated scatterplot visualizes synthetic planetary data, cycling the x-axis among diameter, moon count, and orbital period while plotting moons on the y-axis. Points are colored green with hover tooltips showing name, type, diameter, and moons. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to smoothly update positions every 2.5 seconds. Data loads from a CSV file, rendered as SVG circles with a dark theme.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot

This animated scatter plot visualizes planetary data, showing each planet’s diameter, number of moons, and orbital period as a colored, sized circle on a dark, space-themed SVG canvas. The planets continuously wander and bounce off the plot’s edges using a `d3.timer` loop that updates circle positions. Hovering reveals a tooltip with details like discovery date, while a legend groups planets by type. The code loads a CSV dataset, applies linear scales for axes and a sqrt scale for size, and uses `d3.axisBottom` and `d3.axisLeft`.

AALIMINETI SPOORTHY REDDY

90% match

Loading thumbnail…

Solar_System_Scatter_Plot

This scatter plot visualizes the diameters of planets and their moons, with each dot colored by its base planet name and labeled with an emoji on the x-axis. The visualization uses D3.js v7 to load CSV data from a GitHub gist, render an SVG with d3.scaleBand and d3.scaleLinear axes, and display tooltips showing type, diameter, and moon count. Hovering over a dot reduces its opacity to highlight the data point.

AALIMINETI SPOORTHY REDDY

84% match

Loading thumbnail…

Solar_System_Scatter_Plot

This scatter plot displays the relationship between the orbital period and diameter of planets, with each point colored by its base planet name and accompanied by a legend. The visualization uses D3 v7 to load CSV data, apply linear scales, render SVG axes and circles, and generate an ordinal color scale with a category palette. The data is sourced from a GitHub gist containing planetary measurements.

AALIMINETI SPOORTHY REDDY

80% match

Loading thumbnail…

SolarSystem_BarGraph

This scatter plot visualizes the diameters of planets and moons, with each dot colored by its base planet and labeled with emoji icons. The chart uses a D3.js v7 SVG rendering, with a band scale on the x-axis for categorical names and a linear scale on the y-axis for diameter in kilometers. Data is loaded from a CSV file hosted on GitHub, and tooltips provide details on type, diameter, and moon count for each celestial body.

AALIMINETI SPOORTHY REDDY

78% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

75% match

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the four numeric columns of the Iris dataset, smoothly transitioning the x-axis and circle positions every three seconds. Using D3’s `scaleLinear`, `extent`, and `transition`, it updates the x-value mapping while keeping y-values fixed to sepal length. The reusable `scatterPlot` function joins data to SVG circles, animating radius growth on entry and staggered transitions during updates, with axes redrawn via `axisBottom` and `axisLeft`. Data loads as CSV, and the 1-second transitions create a clear visual comparison of feature distributions.

Ccharlieronchetti@gmail.com

75% match

Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange

74% match

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This example animates a reusable D3 scatter plot that cycles through different iris flower measurements every 3 seconds. It uses D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and the `transition` API to smoothly move circles and axes between states. The code fetches CSV data from a GitHub gist and renders SVG circles with staggered enter/update transitions, changing the x-axis mapping among petal width, sepal width, petal length, and sepal length.

Nnim@brejnholt.dk

74% match