Fork of Scatter Plot Example

100%

Fork of Scatter Plot Example

✓ Published0🌍 Public

Last edited Mar 9, 2023

Created on Mar 9, 2023

This scatter plot visualizes the relationship between flipper length and bill length in a penguin dataset, with points colored by sex (red for male, orange for female). Built with D3 v5 and React, the SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and loads data via `d3.csv` from a GitHub gist. Circle elements are appended with `.append("circle")`, using opacity and hover effects defined in CSS.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin dataset visualizes flipper length against body mass as a scatter plot, with circles colored by species (Adelie, Gentoo, and Chinstrap). It uses D3 v5's `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG circles to render the data. A secondary pair of attributes—bill length and bill depth—are stored on each mark but not directly displayed. The chart includes rotated axis labels and a title, rendered via SVG within a React-free HTML page.

Kkarumanchimanasa

90% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of penguin data, using D3.js version 5 within a React framework. It visualizes the relationship between flipper length and body mass, with additional ellipse-shaped points encoding culmen length and depth through the `rx` and `ry` attributes. The SVG chart uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, styled with cursive fonts and a labeled title. Data is loaded as CSV from a GitHub gist, with numeric fields parsed for the plot.

MMounishSeeni

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, showing flipper length against body mass for individual penguins, with each point colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap). The visualization also encodes bill length and depth as the x and y radii of each circular mark, creating variable-sized points. Built with D3 v5 and React, the code uses `d3.csv` to load the dataset, `d3.scaleLinear` for axis scaling, and `d3.axisLeft` and `d3.axisBottom` to render axes with custom styling.

VVAbhiram99

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot displays the relationship between flipper length and body mass, with each point colored by species (Adelie, Gentoo, or other) and using bill length and bill depth as additional radius attributes. The visualization uses D3 v5 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circle positions, while the `csv` loader parses the penguin dataset from a GitHub gist. The chart renders circles with `fill` based on species and includes custom axis labels styled in cursive.

Rradhadevarapu

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This interactive scatter plot visualizes the relationship between flipper length and body mass for three penguin species, with each point colored by species. Built using D3 v5 within a React starter template, the visualization loads CSV data and uses `d3.scaleLinear` with `d3.extent` to map coordinates, rendering SVG circles. The chart includes `d3.axisLeft` and `d3.axisBottom` axes, along with descriptive labels for both dimensions.

NNikhilchiguru-8

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of penguin data, visualizing flipper length against body mass. Each point is colored by species (Adelie, Gentoo, or Chinstrap), with additional fields for culmen length and depth stored in the data binding. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) to map the dataset, rendering circles as SVG elements with a fixed radius. The code also adds axis labels and a title styled with custom fonts, all within a React-compatible HTML page.

MMounishSeeni

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length, body mass, bill length, and bill depth across three penguin species (Adelie, Gentoo, and Chinstrap) from the Palmer Penguins dataset. It encodes data points as circles with fill colors distinguishing species, while also mapping bill dimensions to circle radii. Built with D3 v5 and React, the SVG uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, with data loaded via `d3.csv` from a GitHub gist source.

AAsherpranayp

89% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes the relationship between flipper length and body mass, with points colored by species (Adelie, Gentoo, and Chinstrap) using yellow, green, and brown. The plot is rendered as an SVG using D3 v5, with scales created via `scaleLinear` and axes drawn using `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV URL with `d3.csv` and parsed into numeric fields; the code also includes a custom `join` operation to add circles for each data point, and axis labels are styled with cursive fonts. The implementation is a small React project, though the core plotting logic is entirely D3-based.

SSUSHMA CHIRRA

89% match