Ep25 Iris Scatter Plot

100%

Ep25 Iris Scatter Plot

✓ Published1🌍 Public

Last edited Nov 2, 2021

Created on Nov 1, 2021

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for each flower specimen. The visualization uses React with D3 v7’s `scaleLinear` and `extent` to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks. Each data point appears as a teal `circle` with a native SVG `<title>` tooltip showing the x-value. Data loads asynchronously from a CSV via the `csv` function inside a custom `useData` hook. Styling includes Poppins font and gray axis ticks.

AI-generated description

a program that loads in Iris DataSet. Stylised and presented all pretty for your pleasure :)

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatterplot

This example visualizes the Iris dataset, showing each flower’s sepal length against its sepal width as a point on a scatterplot. The chart uses React to render SVG circles via a custom `Marks` component, with D3 scales (`d3.scaleLinear`) and axes generated by reusable `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file using `useData` and `d3.csv`, and hoverable tooltips are provided through SVG `<title>` elements. The visualization emphasizes clean axes and labeled tick marks for readability.

RRod* Wilhelmy

94% match

Loading thumbnail…

Iris scatterplot

This scatterplot visualizes the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization uses React with SVG rendering, while D3 v5 utilities handle data loading via `d3.csv` and scale construction with `scaleLinear` and `extent`. The code explicitly defines axes through custom `AxisBottom` and `AxisLeft` components, with circular marks rendered by a `Ticks` component. Axis labels appear rotated on the y-axis, and CSS classes style the ticks, marks, and text throughout the chart.

JJulia Hack

94% match

Loading thumbnail…

Iris Scatter Plot

A scatter plot of the Iris dataset displays sepal length against sepal width, with each flower represented as a circle. The visualization uses React and D3 v6, with scales created via `scaleLinear` and axes rendered as SVG components. The code loads CSV data with `d3.csv`, formats tick values using `format`, and includes simple tooltips through SVG `<title>` elements.

Ee-ines

94% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. Each circle represents a data point, with a tooltip revealing the precise x-axis value on hover. The visualization is built with React and D3 v6, using D3's `scaleLinear` for axis scaling and `extent` to compute the data domain. SVG rendering is used for all graphical elements, including custom axis components that generate tick marks and labels. Data is loaded asynchronously as CSV from a remote URL using D3's `csv` function.

HHeidi Stockton

94% match

Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis for each flower sample. The visualization uses React to render SVG circles within an HTML5 page, while D3 version 5 utilities—including `csv`, `scaleLinear`, `extent`, and `max`—handle data loading, scaling, and axis generation. Axis components leverage D3’s tick generation, with formatted labels and grid lines. Selections display tooltips via SVG `<title>` elements, and the layout employs fixed margins with Poppins typography for a polished presentation.

CChris Knight

94% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers. The visualization uses React with D3 v5 scales and SVG rendering, with axes created by custom components. Data loads asynchronously via `d3.csv` and converts string values to numbers. Circles represent data points, and hovering reveals tooltips through SVG title elements, while axis tick formatting utilizes `d3.format` for compact notation.

Rrstrauss127

94% match

Loading thumbnail…

Ep. 25 | Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width for individual flowers. The code uses React with D3 v6 to render an SVG, employing `scaleLinear` for both axes, `extent` to set domains, and `csv` for data loading. Axes are custom components using the `tick` class, and marks are circles with native SVG `<title>` tooltips. The styling uses the Poppins font, teal circles, and a minimal gray axis design, resulting in a clean, modern presentation.

YYee Han

93% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset. The React and D3 v5 code uses `scaleLinear` to map data values to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering ticks and labels. Each flower is drawn as a circle with a `title` element providing a native browser tooltip. Data loads asynchronously via D3’s `csv` function from a remote GitHub gist.

AAndrea Picciau

93% match