Skip to main content
SimilarExport ZIP
100%

iris

✓ Published0🌍 Public
JJiaYu07
Last edited Sep 9, 2024
Created on Sep 9, 2024

This example displays a scatter plot of the Palmer Penguins dataset, mapping bill length along the x-axis and flipper length along the y-axis. It uses D3's `scaleLinear` and `extent` to compute scales, then draws axes, labels, and semi-transparent circles for each penguin. The visualization reads data from the `@curran/penguins` library and relies on D3's `select` and `join` operations to update SVG elements incrementally.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

Loading thumbnail…

Palmer Penguins - ICE-6 Scatter Plot

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis against body mass on the y-axis. Each point's color encodes the penguin species (Adelie, Gentoo, or Chinstrap), while the circle's fill radius is overridden with bill length and bill depth values (though these are not visually effective since `r` is fixed). The visualization uses d3.csv for data loading, d3.scaleLinear for axes scaling, and d3.axisLeft/axisBottom for tick marks. Data is parsed in JavaScript, and the SVG rendering populates circles with a static 5-pixel radius.

Yyamunaunt
82% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Palmer Penguins dataset, plotting bill length against flipper length for individual penguins. The scatter plot encodes each penguin as a semi-transparent circle, revealing the distribution and correlation between the two measured traits across species. The visualization is built using D3.js, leveraging `scaleLinear`, `axisLeft`, and `extent` to construct scales and axes, while custom axis-label functions from `@curran/axis-labels` add annotations. A light gray background rectangle highlights the plotting area. The code dynamically computes scales from the data extents and uses SVG joins to render circles, axes, and labels, with margins and dimensions set to fit the container.

Ssridhardubala106@gmail.com
82% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Palmer Penguins dataset, plotting bill length on the x-axis against flipper length on the y-axis using a simple scatter plot. The internal chart area is rendered as a gray rectangle, with labeled axes and semi-transparent circles representing individual penguins. Built with D3, the code uses `scaleLinear`, `extent`, `axisLeft`, and custom axis-label helpers from the `@curran/axis-labels` library to construct the visualization. Data comes from the `@curran/penguins` import and is drawn into a dynamic SVG sized to the container.

Aanishbudhi@gmail.com
82% match
Loading thumbnail…

Penguins Dataset scatter fork

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins. Each circle is colored by species (purple for Adelie, red for Gentoo, blue for Chinstrap) and uses non-standard `rx` and `ry` attributes to encode bill dimensions as elliptical shapes. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scales, and d3.axisLeft/axisBottom for the axes. The SVG renders with explicit width and height from the browser window, and includes custom axis labels and an italic cursive font.

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

Fork of Simple Scatter Plot

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping bill length against flipper length with each point representing an individual penguin. The visualization uses D3.js to render the plot, employing `scaleLinear` for axis scaling and `axisLeft` along with the `@curran/axis-labels` library for axis construction and labeling. Data is loaded from `@curran/penguins`, and the chart dynamically resizes to fit its container while displaying translucent circles to show overlapping data points. The example demonstrates a reusable chart architecture where both the visualization logic and user interface are clearly separated.

MMahbub hussain
82% match
Loading thumbnail…

Penguins Dataset Scatter plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal length for individual flowers. Each circle represents a data point, and the plot reveals how these measurements cluster by species. The visualization is built with React and D3.js, using `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering uses simple joined circles with a fixed radius of 10 pixels.

Ddheeraj1509
81% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot displays the Palmer Penguins dataset, showing the relationship between bill length and flipper length, with each species’ data points distinguished by color. The visualization uses D3’s `scaleLinear` and `scaleOrdinal` APIs to map the quantitative axes and categorical species colors, while custom axis labels and a gray inner rectangle frame the plot. The code filters data through `extent` to set scale domains and renders circles with per-point opacity and radius, making species clusters immediately visible.

DDonald Bagwell
81% match