100%

Scatter Plot with Color

✓ Published1🌍 Public

Last edited Apr 15, 2024

Created on Apr 14, 2024

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.

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…

Fork of Scatter Plot with Color

This scatter plot visualizes the Palmer Penguins dataset, showing bill length against flipper length, with each point colored by species. The code uses D3’s `scaleLinear` to map data values to pixel positions, `scaleOrdinal` with `schemeCategory10` for color encoding, and relies on the ‘@curran/axis-labels’ library for axis labeling. Circles are rendered with configurable radius and opacity, set via the visualization’s parameters. The approach is a fork of a base template, demonstrating a reusable chart configuration with data-driven attributes from the provided CSV source.

Yyixinchiness.c.4@gmail.com

92% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three species of penguins, each colored differently (skyblue, lightgreen, and orange). It reads data from a CSV file using d3.csv and uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to create the axes. The SVG circles are positioned with cx and cy attributes and colored based on the species column.

Ssrikkanth05

90% 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…

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

89% match

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

89% 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

89% match

Loading thumbnail…

Scatter Plot for Penguin Dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length on the x-axis and bill length on the y-axis. Colored circles represent three penguin species (Adelie, Gentoo, and Chinstrap), with each point's radius and shape also encoding bill dimensions. The visualization uses D3 v5's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data, map scales, and render SVG axes. Circles are appended via D3 selections, with species-based color mapping defined through a switch statement. The chart includes labeled axes and a title, rendered in a full-window SVG using React-free vanilla JavaScript.

Aakhilgupta11

89% match

Loading thumbnail…

Penguins dataset

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length and body mass on the x- and y-axes while encoding species with distinct colors. Each circle’s size also incorporates bill length and depth as visual variables. The code loads CSV data via `d3.csv`, scales positions with `d3.scaleLinear`, and renders circles and axes as SVG using `d3.select` and `d3.axisBottom`/`d3.axisLeft`. Circle radius is fixed at 5 pixels, with species-specific fill colors assigned manually.

Ppethavenu

89% match