Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
Jjrj@es.aau.dk
Last edited Apr 28, 2024
Created on Apr 28, 2024

This example visualizes the classic Iris Dataset, plotting petal length against sepal width in a stylized scatter plot. It uses React and D3 v5 to render an SVG with custom axis components, including a formatted bottom axis that scales tick values with abbreviations. Data is loaded asynchronously via d3.csv from a GitHub gist, with numerical parsing applied. Circles are colored teal, with tooltips showing formatted x-values. The layout includes labeled axes for both dimensions, with margins and tick offsets configured in the main App component.

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 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
97% 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 as a scatter plot, comparing petal length on the x-axis against sepal width on the y-axis. The code uses React for component structure and d3.scaleLinear for coordinate mapping, rendering circles as SVG marks with tooltips. Axes are generated using d3's tick formatting, while data loading relies on d3.csv with asynchronous state management via React hooks. The visualization includes styled axis labels and tick lines, with a loading state shown before data arrives.

Ssumukh-bharadwaj
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 to render SVG circles and axes, with D3 (v5) for data loading, scaling, and axis generation. A `Poppins` font style is applied to the page, while the marks are styled with a teal fill and the axes use light gray tick lines. The code includes a formatted tick label function that abbreviates values using D3’s `format('.2s')`.

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

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and sepal width for each flower specimen. The chart uses React to render SVG circles with D3’s scaleLinear and extent functions to compute the axes’ scales and domains, while custom AxisBottom and AxisLeft components generate tick marks. Data loading is handled by D3’s csv parser, which converts numeric fields. The visualization applies a Poppins font and a seagreen fill, with axes styled in light blue and gray text.

Pparshwa30122002@gmail.com
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The visualization uses React components to render SVG circles and axes, with D3 v5 providing the scaleLinear, extent, max, and format functions for data scaling and tick formatting. Styling is applied via CSS class selectors, and a native SVG title element displays tooltips on hover. The data is loaded asynchronously from a CSV file using D3’s csv function.

JJONATHAN SIMON
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