Skip to main content
SimilarExport ZIP
100%

line v2

✓ Published1🌍 Public
Bbart
Last edited Jul 5, 2021
Created on Jul 5, 2021

This interactive scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width. Built with React and D3 v5, it renders SVG circles colored with a teal fill. The visualization uses `scaleLinear` for both axes, `extent` to compute domains, and custom `AxisBottom` and `AxisLeft` components to display tick marks. The code loads CSV data through a `useData` hook and applies a custom `siFormat` for axis labels, with Poppins typography styling the chart.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Line Chart

This scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal length with points colored by species. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for positioning and color encoding, while custom Axis and Marks components render SVG circles. Data is loaded asynchronously via `useData` and `d3.csv`.

IIsh Takkar
92% match
Loading thumbnail…

scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis. Built with React and D3 v7, it uses d3.scaleLinear to map data values to SVG coordinates, rendering circles with tooltips. The chart includes custom axes via d3.ticks, with axis lines and labels styled through CSS. Data is loaded asynchronously from a CSV file using d3.csv.

BBlake McCarty
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` to create axes and renders circles as SVG marks. The `axisBottom` component formats tick labels with D3's `format` function, while tooltips display values via SVG `<title>` elements. The data loads asynchronously from a CSV using D3's `csv` parser.

Llefat92
91% match
Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The code uses React with D3 v5 utilities, including `scaleLinear`, `extent`, `csv` for data loading, and `format` for axis tick labels. Rendered as an SVG, it includes custom AxisBottom and AxisLeft components that generate ticks and gridlines, while Marks component draws circles with native tooltips via the `<title>` element. Data is fetched from a remote CSV file and parsed into numeric values during loading.

SSai Phaltankar
91% match
Loading thumbnail…

Iris Scatterplot 02

This scatterplot displays the Iris dataset, plotting petal length against sepal length for each flower specimen. The visualization uses a React framework with SVG rendering, employing D3.js functions like `scaleLinear` for axis scaling and `scatterPlot` for the mark generation. The code reads the data from a remote CSV file, parses numeric values, and renders circles with a fixed radius. Axes are labeled using D3's `axisBottom` and `axisLeft` positioned according to specified margins. The chart fills the entire browser window, adapting to the viewport dimensions.

Gg1g10
91% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom for tick marks. The SVG circles are rendered pink, matching the chart’s background, with margins sized proportionally to the viewport. The code reads window dimensions and appends the chart directly to the body.

Jjmetzg11alpine
91% match
Loading thumbnail…

D3 Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with D3 v7 and React, the visualization uses SVG circles and linear scales to map data values to screen coordinates, with axes generated by d3.axisLeft and d3.axisBottom. The code loads CSV data asynchronously via d3.csv, parses numeric fields, and renders points with a steelblue fill. Axis tick labels are styled with a large Courier New font, and the chart fills the browser window dynamically.

Nnicolekevans
90% match
Loading thumbnail…

react scatterplot iris data

This interactive scatterplot visualizes the Iris dataset, plotting sepal width against petal length for individual flowers. Each point is rendered as a circle using React components that leverage d3.scaleLinear for x and y positioning, with d3.extent determining the domain. The visualization includes axes generated by custom AxisBottom and AxisLeft components, plus formatting via d3.format. Data loads asynchronously from a CSV using d3.csv within a React hook, and tooltips display formatted values through SVG title elements.

MMalcolm Mead
90% match