Skip to main content
SimilarExport ZIP
100%

MK Reusable Scatter Plot

✓ Published1🌍 Public
MManeesh Kumar
Last edited Oct 27, 2025
Created on Oct 27, 2025

This is a reusable, animated D3.js v7 scatter plot that visualizes the relationship between bill length and flipper length in three penguin species. Rendered as an SVG, it uses the `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` APIs to create responsive axes, with `d3.schemeTableau10` color-coding points by species. The plot features tooltips on hover and a `transition` API for smooth data updates. The included CSV dataset from VizHub demonstrates its interactivity, with color-encoded groups and a legend.

AI-generated description
MIT Licensed

Similar vizzes

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
84% match
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays penguin bill length against body mass, with each point colored steelblue and labeled by species on hover via a tooltip. The chart loads data from a CSV file hosted on GitHub and renders as SVG using D3 v6. Code defines margins, linear scales, and axis groups, while a tooltip follows the mouse to show species, bill length, and body mass. The example demonstrates modular function creation with `createScatterPlot`, and imports D3 from UNPKG.

HHarshithaAmbilpur
83% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length for three penguin species (Adelie, Chinstrap, and Gentoo) from the penguins dataset by Roualdes. Each circle represents an individual penguin, colored by species, positioned along linear scales on both axes, and includes grid lines and axis labels. The code uses D3 v7 with `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for encoding, and renders the chart as SVG. A legend identifies species, and hover effects increase transparency.

Mmustafaksyed1@gmail.com
83% match
Loading thumbnail…

Reusable Scatter Plot

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`.

LLakshmanRangisetti
82% match
Loading thumbnail…

Responsive scatter plot

This responsive scatter plot visualizes the relationship between bill length and flipper length for penguins from the @drbagwell/penguins dataset. The D3 code uses scaleLinear and extent to map data values to x and y coordinates, with circles rendered at varying positions and opacity. The visualization adapts to container size changes via observable resize handling, redrawing the SVG dimensions and axes accordingly. A gray inner rectangle marks the plotting region, and axis labels are provided by the @drbagwell/axis-labels library.

DDonald Bagwell
82% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This responsive scatter plot displays the relationship between bill length and flipper length for penguins, with a gray background aiding point visibility. The visualization uses D3.js to filter invalid data points and render circles with adjustable radius and opacity. It employs the `observeResize` API to track container dimensions, rebuilding the SVG and scales on size changes through `scaleLinear` and d3 axes. The code leverages `d3.select`, `data.join`, and `@curran/responsive-axes` for adaptive rendering, with data sourced from the curated penguins dataset.

AAamir Hameed mir
82% match
Loading thumbnail…

scatter Plot

This scatter plot visualizes penguin data showing flipper length against body mass, with each point colored by species. It also encodes bill dimensions through circle position attributes, though these are not visually distinct. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates. Data is loaded via `csv` from a GitHub gist, and points are rendered as circles with species-based fill colors.

BBala Sai Krishna
82% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels Scatterplot

This scatterplot shows the relationship between flipper length and bill length for penguins, with each point colored by species. The visualization uses D3 v7 scales (`d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors) and renders circles as SVG marks. Data comes from the Penguins.csv file, loaded via `d3.csv`. The circle radius is also mapped to flipper length, while labeled axes for flipper and bill length are generated with `d3.axisBottom` and `d3.axisLeft`.

JJustin Roberts
81% match