Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
HHarsh kumar
Last edited Jul 1, 2022
Created on Jul 1, 2022
Forked from Stylized Bar Chart

This scatter plot visualizes the palmerpenguins dataset, showing the relationship between bill length and bill depth. The visualization uses React with D3 scales (`scaleLinear`) and SVG rendering, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Data is loaded asynchronously via D3’s `csv` parser and mapped to numeric values before being plotted as circles with tooltip titles. Styling includes a Poppins font, teal marks, and gray axis lines, with axis labels rotated for clarity.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the relationship between bill depth and body mass for penguins, using data from the Iris Dataset. Built with React and D3, it renders circles as SVG marks positioned by linear scales, with formatted axis ticks and labels. The code imports `csv`, `scaleLinear`, `extent`, and `format` from D3 to load and scale the data, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the chart elements. Styling uses the Poppins font and a teal color scheme for the marks.

SSrividya Panchagnula
90% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length against body mass for individual penguins. Each point is colored by species, with circle radii fixed while bill length and depth influence visual encoding through non-standard `rx` and `ry` attributes. The visualization is rendered as an SVG using D3 v5 within a React-free HTML page. It loads CSV data asynchronously, applies linear scales via `scaleLinear`, and generates axes using `axisLeft` and `axisBottom`, with custom cursive font styling.

Ggeethikal
88% match
Loading thumbnail…

Fork of Scatter plot with React & D3

A React and D3 scatter plot visualizes the relationship between bill depth and bill length for penguins from a CSV dataset. The SVG rendering uses `scaleLinear` for both axes, with `extent` and `.nice()` to set domains, while `AxisBottom` and `AxisLeft` generate ticks and gridlines via `xScale.ticks()` and `yScale.ticks()`. Circles in the `Marks` component display each data point with a `title` tooltip showing formatted values. The code imports `csv` from D3 v7 and uses React hooks (`useState`, `useEffect`) to load data asynchronously.

RRohithReddy-thoughts
87% match
Loading thumbnail…

Fork of Simple Scatter Plot

This visualization is a fork of a simple scatter plot that displays the relationship between bill length and flipper length in the Penguins Dataset. It shows each penguin as a semi-transparent circle positioned according to these two measurements, with labeled axes and a light gray plot background. The implementation uses React with D3.js, importing `scaleLinear`, `axisLeft`, and `extent` from D3, along with custom axis label components. Data is loaded from a CSV file via a GitHub gist URL, and the plot resizes to fit its container using D3 selectors.

Pppal41366@gmail.com
87% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length on the x-axis and body mass on the y-axis. Each circle is colored by penguin species (yellow for Adelie, green for Gentoo, brown for Chinstrap) and encoded with bill length and depth as elliptical radii. Built with React and D3 v5, it uses `csv()` to load remote data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG is rendered full-screen, with custom font styling and axis labels displayed prominently.

Ddanilo
87% match
Loading thumbnail…

Penguin Scatter Plot

A scatter plot of the Palmer Penguins dataset, showing the relationship between bill length and bill depth for individual penguins. Each point is rendered as a circle, and hovering reveals the exact bill length. The visualization is built with React and D3 v5, using SVG for rendering. Axes are generated with `scaleLinear` and custom `AxisBottom` and `AxisLeft` components, while the data is loaded asynchronously from a CSV file using the `csv` function.

PPrashish Paudel
87% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, mapping flipper length to body mass and coloring each point by species (Adelie, Gentoo, or Chinstrap) with yellow, green, or brown. It uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load, scale, and render the axes, while appending SVG circles with fixed radius and dynamic fill colors. The visualization also adds rotated and regular text labels for axes and a title, all rendered in an SVG container sized to the full browser window.

Kkarnisrikanth2212
86% match
Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example visualizes the Palmer Penguins dataset as a scatter plot, mapping flipper length against body mass while coloring each point by species (Adelie, Gentoo, or Chinstrap). The code uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and axis generators (`axisLeft`, `axisBottom`) within a React-free SVG rendering. Circles are positioned via the scales and include custom `rx` and `ry` attributes derived from culmen measurements, though the visual radius remains fixed. The chart also adds cursive axis labels and a title, with the data fetched from a raw GitHub gist URL.

MMounishSeeni
86% match