Fork of Fork of Fork of Reusable D3 Scatter Plot

100%

Fork of Fork of Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 26, 2025

Created on Mar 26, 2025

Forked from 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.

AI-generated description

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

96% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

Pprince.sahith100@gmail.com

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an interactive scatter plot of the Iris dataset, where the x-axis cycles through four numeric columns (petal width, sepal width, petal length, sepal length) every 1.5 seconds, while the y-axis stays fixed to sepal length. Each point is colored by species using a d3.scaleOrdinal with a viridis-like palette, and a static legend identifies the three species. Built with D3 v6, the visualization uses d3.csv to load data, d3.scaleLinear and axisLeft/axisBottom for axes, and a reusable scatterPlot function that updates circle positions and axis labels on each interval.

RRavi Teja Bonam

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal width on the x-axis against sepal length on the y-axis, with each flower represented by a circle. It uses a reusable chart pattern where the scatter plot function is configured via chained setter methods for dimensions, margins, and data accessors. The visualization is rendered as SVG, with axes generated using d3-axis and scales created with d3-scale. The code leverages d3.csv for data loading and d3.select to append the SVG to the page.

DDaniel Eduardo Contro

93% 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

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. The visualization uses a custom reusable D3 module, `scatterPlot`, which leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. Data is loaded asynchronously via `d3.csv`, with numeric parsing applied to each measurement. The plot fills the browser window, includes labeled axes with large tick text, and uses a margin object to position the chart within the SVG container.

Mmaxthamt

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable d3 scatter plot visualizes the Iris Dataset, plotting petal width against sepal length as colored circles. It loads CSV data via `d3.csv` and renders SVG circles using a custom `scatterPlot` reusable chart function. The chart uses `scaleLinear` for x and y axes, with `axisLeft` and `axisBottom` for labeled scales, and configurable margins, dimensions, and radius through function chaining.

Rrcoutts

93% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris dataset, visualizing relationships between petal and sepal measurements across three flower species. The visualization cycles through different variable pairings every two seconds, updating the axes and point positions accordingly. Built with reusable D3 components, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `extent` from D3 6.7.0, using SVG rendering with animated transitions and a color-coded legend for species identification.

MMar-99

93% match