Skip to main content
SimilarExport ZIP
100%

Stylized scatter plot

✓ Published1🌍 Public
Cchrismeeky
Last edited Oct 19, 2021
Created on Oct 18, 2021
Forked from Stylized bar charT

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.

AI-generated description

Stylized scatter plot using React and D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Data Set, showing the relationship between sepal length and sepal width. The visualization uses React with D3 v6’s `scaleLinear` for axis scaling and renders points as SVG circles within a yellow, black-bordered background circle. The code loads data via D3’s `csv` function, applies custom formatting with `format`, and sets axis tick styles through CSS. A Poppins font and muted grays give the chart its distinctive look, while data points appear in teal.

RRMartins11
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization uses React components to render SVG circles and axes, with D3 v5 utilities handling data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis tick generation. The chart features custom styling for marks and axes, including a distinctive cyan fill for data points and a loading state displayed before data arrives.

AAlex Gomes
95% match
Loading thumbnail…

Stylized scatter plot

This stylized scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width for individual flowers. Built with React and D3 v7, it renders SVG circles using d3.scaleLinear for both axes, with the x-axis formatted via d3.format. The visualization includes labeled axes, tick marks, and a native SVG tooltip element that displays the formatted x-value when hovering over each data point.

SSong Tao Chen
94% match
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
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 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 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.

SSerind Joshua McCue
94% 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