Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published1🌍 Public
RRajat Dangat
Last edited Mar 27, 2021
Created on Mar 27, 2021

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the X and Y axes via dropdown menus. The visualization uses React with d3.scaleLinear for axes and d3.extent to compute domains, rendering circles as SVG marks with tooltips. Styling employs the Poppins font and custom tick colors, while data loading relies on d3.csv to parse the remote iris.csv file.

AI-generated description

A scatter plot of The Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes map to the x and y axes, with the chart updating dynamically via React state management. The visualization uses d3.scaleLinear for axis scaling, d3.extent to compute domains, and d3.csv for data loading. React components render SVG circles as marks, with axes generated by custom AxisBottom and AxisLeft components that leverage d3's tick generation.

Rrstrauss127
96% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. The React-based implementation uses d3.scaleLinear for both axes and renders circles as SVG marks with native tooltips. Styling applies a Montserrat font, light gray grid lines from custom axis components, and blue circles with a fixed radius. Data is loaded asynchronously via d3.csv and parsed into numeric fields before scaling.

Ccoltonjcox92
95% match
Loading thumbnail…

Stylized Scatter Plot

A scatter plot displays the Iris Dataset, plotting petal length against sepal width with a circular mark for each sample. The visualization uses React components to render SVG elements, with d3.scaleLinear for axes scaling and d3.extent for domain calculation. Axes are custom-built components using SVG lines and text, styled with the Poppins font. Data is loaded asynchronously via d3.csv and transformed with numeric type coercion, while tooltips appear on hover through SVG title elements.

RRajat Dangat
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes from dropdown menus. The visualization uses React with d3.scaleLinear for positioning, d3.csv for data loading, and d3.format for axis tick labels. Rendered as SVG, the plot displays circles for each data point with axis labels and tick marks styled by the Poppins font.

RRED98310
95% match
Loading thumbnail…

Polished Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that re-assign the x and y axes. The visualization uses React state management alongside D3 scales and axes, rendering SVG circles with tooltips showing formatted values. Data loads asynchronously via D3’s `csv` utility from a GitHub gist, while axis ticks and labels are generated through custom React components using `scaleLinear` and `extent` for domain calculation. The design incorporates Poppins typography and a teal color scheme for a polished presentation.

Yyejichun@naver.com
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
Loading thumbnail…

Stylized Scatter Plot Iris

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, with its position determined by d3.scaleLinear scales and a tooltip showing the petal length value. The visualization uses React components for the axes and marks, with d3.csv loading the data from a remote source. Styling includes custom tick colors and Poppins typography, while the SVG rendering approach implements reusable axis components that generate tick marks and labels based on the provided scales.

EEFezerKW
95% match
Loading thumbnail…

Stylized Scatter plot

A stylized scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements via interactive dropdown menus for the x and y axes. The visualization uses React with `useState` to manage attribute selection, while D3 v5’s `scaleLinear` and `extent` handle continuous scaling and domain calculation from the CSV data. SVG circles represent each flower, with Poppins-font axis labels and custom tick styling applied through CSS. The axes are rendered as reusable components using `AxisBottom` and `AxisLeft`, and tick values are formatted with D3’s `format` function.

WWaseem Medhat
95% match