Reusable Scatter Plot

100%

Reusable Scatter Plot

✓ Published0🌍 Public

Last edited Jul 16, 2023

Created on Jul 16, 2023

This interactive scatter plot visualizes penguin measurements, cycling through different feature pairs on the x-axis with a timed animation. Built with D3.js, it uses an ES6 module (scatterPlot.js) to define a reusable chart component. The plot colors points by species (Adelie, Gentoo, Chinstrap) using D3's `scaleLinear` and `axisLeft`/`axisBottom` APIs, and loads data from a remote CSV file via `d3.csv`. The SVG rendering includes a legend and axis labels, with the animation triggered by `setInterval`.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot explores relationships between penguin measurements, cycling through four numerical variables on the x-axis while body mass remains on the y-axis. Built with D3 v6, it loads CSV data from a GitHub gist and uses a reusable scatterPlot module with scaleLinear scales and axisLeft/axisBottom. The visualization includes color-coded species markers (Adelie, Gentoo, Chinstrap) with a custom legend, using setInterval to rotate the x-axis variable every few seconds. SVG circles render the data points with species-specific colors and elliptical shapes.

Ssuryavamsi00024

93% match

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot explores relationships between characteristics of penguin species, cycling through different attribute pairings on the x-axis. It uses a reusable `scatterPlot` module built with D3's `scaleLinear`, `axisLeft`, and `axisBottom` to render the chart, while data is loaded from a CSV via D3's `csv` function. The plot updates its x-axis every few seconds through a `setInterval` call, with circles colored by species type, and includes a legend and axis labels styled with CSS.

HHarshithaAmbilpur

92% match

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot visualizes penguin measurements from a CSV dataset, cycling through four attributes on the x-axis while body mass remains fixed on the y-axis. The SVG renderer uses reusable D3 modules and scales to display colored circles by species, with a legend and rotating axis labels. Data loads via d3.csv from a GitHub gist, while d3.scaleLinear, d3.axisLeft, and d3.axisBottom construct the plot, and setInterval triggers the animation.

Aanith462@gmail.com

91% match

Loading thumbnail…

Reusable Scatter Plot

This visualization demonstrates a reusable scatter plot of penguin measurements, comparing body mass against bill length across three species. The chart animates through different x-axis variables—bill length, bill depth, flipper length, and body mass—in a cycling interval. Built with D3.js v6, it loads data from a remote CSV, uses the `scatterPlot` reusable module with `scaleLinear` and `axisLeft`/`axisBottom`, and renders SVG circles with color-coded species. The example also includes manual legend labels and adds rotated axis text.

Ssrikkanth05

90% match

Loading thumbnail…

reusable scatter

This example presents a reusable scatter plot that cycles through four numeric measurements from the Palmer Penguins dataset—bill length, bill depth, flipper length, and body mass—updating the x-axis every two seconds. The visualization shows the relationship between the selected x-axis variable and bill depth on the y-axis, with each point representing an individual penguin. Built with D3 v7, the code defines a custom `scatterPlot` function using scale methods like `scaleLinear`, `extent`, and axes via `axisLeft` and `axisBottom`, while rendering SVG circles with a fixed radius. Data is loaded as CSV from a GitHub Gist, and the animation relies on `setInterval` to swap the x-value accessor and re-render the chart.

SSai Hemanth Babu Sunkari

88% match

Loading thumbnail…

Reusable scatter plot_Archana Goli

This interactive scatter plot displays the Penguins dataset, with each species (Adelie, Chinstrap, Gentoo) represented by a distinct shape—square, triangle, or circle—positioned by body mass and culmen length. The visualization cycles through four numerical attributes every two seconds, updating the x-axis accessor to explore different correlations. Built with D3.js (v6.7.0), the reusable chart component uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with SVG paths and a two-second `setInterval` for animation, loading data from a GitHub Gist CSV.

Aarchanagoli@my.unt.edu

88% match

Loading thumbnail…

Fork of Fork of Responsive Scatter Plot

This example presents an interactive scatter plot of the Penguin dataset, mapping petal width and sepal length with additional dimensions encoded through point size and symbol shape. Built with D3 v6, the visualization uses SVG and animation to cycle through four column pairings every 2 seconds, automatically updating the x-axis and point positions. Species are distinguished by color (Chinstrap, Gentoo, Adelie) and symbol, with a legend and title displayed on screen. The plot is designed as a reusable chart component, making it easy to adapt to different datasets or axes.

Ttejasrikotipalli1@gmail.com

87% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length to the x-axis, body mass to the y-axis, and coloring each point by species (Adelie, Gentoo, and Chinstrap). The code loads data from a CSV URL using `d3.csv`, then uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to build the axes. SVG circles are appended to the DOM with radius and fill attributes derived from bill dimensions and species, respectively.

LLakshmanRangisetti

86% match