Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
SSrividya Panchagnula
Last edited May 9, 2023
Created on May 9, 2023

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.

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 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.

HHarsh kumar
90% match
Loading thumbnail…

Scatter Plot Penguins Dataset

A scatter plot displays the relationship between bill length and body mass for penguins, with each circle representing an individual penguin. The visualization loads data from the Seaborn Penguins Dataset CSV and renders it as an SVG using React components. D3 v5 scale functions (`scaleLinear`), axis components, and extent calculations handle the coordinate mapping and tick generation, while each data point is drawn as a circle with a native SVG tooltip title.

Nnghosh319
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
88% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length and body mass as the primary x and y axes while encoding bill length and bill depth into circle radii. Data is loaded from a CSV file and parsed using d3.csv, with scales created via d3.scaleLinear and axes rendered using d3.axisLeft and d3.axisBottom. Each point’s color indicates species (yellow for Adelie, green for Gentoo, brown for others), and the SVG circles are joined to data using d3’s selectAll and join pattern. The rendering uses d3.v5 within a React-free plain HTML document.

Rradhadevarapu
87% 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
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…

Fork of Penguins Dataset Scatter Plot

This scatter plot visualizes the Penguin dataset, displaying flipper length on the x-axis and body mass on the y-axis, with each point colored by species (orange for Adelie, red for Gentoo, blue for the others). The code uses d3.csv to load data from a GitHub gist, d3.scaleLinear for both axes, and d3.axisBottom/axisLeft for tick labels. Circles are drawn with SVG, and each point's rx and ry attributes are mapped from bill length and bill depth, though the radius stays constant. The chart fills the browser window with margins.

Ppravalika.thogaru10@gmail.com
87% match
Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with each circle colored by species (Adelie, Gentoo, or other). The visualization uses D3 v5 and React, rendering with SVG. It loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for axes, and draws circles with `data.join`. Axis labels and a title are added using D3’s `axisLeft`, `axisBottom`, and text elements.

Ssnehareddygurram
87% match