ReUsable Fork of D3 Scatter Plot

100%

ReUsable Fork of D3 Scatter Plot

✓ Published1🌍 Public

Last edited Dec 4, 2022

Created on Dec 4, 2022

This example presents a scatter plot visualization of the Iris Dataset, displaying the relationship between petal length and sepal length for individual flowers. The plot is built using a reusable D3.js module that encapsulates the chart's configuration, including margins, axis scales, and point radius, making it adaptable to different datasets by specifying custom data accessors for x and y values. The implementation leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map data to SVG circle elements, with the chart initialized via a chainable setter pattern in the `scatterPlot` function. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the visualization is rendered responsively to fill the browser window.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. 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

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

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

93% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot visualizing the Iris Dataset, with petal length mapped to the x-axis and sepal length to the y-axis. The implementation uses D3's `scaleLinear` for coordinate scaling, `extent` for domain calculation, and `axisLeft`/`axisBottom` for labeled axes. The code demonstrates a custom `scatterPlot` function that accepts configurable parameters like dimensions, margins, data, and value accessors, enabling flexible reuse across different datasets. The plot renders as an SVG with circles sized by a configurable radius parameter, and the dataset is loaded via D3's `csv` function from a remote source.

Jjmetzg11alpine

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

93% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris dataset as a scatter plot, mapping petal width against sepal length for each specimen. The plot is built using the D3 library's scaleLinear, extent, and axis functions. The visualization is rendered as an animated SVG, cycling through all four data columns as the X-axis every two seconds. This reusable chart, created with a custom scatterPlot component, demonstrates the flexibility of D3's functional programming approach for data binding and layout.

Ssiddu7147

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

92% match