Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited May 8, 2022

Created on May 8, 2022

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.

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 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.

DDanier

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width as a scatter plot. The visualization uses React components to render SVG elements, with d3.scaleLinear functions handling the x and y axes. The code loads data with d3.csv, applies axes using custom React components, and displays each flower as a circle with a tooltip showing its petal length. The styling uses the Poppins font and a teal color scheme.

SSamuel Baik

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species, color-coded and accompanied by a legend. Hovering over a legend item dims all points except those belonging to that species. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scales, with custom SVG axes and a color legend. Data is loaded via `d3.csv` from a GitHub gist.

JJuan Raul de la Guardia

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

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length and sepal width on the x and y axes while coloring each point by species. Built with React and D3 v5, the SVG chart uses `scaleLinear` and `scaleOrdinal` to position and color the circles, with a custom color legend and hover tooltips. The visualization eschews traditional chartjunk in favor of a minimalist design that emphasizes clear data-ink ratio through its stylized axes and typography.

Qqtrfx

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

95% match

Loading thumbnail…

Fork of 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. Rendered as an SVG using React and D3 v5, the example loads data via `d3.csv` and uses `d3.scaleLinear` with `d3.extent` to compute scales. Custom Axis components generate tick marks and labels, while circular marks represent individual data points, each with a tooltip showing its x-value.

Cchar0496

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

95% match