Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot

✓ Published0🌍 Public
HHarshithaAmbilpur
Last edited Jul 21, 2023
Created on Jul 21, 2023
Forked from Hello VizHub

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.

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 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
91% 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
89% match
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
89% 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
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
87% match
Loading thumbnail…

Scatter Plot with Different Colors

A scatter plot displays penguin bill length against bill depth, with each point colored by species using a D3 ordinal color scale. The visualization loads data from an external CSV file and renders circles in an SVG container. It uses D3 v6 scaleLinear for the axes, scaleOrdinal with schemeCategory10 for colors, and includes axis labels and a legend generated from the color scale's domain.

HHarshithaAmbilpur
87% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes penguin measurements, showing flipper length against body mass, with each point colored by species (Adelie, Gentoo, or Chinstrap). Circle radii are also mapped to bill measurements. The visualization uses D3 v6 to load CSV data from a remote GitHub gist, parse numeric fields, and render an SVG with `scaleLinear` scales, `axisLeft` and `axisBottom` for axes, and `.join('circle')` to create the data points.

Ssuryavamsi00024
87% match
Loading thumbnail…

Scatter Plot

A scatter plot maps penguin flipper length to body mass, with points colored by species (Adelie, Gentoo, and Chinstrap) using cyan, magenta, and green. The SVG visualization is built with D3 v5, using `scaleLinear` for axes, `extent` to compute domains, and `axisLeft`/`axisBottom` for ticks. Data is loaded as CSV from a GitHub gist, and each circle’s size is fixed at radius 5 while bill dimensions are stored as extra attributes. The chart includes a title and cursive font styling for axes.

Kkrishnareddy23
86% match