Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 12, 2021

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length for individual flowers. Built with D3 v6, it uses a reusable scatter plot component configured with `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The chart loads CSV data from a remote gist, parses numeric fields, and scales points across the full browser window. The minimalist styling uses the Share Tech font and a white background.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis with circles of fixed radius. It uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and a custom reusable `scatterPlot` module. The SVG renders full-window, with data parsed from a remote Gist, and styling sets large tick text while hiding page overflow.

Mmaxthamt

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length, with points colored by their attributes. Built using D3.js (v6), it employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and SVG circles for marks. The chart automatically cycles through four numeric columns—petal width, sepal width, petal length, and sepal length—on the x-axis every two seconds via `setInterval`. Data is loaded asynchronously from a CSV URL using `csv` and parsed into numbers. The reusable chart pattern, inspired by Towards Reusable Charts, accepts configurable accessor functions, with styling handled by the Share Tech font.

Ssaiyogesh9911@gmail.com

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

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

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses a reusable D3 module pattern with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The code loads data via `d3.csv` from a gist, parses numeric fields, and applies a configurable margin and radius through a closure-based API. The visualization fills the browser window and uses a full-screen SVG without additional interaction.

UUzoemeka Okechukwu Innocent

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles. The chart is implemented as a reusable function, taking data, dimensions, margins, and accessor functions as configurable properties. It renders full-screen as an SVG, with each data point drawn as a circle with a fixed radius of 5 pixels.

LLeah Mitchell

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, 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