Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published2🌍 Public
SSerind Joshua McCue
Last edited Aug 20, 2022
Created on Aug 20, 2022
Forked from Stylized Bar Chart

This scatter plot visualizes the relationship between sepal length and sepal width from the Iris dataset, fetched as a CSV via D3’s `csv` loader. It renders 150 circles using React components for axes and marks, with a linear `scaleLinear` mapping both dimensions. The SVG includes styled tick lines, labels, and a Poppins font, while hover tooltips show formatted values via the `<title>` element. The chart applies `.nice()` to round the x-axis domain and uses D3’s `extent` and `format` utilities for tick formatting.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot displays the relationship between sepal length and sepal width in the Iris flower dataset, loaded via d3.csv. Each point is rendered as a fixed-size circle using SVG in a React component, with axes and gridlines built from the d3.scaleLinear scale. The plot’s aesthetic is customized through the Poppins font, muted colors for ticks and marks, and rotated axis labels, while hover tooltips—implemented with SVG <title> elements—reveal the formatted sepal length value for each point.

Bbenpedroscott
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width. Each flower is represented as a circle, with its position determined by the sepal measurements and a tooltip displaying the exact length upon hover. The visualization uses React with D3 v6, employing `scaleLinear` for axes, `extent` for domain calculation, and `csv` for data loading. The SVG rendering includes custom tick marks and axis labels, styled with the Poppins font and a clean color palette.

WWolfgang
94% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width for iris flowers. The visualization uses d3.scaleLinear for both axes, with React components rendering SVG circles through the Marks component. Data is loaded asynchronously via d3.csv from a GitHub gist, with axes created using d3 ticks and formatted with d3.format. The plot features a clean, minimal design with teal circles and a Poppins font, while native SVG <title> elements provide tooltips on hover.

Ssophievanderhorst
94% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for individual flowers. The visualization uses React and d3.v5, with scales created via `scaleLinear` and axes rendered as custom SVG components. Circles mark each data point, with native SVG `<title>` elements providing hover tooltips. The code uses `csv` from d3 to load data from a GitHub-hosted CSV file, and includes styling with Poppins fonts and custom tick formatting.

JJacob Potvin
94% match
Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot displays the relationship between sepal length and sepal width for Iris flowers, using a clean SVG rendering with circular marks and labeled axes. The visualization loads data from a CSV file via d3.csv, with React state managing the asynchronous data fetching. D3’s scaleLinear functions, d3.extent, and d3.format handle the axis scaling and tick formatting, while custom React components (AxisBottom, AxisLeft, Marks) render the chart elements. The plot includes axis labels, a rotated y-axis label, and tooltips showing formatted sepal length values on each circle.

CChristian Potdevin
94% match
Loading thumbnail…

Stylized scatter plot

This stylized scatter plot visualizes the relationship between sepal length and sepal width from the classic Iris dataset, loaded via `d3.csv`. The visualization is built with React and D3 v7, rendering SVG elements through modular components for axes and data marks. Points are drawn as circles with tooltips showing formatted values, while a large yellow background circle creates a distinctive stylistic frame. The chart uses `d3.scaleLinear` for both axes and custom formatting functions for tick labels.

Cchrismeeky
94% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, displaying sepal length against sepal width. Each flower is represented by a circle, and hovering over a point reveals its exact sepal length value. The visualization is built using React and D3 v7, leveraging D3’s `scaleLinear` for axis scaling and `csv` for data loading. Rendered as SVG, the plot features custom axes and a Poppins font, with a clean, minimal aesthetic using muted colors for marks and gridlines.

Aahora
94% match
Loading thumbnail…

Stylized Scatter plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for each flower specimen. Built with React and D3 v5, it uses SVG rendering with custom axis components and circular marks. The visualization employs D3's `scaleLinear` for axis scaling, `extent` to compute data domains, and `format` for tick label formatting. Data is loaded asynchronously from a CSV file via D3's `csv` function, with a clean, minimalist design using the Poppins font and a muted color palette.

Jj-PGi
94% match