Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot (Iris Data)

✓ Published2🌍 Public
PPeter Krevenets
Last edited Mar 17, 2021
Created on Mar 17, 2021
Forked from Stylized Bar Chart

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis with a circle for each sample. The SVG is rendered with React, using d3.scaleLinear for the scales and d3.extent to set the domains. Axes are custom components that draw tick marks and labels, while the marks use a native `<title>` element for tooltips. The data is loaded asynchronously via d3.csv and parsed into numeric fields.

AI-generated description

A scatter plot of Iris Data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization uses React components to render SVG circles and axes, with D3 v5 utilities handling data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis tick generation. The chart features custom styling for marks and axes, including a distinctive cyan fill for data points and a loading state displayed before data arrives.

AAlex Gomes
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. The visualization uses React components with D3 scales (d3.scaleLinear) and rendering via SVG, displaying axis ticks generated with custom AxisBottom and AxisLeft components. Each data point is rendered as a circle with a tooltip showing its value, styled with a Poppins font and teal coloring. The data is loaded asynchronously from a CSV file using d3.csv, with numeric fields parsed for quantitative comparison.

Nnicholasgonzalez1
95% match
Loading thumbnail…

Stylized Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis. It uses d3-scale’s `scaleLinear` with `extent` and `nice` to compute domains, while React components render the SVG axes and circular marks. The code imports d3 helpers like `csv` for data loading and `format` for tick labels, and uses `useData` from `useData.js` to fetch and parse the data. Styling is applied via CSS classes for ticks and marks.

JJoe Hutchins
95% match
Loading thumbnail…

Stylized Scatterplot

This example visualizes the Iris dataset as a scatterplot of sepal length against sepal width. Each flower is represented by a green circle with a native SVG tooltip showing the x-value on hover. The chart uses React components composed with D3 scales, rendering axes via custom `AxisBottom` and `AxisLeft` components that produce tick marks and labels. Data is loaded asynchronously with `d3.csv`, and linear scales map the measured values to pixel coordinates within fixed margins.

Ttrissentety
94% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and sepal width for individual iris flowers. The visualization uses React with D3 v5 SVG components, including custom axis and mark components that render circles for each data point. The code employs D3's `csv` parser, `scaleLinear`, and `extent` functions to load and scale the data, with axes configured using `AxisBottom` and `AxisLeft` components. The plot features a teal color scheme with gray gridlines and rotated axis labels, presenting a clean, modern take on the classic scatter plot.

Ttorstenaan
94% match
Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris dataset, plotting sepal length against sepal width. The React application uses D3.js scales and axes to render SVG circles, with a clean, modern aesthetic defined by the Poppins font and custom color palette. Data is loaded asynchronously from a CSV file via D3's `csv` function. Axis ticks and marks are generated as React components, with interactive tooltips displaying formatted values.

Vvangenned
94% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, showing sepal length against sepal width. It uses React with D3 v6’s scaleLinear and extent functions to position data points as circles in an SVG rendering. The chart includes axis labels, tick marks, and a native title tooltip on each mark. A custom useData hook loads the CSV data via d3.csv, while AxisBottom, AxisLeft, and Marks components generate the axes and circles with a Poppins font styling.

Eekorre1001
94% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length on the x-axis against sepal width on the y-axis. Each circle represents an individual iris flower, with axis labels and gridlines styled using CSS. Built with React and D3 v5, the example uses `scaleLinear`, `extent`, and `max` from the D3 library to compute scales and domains, while SVG circles render the data points with a custom `Marks` component. The axes are generated by `AxisBottom` and `AxisLeft` components, which use `xScale.ticks()` to produce tick marks and labels with a numeric format function.

Kkrandslam
94% match