Alena

@onair-lena·3 public vizzes

Fork of Minimal Reusable Charts Pattern

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two of its four measured attributes via dropdown menus for the X and Y axes. The code implements a reusable chart pattern using d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, with animated transitions between selections. Each point represents an iris flower, and changes to the axes trigger a smooth 3-second transition that moves existing circles while newly appearing points grow from radius zero. The chart fills the browser window and uses an SVG rendering approach with D3's data join pattern.

Nov 26, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This scatter plot visualizes the Iris Dataset, mapping sepal length against petal width with D3 v6. The code uses `d3.csv` to load data and `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes. A `d3.scaleOrdinal` and `d3.symbol` generator draw points as SVG paths, with symbol types based on species. The `scatterPlot()` function is reusable, configured via chained methods for dimensions, margins, and accessors.

Nov 12, 2023

Loading thumbnail…

Wave with gradient

This example animates a growing wave of circles across the screen, with each circle’s size and vertical position modulated by a sine function over time. The circles are colored with a radial gradient that transitions from purple to white. Written in D3.js, the code uses `select`, `range`, and a join to append new circles each frame, while `transition` and `easeLinear` control the size change. The animation runs on a `setInterval` at 60fps, incrementally adding circles until they fill the viewport width, then resetting.

Aug 14, 2023