Skip to main content
SimilarExport ZIP
100%

Fork of ICE7 reusable scatter plot

✓ Published0🌍 Public
Nnagasai-gummadi
Last edited Mar 12, 2023
Created on Mar 12, 2023

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Penguine Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 reusable scatter plot

This interactive scatter plot visualizes the Palmer Penguins dataset, displaying relationships between culmen length, body mass, and other measurements. The visualization cycles through different x-axis attributes every few seconds, using a setInterval callback to update the plotted dimensions. Built with D3.js version 6.7, the example demonstrates a reusable chart pattern through a custom scatterPlot function that manages scales, axes, and circle rendering. Data points are color-coded by penguin species (Adelie, Chinstrap, and Gentoo), with SVG circles positioned using linear scales. The code explicitly calls d3.csv for data loading, scaleLinear for coordinate mapping, and axisBottom/axisLeft for generating axes.

VVamsi Krishna
93% match
Loading thumbnail…

Fork of ICE6 - Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie in green, Gentoo in violet, and Chinstrap in red). The visualization uses D3 v5 within a React framework, rendering circles via SVG. The code leverages `d3.csv` for data loading, `scaleLinear` for axes, and `extent` to compute domains, while also encoding bill length and depth as unused circle radius properties.

SSravaniPosina
90% match
Loading thumbnail…

Fork of ICE-6 (penguin dataset)

This example visualizes the Palmer penguin dataset as a scatter plot, mapping flipper length to the x-axis and body mass to the y-axis, with circles colored by species (Adelie, Gentoo, and Chinstrap). Each circle’s rx and ry attributes encode bill length and depth, though these do not affect the SVG rendering. The code uses d3.csv for data loading, d3.scaleLinear for scales, d3.extent for domains, and d3.axisLeft and d3.axisBottom for axes. The SVG is rendered full-screen using d3.select and d3.join.

Nnagasai-gummadi
90% match
Loading thumbnail…

Fork of Data Visualization ICE6: Penguins Dataset Scatter Plot

This visualization displays the Palmer Penguins dataset as an interactive scatter plot. It maps flipper length on the x-axis and body mass on the y-axis, with each circle colored by penguin species (Adelie, Gentoo, or Chinstrap). The visualization uses d3.csv to fetch the data, d3.scaleLinear and d3.extent to scale the axes, and d3.axisLeft and d3.axisBottom to render tick marks. Circle positions are computed using the d3.select and .join methods within an SVG canvas.

Vvamshisoletii
90% match
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, with each species color-coded (Adelie, Chinstrap, and Gentoo). The visualization loads CSV data via `d3.csv`, parses numeric fields, and renders circles using SVG appended to the body. Scales created with `d3.scaleLinear` map the data to screen coordinates, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart includes a title and axis labels, with circles positioned by `cx` and `cy` attributes and colored by species.

Ssnehareddygurram
89% match
Loading thumbnail…

Fork of ICE-6(11630234)- Penguin Data set scatter Plot

This visualization is a scatter plot of Palmer Penguin data, showing the relationship between flipper length (x-axis) and body mass (y-axis). Each circle represents a penguin, colored by species: Adelie (yellow), Gentoo (green), and Chinstrap (blue), while the circle’s rx and ry attributes are set to the bill length and depth values, though the visual effect is subtle. Built with D3 v5, the code loads a CSV via `d3.csv`, uses `scaleLinear` for axes, and draws SVG circles with `selectAll` and `join`. Axis labels and a title are added as SVG text elements.

MMounishSeeni
89% match
Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, each color-coded via a custom marker function. The visualization loads CSV data using `d3.csv` and renders circles in an SVG container using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Each data point maps flipper length to the x-axis and body mass to the y-axis, with species distinguished by color. The chart includes labeled axes and a title, all rendered within a full-window SVG.

Ssnehareddygurram
89% match
Loading thumbnail…

Reusable ICE-7 ScatterPlot

This interactive scatterplot visualizes the Palmer Archipelago penguin dataset, plotting body mass against bill length, then automatically cycles through other numerical attributes every two seconds. Built with D3.js, it uses a reusable `scatterPlot` component that binds scales, axes, and circles, updating the plot via a `setInterval` loop. The SVG rendering, styled with the Share Tech font, smoothly transitions the x-axis and data points as the selected column changes, demonstrating a flexible, variable-driven plotting approach.

VVAbhiram99
89% match