Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Nov 18, 2024

Created on Nov 18, 2024

This fork of a stylized scatter plot visualizes the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and renders as SVG, using D3’s `scaleLinear` to map data values to coordinates. Axes are custom-rendered with React components that generate tick marks and labels, while circles represent each data point. The chart includes styled axis labels, tooltips on hover via the SVG `title` element, and a clean, minimalist design with a Poppins font.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. It displays the data as an SVG scatter plot using React components and D3 scales to position marks. Each circle represents a flower, with native SVG `<title>` elements providing hover tooltips. The code uses `d3.csv` to load data, `scaleLinear` for axes, and `format` for tick labels. Custom React components render the axes and marks, with the chart styled using the Poppins font.

Ddumbdataguy@gmail.com

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flower samples. The visualization uses React to render SVG elements, with D3 v5’s `scaleLinear` and `extent` functions handling the x and y axis scaling. Axis components generate ticks via `xScale.ticks()`, while the `Marks` component renders each data point as a circle with a tooltip showing the formatted petal length. The chart is styled with the Poppins font and includes labeled axes.

Hhenry c

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses D3.js scaleLinear functions to map data dimensions to SVG coordinates, with React components handling the rendering of axes and circular marks. Each data point appears as a teal circle with a tooltip showing its x-value, while the axes display formatted tick labels. The chart is styled with the Poppins font and a muted color palette defined in the accompanying stylesheet.

RRené Goretzka

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a scatter plot visualizes the Iris Dataset using React and D3 v5, plotting petal length against sepal width for each flower sample. The chart renders as an SVG, with axes created through custom React components that map D3 scales to SVG elements. The code uses D3’s `csv`, `scaleLinear`, `extent`, and `format` utilities to load and transform the data, compute scales, and format tick labels. Each data point is drawn as a circle with a tooltip showing the petal length value, styled with a clean Poppins font and muted teal color scheme.

DDonald Bagwell

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the “Stylized Scatter Plot” visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The scatter plot uses React with d3.v5 to compute linear scales via `scaleLinear` and render SVG circles as marks, styled with a distinct teal fill. Axis components are built with React from D3’s tick values, and hover tooltips display formatted tick values. Data is loaded asynchronously with the `csv` function from D3.

Sseanmdalrymple@protonmail.com

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization is a stylized scatter plot of the classic Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The SVG rendering uses React components to generate the chart’s marks (colored circles) and its two axes, with all layout and scales handled by D3’s linear scale and extent functions. The code also leverages D3’s CSV loader for data ingestion and formatting functions for tick labels. The plot’s design incorporates a custom Poppins font and muted color palette.

Aaine-ian

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This is a fork of a stylized scatter plot visualizing the Iris Dataset, comparing petal length and sepal width for individual flowers. It renders an SVG chart using React components for the axes and marks, with scales and data loading handled through d3.scaleLinear and d3.csv. The code includes custom styling for axis ticks, labels, and circle marks, plus a tooltip via the native SVG title element.

KKM44VW@student.aau.dk

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the stylized scatter plot visualizes the classic Iris Dataset, plotting sepal width against petal length. Built with React and rendered as an SVG, the chart uses D3 v5’s `scaleLinear` for axis scaling and `extent` for domain calculation. Axes are generated via custom components that draw tick marks and labels, while data points are rendered as circles with tooltips. The Poppins font and muted color palette give the visualization a modern, clean aesthetic.

JJulian Huarachi

96% match