100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Mar 26, 2025

Created on Mar 26, 2025

This example visualizes the Iris dataset with a D3.js scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Each species—setosa, versicolor, and virginica—appears in a distinct color via a d3.scaleOrdinal color scale. The code loads CSV data with d3.csv, scales the axes using d3.scaleLinear, and renders circles in an SVG container with d3.axisBottom and d3.axisLeft for labeled axes.

AI-generated description

// README.md

D3 Iris Scatter Plot

Setup and Run

Install dependencies:
```
npm install
```
Start the server:
```
npm start
```
Open http://localhost:3000 in a browser.

Description

This project visualizes the Iris dataset using a D3 scatter plot. The plot colors each species differently:

Setosa: Light blue
Versicolor: Light green
Virginica: Orange

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each circle is colored by species using a `d3.scaleOrdinal` with lightblue, lightgreen, and orange ranges. The visualization loads CSV data from a GitHub gist, converts relevant columns to numbers, and uses `d3.axisBottom` and `d3.axisLeft` for axes with custom labels. It is built as a reusable function that appends an SVG with fixed dimensions and margins, rendering all points as circles with a radius of 5 pixels.

Pprince.sahith100@gmail.com

95% match

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows an interactive-free scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis, with points colored by species using a d3.scaleOrdinal. It loads CSV data via d3.csv, then builds a reusable visualization through a custom scatterPlot function that appends an SVG, applies linear scales (d3.scaleLinear), and draws axes with d3.axisBottom and d3.axisLeft. The plot includes labeled axes and three color categories for the flower species.

Pprince.sahith100@gmail.com

95% match

Loading thumbnail…

Fork of Reuseable D3 Scatter Plot

This visualization shows a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis using blue circles. The code loads the CSV data via `d3.csv`, parses numeric fields, and scales the data with `d3.scaleLinear` using `d3.extent` for domains. It renders SVG circles and adds axes using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to fill the browser window.

UUzoemeka Okechukwu Innocent

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot orginal

This example visualizes the Iris dataset using D3.js, displaying a scatter plot of petal and sepal measurements. The code uses reusable chart components from `scatterPlot.js` with D3 scales like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The plot animates by cycling through different measurement combinations every two seconds using `setInterval`, with SVG circles colored by species. Data loads from a CSV via `d3.csv`, and the chart adapts to the full window size with configurable margins and radius.

SSnapika

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, using petal width and sepal length as the x and y axes, with points colored by species (setosa, versicolor, virginica). The visualization is built with D3 v6, using the `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` APIs to render axes and a legend. A JavaScript `setInterval` cycles through four column pairings every two seconds, animating the plot to show different variable combinations while the SVG circles update smoothly. The data is loaded from a GitHub Gist CSV file and parsed into numeric fields.

SSheshidharreddy

93% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal width against sepal length while coloring each dot by species (setosa, versicolor, and virginica). Built with D3 v3, it uses `d3.csv` to load data, `scaleLinear` for axes, and `setInterval` to cycle through different data columns every two seconds, updating the x-axis. The SVG rendering includes custom circle markers with varying dimensions and a rotating set of axis labels.

Bbhargavarathod

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length with points colored by species (blue, green, red). Built with D3 v6, it loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to position points, and renders with SVG circles and axes. The chart is implemented as a reusable function in `scatterPlot.js`, though the main `index.js` also directly adds labels and styling.

Ssalimjivani

93% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, encoding petal length and sepal length on the x- and y-axes while coloring each circle by species (setosa, versicolor, virginica). The visualization cycles through different column pairings every two seconds, animating between sepal width, petal length, and other measurements. Built with D3 v6, the example uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` for scales and axes, and SVG circles for rendering. It also demonstrates a reusable chart pattern with a custom `scatterPlot` factory function.

NNaimisha-M

93% match