Skip to main content
SimilarExport ZIP
100%

Assignment 2 Reusable Scatter Plot

✓ Published1🌍 Public
Ppasyasahas
Last edited Jul 16, 2023
Created on Jul 7, 2023
Forked from Hello VizHub

This example visualizes the Palmer Penguins dataset with a reusable scatter plot built using D3 v6. The plot cycles through four different x-axis variables—body mass, bill depth, flipper length, and bill length—at two-second intervals while keeping bill length on the y-axis. Circles are colored by penguin species (Adelie, Gentoo, Chinstrap) with a legend and animated transitions. The code demonstrates D3’s scaleLinear, axisBottom, and axisLeft APIs, along with ES6 module imports and setInterval-driven updates.

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…

Assignment_2 Reusable Scatter Plot

This interactive scatter plot visualizes Palmer penguin measurements, using flipper length, body mass, bill length, and bill depth as axes. The chart cycles through these four variables at timed intervals, updating the x-axis while preserving the y-axis. Colored circles represent penguin species, with a legend mapping each category to a distinct color. Built with D3.js (v6), the example demonstrates reusable chart components through local ES6 module imports, scaling axes with `scaleLinear` and rendering SVG elements with data joins. Data loads from a remote CSV file via D3's `csv` function.

Cchsaisriharsha@gmail.com
94% 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
91% match
Loading thumbnail…

Palmer Penguins Dataset - Reusable D3 Scatter Plot

This example visualizes the Palmer Penguins dataset with a D3 scatter plot, showing each penguin’s flipper length on the y-axis while the x-axis cycles through bill length, bill depth, and body mass every two seconds. Built as a reusable `scatterPlot` module, it relies on D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` utilities. Points are drawn as SVG circles, animated via `setInterval`, with axes updating dynamically.

Ffreyatran124@gmail.com
91% match
Loading thumbnail…

Assignment 2 - Scatter Plot with color

This scatter plot visualizes the Palmer Penguins dataset, mapping bill length to the x-axis and bill depth to the y-axis. Each dot is color-coded by penguin species (Adelie, Gentoo, Chinstrap) using a categorical palette, with a legend positioned on the right. The visualization loads data from a CSV URL and renders using SVG circles via D3 v6, employing `d3.csv`, `d3.scaleLinear`, `d3.extent`, and the `select` API to construct axes and marks.

Ppasyasahas
89% match
Loading thumbnail…

Assignment 2 - Scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping bill length to the x-axis and bill depth to the y-axis while coloring each point by penguin species. It loads data from a CSV file and renders circles as SVG marks using D3 v6. The code defines scales with `scaleLinear`, generates axes with `axisLeft` and `axisBottom`, and includes a legend for species identification. The visualization is displayed across the full browser window with styled axis labels and customized fonts from Google Fonts.

Cchsaisriharsha@gmail.com
89% 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
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
88% match
Loading thumbnail…

scatter Plot

This interactive scatter plot visualizes the Palmer Penguins dataset, plotting flipper length against body mass, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization uses d3.csv to load the data and d3.scaleLinear to map values to pixel coordinates, rendering circles as SVG elements. Axes are generated with d3.axisLeft and d3.axisBottom, while axis labels and a title are added as text elements. The code also stores raw bill measurements on each mark, though these are not displayed visually.

AArun
87% match