Skip to main content
SimilarExport ZIP
100%

Scatter plot

✓ Published2🌍 Public
MmohitPassan
Last edited Apr 27, 2021
Created on Apr 27, 2021
Forked from Stylised bar chart

This scatter plot uses the classic Iris dataset to visualize the relationship between petal length and petal width. The chart is rendered as an SVG using React, with D3.js computing the linear scales via `scaleLinear` and `extent` to map data values to pixel coordinates. The x- and y-axes are generated by the custom `AxisBottom` and `AxisLeft` components, which use D3's scale `ticks` to position grid lines and labels. Data points are drawn as circles with a constant radius, and hovering reveals a tooltip via an SVG `<title>` element.

AI-generated description

Scatter plot of iris dataset using d3 and keeps track using react

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

This scatterplot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. The React-based SVG chart uses D3's `scaleLinear` and `extent` functions to map data coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. Points are displayed as teal circles with a fixed radius, and hovering reveals a tooltip via the SVG `<title>` element. Styled with the Poppins font, the visualization employs D3's `csv` loader to fetch and parse the data from a remote GitHub gist.

MMark Simpson
94% match
Loading thumbnail…

ScatterPlot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width with each data point rendered as a circle. Built with React and D3 v7, the visualization uses SVG for rendering, with D3's linear scales to map data values to pixel coordinates. The axes are generated using custom React components (AxisBottom, AxisLeft) that leverage D3's scale ticks, while the Marks component renders circles with tooltips. The interface dynamically fills the browser window and uses the Poppins font, with all data loaded via D3's CSV parsing utility.

Mmbooch22
93% match
Loading thumbnail…

Scatterplot with Iris Data

This scatterplot displays the Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and rendered as an SVG, it uses D3’s `scaleLinear` with `extent` and `nice` to compute axes, which are drawn by custom `AxisBottom` and `AxisLeft` components. The `Marks` component maps each data point to a circle with a `<title>` tooltip, and data is loaded asynchronously via D3’s `csv` from a gist URL. The visualization includes axis labels and a custom tick format, but does not encode species or other dimensions.

AArefa Patwary
93% 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
93% match
Loading thumbnail…

Scatter Chart

This scatter chart visualizes the Iris dataset, plotting petal width against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v5 utilities like `scaleLinear` and `extent` handling the data scaling and domain calculations. Custom React components construct the axes and circular marks, while the data is loaded asynchronously via D3's `csv` function. The chart includes labeled axes and gridlines, with each data point rendered as a circle that reveals its value on hover.

BBetty
93% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for individual iris flowers. The React-based visualization uses D3 v5 scales and axes to map the quantitative values to SVG coordinates. Data loads asynchronously via `d3.csv`, with each flower represented as a circular mark. The chart includes clearly labeled axes with rotated y-axis text, formatted tick values using `d3.format`, and a custom tooltip system that displays the petal length when hovering over a point. Styling is applied through CSS classes for ticks, labels, and marks.

Ggujjapooja7@gmail.com
93% match
Loading thumbnail…

ScatterPlot

This scatterplot displays the relationship between petal length and sepal width in the Iris dataset, with each data point represented as a circle. The visualization uses React and D3 v7, employing `scaleLinear` for both axes and rendering SVG elements through components like `AxisBottom`, `AxisLeft`, and `Marks`. The axes include formatted tick labels and axis titles, while circles include HTML title tooltips. Data is loaded asynchronously from a CSV file using D3’s `csv` function and parsed in `useData`.

Ddleoenri
93% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123
93% match