Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Stylized Scatter Plot

✓ Published0🌍 Public
TtrwMK
Last edited Oct 18, 2022
Created on Oct 18, 2022

This example visualizes the classic Iris dataset, plotting petal length against petal width in a scatter plot where each flower is represented by a circle. The visualization uses d3.scaleLinear to map data values to positions, with React components for rendering axes and marks as SVG elements. The code fetches data via d3.csv from a GitHub gist, implements custom AxisBottom and AxisLeft components, and includes interactive hover tooltips through SVG <title> elements. Styling uses the Poppins font with a distinct color scheme.

AI-generated description

A scatter plot of [The Iris Data Set] (https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv)

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 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 flower dataset, plotting petal length against petal width in a scatter plot. The visualization uses a custom React component structure that leverages D3's `scaleLinear` for axis scaling and maps data points to SVG circles. The rendering relies on D3 utilities for data loading (`csv`) and domain calculation (`extent`), while the React hooks manage asynchronous data fetching. The plot features styled axes with tick marks and labels, and each data point includes a tooltip showing its petal length value, all rendered as SVG elements within a React-driven interface.

TtrwMK
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 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
Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width in a minimalist scatter plot. React renders the SVG, with d3.scaleLinear mapping the measurement ranges and generating axis ticks. Axes are styled per the Poppins font, while the circle marks use the default SVG tooltip via the `<title>` element. The data is loaded asynchronously from a GitHub-hosted CSV using d3.csv, and the graph emphasizes clean typography and muted colors.

JJONATHAN SIMON
95% 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
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 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
95% match