Matt

@TheeMattOliver·2 public vizzes

[idempotent axis labels] Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through different feature pairings every three seconds. Built with D3 v6, it uses a reusable chart module that creates SVG circles with smooth transitions between measurements like petal width and sepal length. Axis labels and scales update idempotently, while the chart animates point positions and axis transitions using `transition()` and `axisBottom`/`axisLeft`. The fork includes custom axis labels with a Share Tech font, demonstrating how to handle dynamic label updates in a reusable D3 chart.

May 22, 2021

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot displays the classic Iris dataset, cycling through different floral measurements every three seconds to reveal correlations between species attributes. The visualization arranges data points using D3’s `scaleLinear` and `extent` to map sepal and petal dimensions to Cartesian coordinates, with smooth transitions driven by `transition().duration(1000)`. Built with D3 v6, the `scatterPlot` reusable chart component manages SVG circles and axes via `.join()`, while `axisLeft`, `axisBottom`, and `setInterval` orchestrate the periodic dimension swap. The full-window SVG renders 150 flowers with color-coded clusters, demonstrating an iterative, animated approach to exploring multi-dimensional datasets.

May 22, 2021