Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 22, 2023

Created on Mar 21, 2023

This fork of a reusable D3 scatter plot visualizes the Iris dataset, showing sepal length against sepal width. Each point represents an iris flower, colored by species (setosa, versicolor, virginica) with distinct circle, square, and triangle shapes. The chart is built using d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with the reusable scatterPlot function exposing configurable width, height, margin, and radius. Data is loaded via d3.csv with d3.autoType, and circles are rendered with adjustable opacity and stroke styling.

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 scatter plot visualizes the Iris dataset, mapping sepal length against different flower measurements in a full-screen SVG. A d3 scaleLinear computes x and y positions from extent-bounded domains, with circles rendered via a data join. The chart cycles through four measurement columns every two seconds using setInterval, updating the x-axis and points. The reusable chart pattern from d3 v6 supports flexible configuration of margins, radius, and value accessors.

Ssumitradevipolina

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

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length against petal width. The reusable chart component updates every two seconds, cycling through different x-axis columns to reveal patterns across all four flower measurements. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles. Each species appears as a distinct cluster, with axes and tooltips drawn from the `scatterPlot` factory function.

Mmukundakrishna.r@gmail.com

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

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

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

92% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, with each point representing a flower specimen. The visualization cycles through four different attribute combinations (petal width, sepal width, petal length, and sepal length) as x-axis values every two seconds, while the y-axis remains fixed to sepal length. Built with D3 v6, the example uses the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct the plot and axes, and employs D3's `join` feature for efficient SVG element updates. Data is loaded from a remote CSV file and parsed into numerical values, rendered as SVG circles with the Share Tech font.

AABCDB15

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

91% match