Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published1🌍 Public

Last edited Jun 18, 2023

Created on Jun 18, 2023

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris Dataset, mapping petal length and sepal width to the x- and y-axes. Each data point is rendered as an SVG circle colored by species, with a legend and tooltips. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom components like `AxisBottom` and `Marks` for layout.

SSandyWu7179290504

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

NNart Williamson

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses SVG circles to render each data point, with hover tooltips displaying formatted values. The axes are constructed via reusable components (AxisBottom, AxisLeft) that leverage D3’s scaleLinear and extent functions, while the CSS styles the marks and labels with a clean, minimal aesthetic.

Jjerryren527

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization is a stylized scatter plot of the classic Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The SVG rendering uses React components to generate the chart’s marks (colored circles) and its two axes, with all layout and scales handled by D3’s linear scale and extent functions. The code also leverages D3’s CSV loader for data ingestion and formatting functions for tick labels. The plot’s design incorporates a custom Poppins font and muted color palette.

Aaine-ian

95% match

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

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization uses React with D3.js v5 scales, including `scaleLinear` and `extent`, to position SVG circles. Axes are rendered as custom React components, with tick marks and labels styled using Poppins font. The plot provides hover tooltips displaying x-axis values in abbreviated format, while the data loads asynchronously from a CSV file using D3's `csv` function.

GGAMBILLJJ94

95% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and renders SVG circles as marks, with tooltips showing exact values. The code imports data via `d3.csv` from a GitHub gist, while custom React components handle axis rendering and mark placement. A Poppins font and teal color scheme give the plot its stylized appearance, with loading state shown until data arrives.

Ppakoensi

95% match

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

95% match