Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Color

✓ Published0🌍 Public
Yyixinchiness.c.4@gmail.com
Last edited Sep 15, 2024
Created on Sep 14, 2024

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.

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 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
92% 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
92% 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
92% 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
90% match
Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, encoding flipper length on the x-axis against body mass on the y-axis, with each point’s color indicating one of three penguin species. The code loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to set scales, and renders the points as SVG circles. It also draws axes with `d3.axisLeft` and `d3.axisBottom`, while a switch function assigns distinct colors per species, and axis labels are added via SVG text elements.

CChih-Hsin Chen
90% match
Loading thumbnail…

Fork of reusable Scatter Plot

This fork of the classic scatter plot visualizes the Palmer Penguins dataset, encoding each penguin as a point in a 2D space. The plot maps bill length and bill depth on the x- and y-axes, with points colored by species and shaped by sex, while the island of origin is encoded through point color intensity. The SVG-rendered chart uses a light grid, axis labels, and a legend to distinguish the three penguin species across multiple categorical dimensions. The example is built with the v3 Observable runtime and released under the MIT license.

Mmadipadiga.raviteja@gmail.com
89% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each colored distinctly. The visualization is built with D3 v6 using the `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, rendering as SVG circles mapped from CSV data. The code creates axis labels and a title while loading data asynchronously via `d3.csv`. Mouseover events log data to the console, though no visible tooltip is implemented despite a placeholder div.

HHOURPRIMERA@GMAIL.COM
89% match
Loading thumbnail…

Fork of Fork of Fork of Scatterplot for peng bird dataset

This scatter plot visualizes the Palmer Penguins dataset, showing flipper length against body mass for three penguin species, each colored distinctly. The visualization is built with D3 v6 using the `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, rendering as SVG circles mapped from CSV data. The code creates axis labels and a title while loading data asynchronously via `d3.csv`. Mouseover events log data to the console, though no visible tooltip is implemented despite a placeholder div.

HHOURPRIMERA@GMAIL.COM
89% match