Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
RRahulChaitu999
Last edited Jul 1, 2022
Created on Jul 1, 2022

This scatter plot visualizes the Palmer Penguins dataset, mapping body mass against culmen length with an animated loop that cycles through four numerical attributes every two seconds. Built with D3 v6, it uses reusable chart patterns via a custom `scatterPlot` function, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG rendering updates in place using `selectAll` and `join`, while `setInterval` triggers re-renders to switch the x-axis variable, showcasing the flexibility of modular chart components.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Penguin Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

AkshithaRapala - Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, displaying body mass and culmen length measurements with animated cycling through different x-axis attributes every two seconds. It uses D3.js v6 with SVG rendering and transitions to redraw the plot dynamically. The chart encodes penguin species through distinct SVG shapes: squares for Adelie, triangles for Chinstrap, and circles for Gentoo, with axes rendered via d3.axisLeft and d3.axisBottom. The reusable chart pattern in scatterPlot.js enables smooth updates as the x-axis cycles through numerical columns. Data loads from a CSV file hosted on GitHub Gist.

Aakshitha.rapala@gmail.com
88% match
Loading thumbnail…

Assignment 2 Reusable Scatter Plot

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.

Ppasyasahas
87% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, mapping flipper length on the x-axis, body mass on the y-axis, and coloring each species (Adelie, Gentoo, Chinstrap) differently. The code uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to fetch data and render SVG circles. Although the marks are drawn as circles, the code sets `rx` and `ry` attributes on them, which are not valid circle properties. The visualization includes custom axes, axis labels, and a title.

SSANEEM MOHAMMAD
86% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It also encodes bill length and depth through the circle’s rx and ry attributes, creating elliptical markers. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to load data and render axes, with SVG circles and text labels styled via CSS.

NNikhilchiguru-8
86% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length against body mass while coloring each point by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) within a React-free SVG rendering. Circles are positioned via the scales and include custom `rx` and `ry` attributes derived from culmen measurements, though the visual radius remains fixed. The chart also adds cursive axis labels and a title, with the data fetched from a raw GitHub gist URL.

MMounishSeeni
86% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins. Each point is colored by species, with circle radii fixed while bill length and depth influence visual encoding through non-standard `rx` and `ry` attributes. The visualization is rendered as an SVG using D3 v5 within a React-free HTML page. It loads CSV data asynchronously, applies linear scales via `scaleLinear`, and generates axes using `axisLeft` and `axisBottom`, with custom cursive font styling.

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

Fork of ICE7 reusable scatter plot

This example visualizes the Palmer Penguins dataset with an animated scatter plot that cycles through different x-axis measurements (culmen length, culmen depth, flipper length, and body mass) against body mass on the y-axis. Data points are color-coded by penguin species (Adelie, Chinstrap, and Gentoo) using custom SVG circle elements with varying radii. Built with D3 v6, the visualization uses the reusable scatterPlot module with d3.scaleLinear, d3.axisBottom, and d3.axisLeft, while a setInterval animation updates the x-scale every few seconds.

Nnagasai-gummadi
86% match