Skip to main content
SimilarExport ZIP
100%

Stylized scatter plot

✓ Published3🌍 Public
SSong Tao Chen
Last edited Jan 3, 2022
Created on Jan 3, 2022
Forked from Stylized Bar Chart

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.

AI-generated description

scatter plot of [The Iris dataset] https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv 6:15:25

MIT Licensed

Similar vizzes

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
96% 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
96% match
Loading thumbnail…

Stylized Iris Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3.js v7 functions like `scaleLinear`, `extent`, and `max` to compute scales and domains. Custom axis components generate tick marks and labels, while circle marks display the data points with a tooltip showing formatted values. The plot features a clean design with a Poppins font and muted color palette for the grid lines and data points.

LLisa Wagner
96% 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
96% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width for individual flowers. The SVG rendering uses React components for the axes and data marks, with D3 scales and the `extent` function determining the plot’s domain. Axis labels are positioned with SVG transforms, and tick formatting employs D3’s `format` with SI prefixes. Circles representing data points include native SVG tooltips via the `title` element, with styling applied through CSS classes.

SSonja Ek
96% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers as circles. Built with React and D3 v5, the visualization renders as SVG, using D3's `scaleLinear` for axes and `extent` to compute domains. Custom `AxisBottom` and `AxisLeft` components generate tick marks, while `Marks` renders each data point with a tooltip showing the formatted x-value. The design employs a Poppins font, teal circles, and muted gray axis lines for a clean, modern aesthetic.

Rroc286
96% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each point is rendered as an SVG circle using React components, with axes generated through reusable AxisBottom and AxisLeft components. The code leverages d3-scale’s scaleLinear for coordinate mapping, d3-format for tick labels, and d3.csv for data loading. Tooltips display formatted sepal length values via the circle title element, while a custom Poppins font and teal mark color give the chart its distinctive styling.

Aaakarsh satyam
96% match
Loading thumbnail…

Stylized scatter plot

This stylized scatter plot visualizes the iris dataset, showing sepal length on the x-axis and sepal width on the y-axis, with each flower represented by a teal circle. The visualization uses React components to render SVG elements, with D3 v7’s `scaleLinear` and `extent` functions managing the axes and data scaling. Axis ticks are generated via D3’s scale methods, and tooltips display formatted x-values using D3’s `format` function. The design features large, bold axis labels and tick text, with a clean, minimal aesthetic.

DDaniel Zsido
95% match