Re-doing Reusable Scatterplot 101 with my data

100%

Re-doing Reusable Scatterplot 101 with my data

✓ Published1🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

Forked from Re-doing Reusable Scatterplot 101

This example re-implements a reusable scatterplot using D3’s `scaleLinear` and `scaleTime` for axes, with data points rendered as SVG circles via `select` and `join`. It plots hard-coded yearly percentages against dates, showing a decreasing trend from 1986 to 2021. The visualization uses a simple layout with left and bottom axes, generated through `axisLeft` and `axisBottom`, within a full-window SVG. The data is local, not from the referenced Iris CSV.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Re-doing Reusable Scatterplot 101 with my data with Line

This example visualizes a time series of percentage values from 1986 to 2021 as a scatterplot with a connecting line. A D3 reusable chart module creates a time-scaled x-axis and linear y-axis, using `scaleTime()` and `scaleLinear()` to position circles and a line path generated with `line()` from the d3 library. The data is manually defined as arrays of years and percentages, converted into date objects, and rendered as SVG with axes.

AAlex

86% match

Loading thumbnail…

Re-doing Reusable Scatterplot 101

This example visualizes the Iris dataset as a scatterplot, encoding petal width on the x-axis and sepal length on the y-axis. It demonstrates a refactored version of a reusable chart module, building on an earlier commented-out implementation. The code uses D3 v7 APIs including `d3.csv` for data loading, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and selection joins to render SVG circles. The final chart is assembled through a custom `scatterPlot` function configured with width, height, margin, and radius, then invoked on an SVG element.

AAlex

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different flower measurements on the x-axis every two seconds. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` within a custom reusable `scatterPlot` function, rendering SVG circles with `selectAll` and `join`. Data loads from a CSV via `d3.csv`, with axes updating dynamically through repeated `svg.call(plot)` invocations.

Cchengalvasharanya@gmail.com

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

82% match

Loading thumbnail…

Reusable D3 scatter plot

This example presents an interactive scatter plot of the classic Iris flower dataset, using SVG circles to visualize relationships between different measurements like petal length and sepal length. Built with React and D3 v3, the visualization cycles through four data columns every two seconds, smoothly animating the transition of points across axes via D3’s `transition.attr` method. The reusable `scatterPlot` function leverages D3 scales (`scaleLinear`), axes (`axisLeft`, `axisBottom`), and data joins to dynamically update the visualization. The code loads data from a remote CSV using `d3.csv` and adapts to the browser viewport dimensions.

Bbjfmbeck

82% match

Loading thumbnail…

Fork of Reusable D3 Chart ScatterPlot Covid

This example visualizes the Iris dataset as an animated scatter plot, cycling through four measurement combinations every two seconds. Each point is colored and shaped by species, with circle radius and symbol size mapping to petal and sepal widths. The visualization uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`, rendered as SVG with a reusable chart function pattern. Data loads as CSV and updates via `setInterval` calling the scatter plot component with new axis mappings.

Ccssergio

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot of the Iris dataset, cycling through four different axes (petal width, sepal width, petal length, and sepal length) every two seconds to reveal different relationships between measurements. Data points use D3’s `scaleOrdinal` with `symbols` and `schemeCategory10` to give each iris species a distinct shape and color. The chart is built with a custom `scatterPlot` function that leverages `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `selection.join`, and is animated via `setInterval` updating the x-value accessor. The SVG renders full-window, and the dataset is loaded from a CSV using `d3.csv`.

Hharoldle

81% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot using D3 v6, rendering the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. It uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.symbols` to encode species as distinct symbol shapes, and `d3.axisLeft`/`d3.axisBottom` for axes. The plot is built as a modular factory function that accepts configurable accessors for dimensions, margins, and symbol size, then renders SVG paths via `d3.select` and `join`. Data is loaded asynchronously from a GitHub gist CSV.

SSubhendu Karmakar

81% match