Curran's Stylized Scatter Plot

100%

Curran's Stylized Scatter Plot

✓ Published2🌍 Public

Last edited Sep 25, 2019

Created on Sep 25, 2019

This example visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis in a stylized scatter plot. A React component loads the CSV data with `d3.csv` and uses `d3.scaleLinear` to compute scales. Axes and circle marks are rendered as SVG elements with separate components, while CSS styles the ticks, labels, and marks with the Poppins font. Native SVG `title` elements provide hover tooltips.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. The React component uses `useData` to load CSV data via d3.csv, then renders SVG circles with d3.scaleLinear scales for both axes. Axes are constructed with custom React components that create tick marks and labels, while the `Marks` component adds tooltips using SVG `<title>` elements. The chart features a Poppins font, teal-colored circles, and clearly labeled axes with rotated y-axis text.

RRebecca Hathaway

93% match

Loading thumbnail…

Curran's Stylized Scatter Plot

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width for individual specimens. The visualization is rendered as an SVG using React components, with D3 v5 handling the data loading, linear scaling, and axis generation. Despite being styled with a clean, modern aesthetic using the Poppins font, the chart incorporates interactivity through native SVG tooltips that display the coordinates of each data point. The axis tick labels are formatted using D3’s `format` function for readability, creating a polished yet functional presentation of the classic multivariate dataset.

LLeandro Da Souza

92% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Each circle represents a sample, with a tooltip displaying the x-axis value. The visualization uses React to render SVG elements, while D3 v5 utilities handle data loading, scales, and formatting. CSV data is fetched asynchronously and parsed via `d3.csv`. The chart features custom axes with styled ticks and labels, uses the Poppins font, and applies a distinct color scheme for the marks.

MMorgan Worrell

92% match

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width using a stylized, minimalist design. The React application loads data via `d3.csv` with type coercion for numeric columns. SVG rendering relies on D3’s `scaleLinear` and `extent` for axes, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate tick marks and data points. Circle marks include native SVG tooltips, and the Poppins font and muted color palette enhance the clean aesthetic.

Aalexandermodell

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

91% 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. Built with React and D3 v5, it uses `scaleLinear` and `extent` to compute scales, with custom `AxisBottom` and `AxisLeft` components for tick rendering. Each data point is an SVG circle with a tooltip, styled with a Poppins font and teal marks. The code loads CSV data via `d3.csv` and `useData` hook, demonstrating a clean React-D3 integration.

SSam

91% 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(范紀予)

91% 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.scaleLinear. The React-based visualization renders circles as marks via SVG, with styled axes built through d3.ticks. The code uses d3.csv to load and parse the data, while custom React components (AxisBottom, AxisLeft, and Marks) handle the rendering, applying a Poppins font and a teal color scheme to the circular data points.

Aaparnasj-sj

91% match