Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published1🌍 Public

Last edited Sep 22, 2021

Created on Sep 22, 2021

This example visualizes the classic Iris dataset, plotting petal length against sepal width as colored circles, with each species distinguished by a distinct color from a `scaleOrdinal` range. The visualization is built with React and rendered as SVG, using D3’s `csv` loader and `scaleLinear` functions to process and scale the data. Axis components (`AxisBottom`, `AxisLeft`) render tick marks and labels, while the `Marks` component generates circles with native SVG `<title>` tooltips. The chart employs a clean, modern aesthetic with Poppins typography and muted axis colors.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width for three iris species, distinguished by color through a React-based SVG rendering. A color legend on the right allows interactive filtering; hovering over a legend item fades non-matching points while keeping the selected species fully opaque. The visualization uses D3 v5 scales and axes (`scaleLinear`, `scaleOrdinal`, `AxisBottom`, `AxisLeft`) within a React component structure, with data loaded asynchronously via `d3.csv`. The styled axes and labels use the Poppins font, and tooltips appear on individual points via SVG `<title>` elements.

Jjchen6912

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset, plotting petal length against sepal width using a stylized scatter plot. The code builds a React-based SVG visualization with axes generated by custom AxisBottom and AxisLeft components, while a Marks component renders the data points as circles with tooltips. D3.js v5 functions like scaleLinear and extent handle the quantitative scales, with csv loading data from a remote GitHub gist. The minimal design uses Poppins typography and specific teal coloring for the marks.

Llatifiss

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a scatter plot. Each flower is represented by an SVG circle with hover tooltips showing the exact x-axis value. The visualization is built using React for component structure, D3 v5 for data loading and linear scales, and SVG for rendering. The code includes custom AxisBottom, AxisLeft, and Marks components, with axis labels styled using the Poppins font and a clean teal color scheme for the data points.

GGuilinabaoge

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

SSophia Chiao

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. The implementation uses React to render the SVG elements, while D3.js provides the data loading, linear scaling, and axis tick generation through `scaleLinear` and `extent`. The `Marks` component draws each circle with a tooltip showing the formatted x-value, and the axes are constructed from reusable `AxisBottom` and `AxisLeft` components. The design features a Poppins typeface, muted gray and teal colors, and generous margins for axis labels.

RReymond Mesuga

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a stylized scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each data point is rendered as a teal circle with a tooltip displaying its x-value. The visualization uses React components to build the SVG, with D3 v5 providing the linear scales (`scaleLinear`), axis generation via `AxisBottom` and `AxisLeft`, and CSV data loading through `useData`. The Poppins font and custom axis colors give the chart a modern, polished aesthetic.

KKirsten Lund

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width for three species of flowers. The scatter plot uses distinct teal and purple color coding to differentiate species, with hover tooltips revealing each point’s species name. Built with React and D3 v5, it uses `scaleLinear`, `csv` for data loading, and custom SVG `AxisBottom` and `AxisLeft` components. The `Marks` component renders circles with a fixed radius of 10 pixels, while axis styling and font are customized through CSS, including the Poppins typeface.

EEdgar Alves

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset as a stylized scatter plot, mapping petal length to the x-axis and sepal width to the y-axis. Built with React and D3 v5, it renders SVG circles with tooltips via nested `<title>` elements. The code uses `d3.csv` for data loading, `scaleLinear` for coordinate mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to generate axes and data points with Poppins typography and a teal color scheme.

SStudentCZ

95% match