Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published1🌍 Public

Last edited Jul 26, 2021

Created on Jul 25, 2021

This scatter plot visualizes the iris dataset, showing petal length against sepal width as individual teal circles. Built with React and SVG, the chart uses d3.scaleLinear with .nice() to construct the axes and d3.extent to compute the domain. Axis components render tick marks and labels, while a tooltip on each circle exposes the x-value in a semantic title element. Data loading is handled asynchronously via d3.csv, with the results stored in React state through a custom useData hook.

AI-generated description

Scatterplot of iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each flower represented as a teal circle. Built with React and D3 v7, the visualization uses d3.scaleLinear for both axes and d3.extent to compute the domain from the data. SVG circles render the marks, while React components for the axes and marks handle the tick lines, labels, and hover tooltips. The data loads asynchronously via d3.csv from a remote gist, and the chart applies a custom Poppins font and muted color palette.

Jjiro2017

96% 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 against sepal width. Each circle represents a flower specimen, with a fixed radius and teal fill. The chart uses React components to render SVG axes and marks, while D3’s scaleLinear and extent functions compute the scales from the CSV data. Axis labels and tick formatting are customized, and tooltips display values via SVG title elements.

Ddiska432

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 an individual iris flower, with hover tooltips revealing the precise petal length value. Built with React and rendered as SVG, the visualization uses d3.scaleLinear and d3.extent to compute scales from the CSV data loaded via d3.csv. Custom React components handle axes and marks, with styling applied through CSS classes for ticks, labels, and the teal-colored data points.

Jjwlam83

95% match

Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The SVG rendering uses React components with D3 scales (d3.scaleLinear) and axes (AxisBottom and AxisLeft) built from D3 tick marks. The d3.csv function loads the data, while circle marks include native SVG tooltips via the title element. The chart uses a Poppins font, teal circles, and italic axis labels with abbreviated tick formatting via d3.format.

KK3zter

95% 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…

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, mapping petal length on the x-axis and sepal width on the y-axis using D3.js v5 scales. React components render SVG circles for each data point, with tooltips showing formatted values via the `title` element. The chart includes custom axes using `d3.scaleLinear` and `d3.extent`, styled with Poppins typography and teal-colored marks. Data loads asynchronously from a CSV URL using `d3.csv` within a custom `useData` hook.

FFAN CHI YU(范紀予)

95% match