Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
Ppete0707
Last edited Nov 14, 2022
Created on Nov 14, 2022

This interactive scatter plot displays the Iris Dataset, showing petal length against sepal width with circular marks. Built with React and D3 v5, it renders as an SVG using `scaleLinear` for both axes and custom `AxisBottom` and `AxisLeft` components. The code loads data from a remote CSV via `d3.csv` and maps numeric values for the visualization. Axis labels and tick formatting use D3’s `format` function, while hover tooltips reveal precise values via the `title` element in each circle.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `d3.scaleLinear` for axes and renders circles via SVG. The code employs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with hover tooltips using SVG `<title>` elements. Data is loaded asynchronously via `d3.csv` and parsed into numeric values, while axes display formatted tick labels and a Poppins font styles the presentation.

Ppei9223
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

SSophia Chiao
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Rendered as an SVG using React and D3 v5, the example loads data via `d3.csv` and uses `d3.scaleLinear` with `d3.extent` to compute scales. Custom Axis components generate tick marks and labels, while circular marks represent individual data points, each with a tooltip showing its x-value.

Cchar0496
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Built with React and D3 v5, it uses a linear scale for both axes, with tick marks and axis labels rendered as SVG elements. The plot includes tooltips showing the x-value on hover and custom styling via the Poppins font and specific color palette for marks and ticks. The data is loaded asynchronously from a CSV URL using D3’s `csv` function.

Hhhh681838@gmail.com
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Circles represent individual flowers, with hover text revealing exact x-axis values. Built with React and D3 v5, it uses `d3.csv` to load data and `d3.scaleLinear` for axes, rendering SVG marks and gridlines via `scaleLinear` and custom `AxisBottom` and `AxisLeft` components.

Eeliarech
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for 150 flower samples. Built with React and D3 v5, the visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load and parse the data. Each circle represents a flower, with tooltips displaying formatted petal length values. The SVG rendering includes styled tick marks, axis labels, and a loading state while data is fetched from the remote CSV source.

DDustin Brunner
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis with circular marks. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` for domain calculation, and custom SVG components for rendering axes and circles with tooltips. The visualization loads data via `d3.csv` from a GitHub gist and applies a custom `format` function for tick labels, styled with the Poppins font.

SSuwigya Rathore
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

NNart Williamson
95% match