Skip to main content
SimilarExport ZIP
100%

Stylized Scatter plot

✓ Published2🌍 Public
Rrsulli4
Last edited Apr 30, 2023
Created on Apr 30, 2023

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for 150 flower samples. Each point is rendered as a teal circle using React and D3 v5, with scales created via `scaleLinear` and axes constructed from custom `AxisBottom` and `AxisLeft` components. The SVG markup includes formatted tick labels using D3's `format` function and native tooltips via SVG `<title>` elements. Data is loaded asynchronously with `csv` and processed through type coercion in a `useData` hook.

AI-generated description

a scatterplot of the Iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width as teal circles with a clean, minimal aesthetic. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data values to SVG coordinates, while separate axis components render grid lines and tick labels. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with the latter generating circles and native SVG tooltip titles. The data is loaded asynchronously via a custom `useData` hook that parses CSV values into numbers.

MMosheAron
96% match
Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses D3.js v7 scales and axes within a React component, rendering marks as SVG circles with a teal fill. Data is loaded asynchronously via D3’s `csv` parser, with numeric conversion applied to all measurements. The axes employ custom tick components, and tooltips are provided through SVG `<title>` elements, formatted using D3’s `format` function. The visual style features a clean design with Poppins typography and subtle grid lines.

Rrmgoldberg24
95% match
Loading thumbnail…

Stylised Iris Scatterplot Graph

This stylised scatterplot visualizes the Iris dataset, plotting petal length against sepal width for 150 flower samples. Each point is rendered as a teal circle using SVG within a React component, with scales and axes built through d3.scaleLinear, d3.extent, and custom Axis components. The chart employs d3.csv for data loading and d3.format for tick label abbreviation, styled with the Poppins font. Axis ticks are gray, labels are muted, and hovering reveals tooltips via SVG title elements.

Qqtrfx
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing petal length against sepal width as teal circles. Built with React and D3 v5, it renders as an SVG with custom, reusable components for axes and marks. The visualization uses D3's `scaleLinear` for scaling, `extent` and `max` for domain calculations, and `format` for tick labels. The code draws axis ticks and labels with styled lines and text, and each data point is a circle with a tooltip, pulling data from a CSV URL.

Sstefichim
95% match
Loading thumbnail…

Stylized Scatter Plot

This 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 `scaleLinear` and `extent` to compute scales, with custom `AxisBottom` and `AxisLeft` components for tick rendering. Each data point is an SVG circle with a tooltip, styled with a Poppins font and teal marks. The code loads CSV data via `d3.csv` and `useData` hook, demonstrating a clean React-D3 integration.

SSam
95% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents one flower sample, with hover tooltips revealing the precise x-value. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` to set domains, and `format` for tick labels. The SVG rendering includes custom axis components with tick marks and labels, while data loading relies on D3’s `csv` method with type coercion for numeric values. The chart’s teal circles and Poppins typography give it a modern, stylized appearance.

DDenise Mauldin
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The code uses React to structure the SVG rendering, with D3 v5 functions like `scaleLinear`, `extent`, and `format` for scales and tick formatting. Axes are built with the custom `AxisBottom` and `AxisLeft` components, while circular marks include a native `<title>` tooltip. The plot uses the Poppins font and D3’s `csv` loader to fetch data from a gist URL.

Ccacho2294
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width for individual specimens. The visualization uses D3.js utilities—including `csv` for data loading, `scaleLinear` for axes, and `extent` for domain calculation—combined with React to render SVG circles and axis ticks. Each data point is drawn as a small teal circle with a tooltip displaying its value. The chart includes labeled axes with customized tick formatting and a responsive layout, all styled with the Poppins font family.

FFonda Irena Santoso
95% match