Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published1🌍 Public

Last edited Oct 4, 2021

Created on Oct 4, 2021

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.

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

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

95% match

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

95% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, cycling through different pairings of sepal and petal measurements every two seconds to reveal correlations. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data to SVG circles, while a reusable chart function encapsulates the rendering logic. The plot animates by updating the x-axis value and re-invoking the chart, with axes and points redrawn dynamically.

Eeravellisaimeghana

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates the classic Iris Dataset, plotting sepal and petal measurements as animated circles. A scatter plot visualizes the data, with the x-axis cycling through different measurement columns every two seconds. Implemented using D3 v6, the chart is built as a reusable function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `csv` and rendered as SVG circles, with transitions updating the x-value to reveal different feature relationships.

RRevanthGrreddy

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, cycling through four numerical attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. It uses D3.js v6 with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and updates the visualization by re-calling the chart function. The plot renders as SVG circles with animated transitions, and the code dynamically binds new data values to update the x-scale domain and circle positions, showcasing a modular chart pattern for interactive data exploration.

Sshailajat1998@gmail.com

94% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different x-axis dimensions (petal width, sepal width, petal length, sepal length) every two seconds while keeping sepal length on the y-axis. It uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` to render SVG circles and update axes. The reusable chart module, defined via a closure with getter-setter methods, is called with `.call(plot)` to re-render the visualization.

Mmahee0725

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