Reusable D3 Scatter Plot

100%

Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited May 8, 2021

Created on May 8, 2021

This reusable D3 scatter plot visualizes the classic Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for 150 flower samples. Built with vanilla HTML, CSS, and the D3 v6 library, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points to an SVG canvas. Circles are rendered via `selectAll` and `join`, with the visualization filling the full browser window and updating to any screen size.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 scatter plot

This reusable D3 scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for individual flowers. Built with D3 v7, it renders circles as SVG marks positioned by d3.scaleLinear scales derived from the data extents. The code uses d3.csv to load the data, d3.axisLeft and d3.axisBottom to generate axes, and d3.selectAll with data joins to bind circles. The visualization fills the entire browser window and includes a 24-pixel tick font size, making it suitable for large displays.

UUzoemeka Okechukwu Innocent

94% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

KKerim

93% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot displays the Iris Dataset, plotting petal length against sepal length. The implementation uses a custom `scatterplot` function that takes configurable parameters for data, dimensions, margins, and point radius. It employs D3's `scaleLinear` for axis scaling, `scaleOrdinal` for symbol mapping, and `axisLeft`/`axisBottom` for rendering axes. The SVG visualization is generated declaratively with data-driven circles, and the code demonstrates a modular approach for creating reusable chart components with D3 7.6.1.

Yyankesswang

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

92% match

Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot charts the Iris dataset, with petal width mapped to the x-axis and sepal length to the y-axis. Built with D3 v6, it demonstrates a modular chart factory pattern using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. SVG circles render the data points, with axes and margins configured via a fluent API. Every two seconds, the x-axis mapping cycles through different iris measurements, animating the plot's layout while preserving the same visual encoding.

OOleg Zhernovoy

92% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, with each circle representing a flower sample. The visualization cycles through different column pairs every two seconds, animating between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length fixed on the y-axis. Built with D3.js v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, demonstrating a reusable chart pattern where the same plot function is called repeatedly with updated accessors.

DDINESH SAI BOPPANA

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

91% match

Loading thumbnail…

Reusable D3 Scatter Plot Additions

This example presents a reusable scatter plot of the Iris dataset, mapping petal width against sepal length. Built with d3.v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the visualization. The implementation follows a reusable chart pattern with configurable accessor functions and margins, rendering circles via SVG. Data is loaded as CSV from a GitHub gist, with axis labels added as SVG text elements. The chart adapts to the full window size and includes custom styling through a Share Tech font.

MMaxene Graze

91% match