Scatter Plot

100%

✓ Published1🌍 Public

Last edited Jan 23, 2022

Created on Jan 23, 2022

This scatter plot visualizes the Iris Dataset, mapping Time on the x-axis and Value on the y-axis for each data point. The visualization uses React and D3 v5, with `scaleLinear` for both axes and SVG circles rendered as marks. Axes are constructed with reusable `AxisBottom` and `AxisLeft` components, while the `Marks` component includes native SVG tooltips. Data is loaded asynchronously via `d3.csv` from a remote URL, and hover interactions reveal formatted tick values.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

This scatter plot visualizes the Iris Dataset, showing the relationship between Time and Value for each data point. The visualization uses React with D3 v5, rendering SVG circles positioned by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. Each circle includes a tooltip via the SVG title element, while axes are generated using custom React components with d3.ticks. The data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file.

SSistema Frenos

90% 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

89% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su

89% 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

89% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

AAnkit5ingh

88% match

Loading thumbnail…

Iris Scatter Plot React & D3

This example visualizes the Iris flower dataset as a scatter plot, showing sepal length against sepal width. Built with React and D3 v5, it renders SVG circles for each data point, with axes and tick marks generated from D3 scales. The code uses `scaleLinear`, `extent`, and `format` from D3 for scaling and tick formatting, while React components like `AxisBottom`, `AxisLeft`, and `Marks` structure the visualization. Data is loaded asynchronously via D3's `csv` utility and parsed into numeric values.

JJeyasuriya M

88% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. The React-based application loads the data using the `d3.csv` utility, then renders SVG circles positioned through `d3.scaleLinear` scales. Hovering highlights each point by changing its fill color to orange. Axes are generated with `d3.ticks` through the custom `AxisBottom` and `AxisLeft` components, while titles provide tooltips when points are selected.

BbeauMarko

88% match