Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot - Different Dataset

✓ Published1🌍 Public
WWRCIECH
Last edited Dec 30, 2022
Created on Dec 30, 2022

This example displays the classic Iris flower dataset as an interactive scatter plot, mapping petal length against sepal width for individual data points. It uses D3 v7 to load the CSV data, construct linear scales, and render circles within an SVG container sized to the full viewport. The scatterPlot function is implemented as a reusable closure, configuring axes, margins, and point radius via method chaining. Hovering over any black circle changes its fill to red, providing simple visual feedback.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for three flower species. Each circle is colored by species using an ordinal color scale. Built with React and d3.scaleLinear for positioning, the SVG chart displays axes with formatted tick labels and includes tooltips showing exact values. The code loads data asynchronously via d3.csv, parses numeric columns, and renders marks as SVG circles.

Eevers-codeshop-ai
92% match
Loading thumbnail…

Fork of Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset by mapping petal length and sepal width for individual flowers. Each circle is colored by species using a D3 ordinal scale. The React-based code uses `d3.scaleLinear` and `d3.scaleOrdinal` to position and color the marks, rendered as SVG `circle` elements, with `d3.csv` loading the data for display.

PPiotr Paszek
92% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7 to load CSV data, apply linear scales, and render circular marks within an SVG. The code imports a custom `scatterPlot` module for creating the chart, and the plot includes axes with labels. The rendering approach uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` functions to construct the graphical output.

NNjord
92% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to render SVG elements, with D3 v7 providing the linear scales (`scaleLinear`) that map data values to pixel coordinates. Axis components generate ticks and labels, while circular marks represent each data point. The chart includes a tooltip showing the x-axis value for each point. The dataset is loaded asynchronously via D3's `csv` function from a remote gist URL.

AArefa Patwary
92% match
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This example visualizes the classic Iris dataset with a scatter plot, mapping petal length and width as the x and y coordinates for each data point. Each of the three iris species is distinguished by a unique fill color, and the plot includes labeled axes for both dimensions. The code uses D3 version 6.7.0, loading data from a remote CSV via `d3.csv`, then employing `d3.scaleLinear` for scaling and `d3.axisLeft` and `d3.axisBottom` for the axes. The visualization is rendered as an SVG appended to the body, with circles representing each flower, and all elements are positioned using functions from the D3 API.

Eeravellisaimeghana
92% match
Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for individual flowers. Each circle is color-coded by species using a d3.scaleOrdinal with a custom range, and axes are rendered with d3.scaleLinear and custom React components. The d3.csv loader parses numeric fields, while React components handle SVG rendering of axes and marks.

Oonceup
92% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles are rendered in SVG, with each point labeled by its exact coordinate values via a title tooltip. Built with D3 v7 and React, the visualization uses `d3.csv` to load data, `scaleLinear` for coordinate mapping, and `extent` to compute domains. Axes are generated through `axisLeft` and `axisBottom` functions, while the page adapts to the full browser viewport by using `window.innerWidth` and `window.innerHeight`.

PPeiyang Li
92% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This example displays a scatter plot of the classic Iris dataset, mapping sepal length along the x-axis and sepal width on the y-axis. Each data point is rendered as a blue circle with a tooltip showing its x-value, using React to construct the SVG elements and D3.js's `scaleLinear` and `extent` functions to compute scales and domains. The chart includes labeled axes and tick marks, with data loaded from a remote CSV file via D3's `csv` parser.

AArefa Patwary
92% match