Skip to main content
Log in
A

Andrea Mignone

@floatingpurr·18 public vizzes

Loading thumbnail…

Reusable Flower Plot

The flower plot combines stacked bar and pie/donut chart concepts, rendering hierarchical data as a radial flower of petal-like arcs. Each petal's length encodes the total value, while linear gradients segment it to show nested category proportions. Animated transitions update the visualization when data changes, and interactive hover reveals an informational legend. Built with D3.js, it uses `d3.pie`, `d3.arc`, and reusable chart components to generate SVG graphics, with optional debug overlays to visualize geometric calculations.

Jul 15, 2021
Loading thumbnail…

Playing with selection.join

A dynamic SVG visualization demonstrates the `selection.join` API in D3 v7, animating a set of letters that changes every three seconds. Random alphabet subsets are generated with `d3.shuffle` and sorted, then mapped to `text` elements whose positions are computed based on their index. New letters enter in green, while existing ones update to gray, showcasing the join’s enter/update behavior. The example runs in a React environment, rendering to an SVG canvas sized to the browser window.

Jul 14, 2021
Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

Jun 22, 2021
Loading thumbnail…

[Ex.10] Animated Reusable D3 Scatter Plot with labels

This example presents an animated scatter plot of the Iris Dataset, cycling through different x-axis variables every three seconds. Built with D3 v6, it uses selection joins and transitions to smoothly update circle positions and axis scales. The reusable chart function accepts configurable accessors for data values, labels, and margins, with axis rendering via `axisLeft` and `axisBottom`.

Jun 14, 2021
Loading thumbnail…

[Ep.10] Reusable d3 Scatter Plot (idempotent version)

This example shows a reusable D3.js scatter plot built with React, visualizing the classic Iris dataset. The plot animates through different feature pairs (petal width, sepal width, petal length, sepal length) on the x-axis, updating every two seconds. It uses d3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to create the axes and render SVG circles. The chart is idempotent, meaning it can be re-invoked with new data or configurations without duplicating elements, thanks to D3's `join` method.

Jun 3, 2021
Loading thumbnail…

[Ep.10] Animated Reusable d3 Scatter Plot (idempotent version)

This animated scatter plot cycles through different iris flower measurements, updating every three seconds to reveal changing correlations between traits. Built with React and D3.js, it uses the idempotent scatter plot pattern to transition circles smoothly between positions while axes re-scale accordingly. The visualization loads the classic Iris dataset from a CSV file and renders SVG with animated transitions, demonstrating reusable chart components and dynamic data binding.

May 25, 2021
Loading thumbnail…

Reusable d3 Scatter Plot with Symbols

This example shows a scatter plot of the Iris dataset, using distinct D3 symbols (circles, crosses, diamonds, etc.) to represent different species based on petal and sepal length. The visualization is built as a reusable `scatterPlot()` function that accepts configurable accessors for x, y, and symbol values, along with margins and symbol size. It relies on `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, `d3.axisBottom`, and `d3.symbol` to render SVG paths, fetching data from a CSV via `d3.csv` and styled with custom CSS.

May 25, 2021
Loading thumbnail…

Reusable d3 Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as SVG circles with a fixed radius. Built as a configurable function using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, it fetches CSV data via d3.csv and supports setters for width, height, margins, and value accessors. Applied to a full-window SVG through a D3 selection, the chart renders axes with styled tick text and updates dynamically when re-invoked with new parameters.

May 24, 2021
Loading thumbnail…

Daily new cases of Covid in Italy (Episode 8)

This visualization shows the daily new cases of Covid in Italy as a scatterplot, with each point’s radius scaled proportionally to the number of intensive care patients on that day. The time-based x-axis uses `scaleTime`, while the y-axis and radius use `scaleLinear`. A toggle button in the top-left corner shows or hides a connected path. Data is fetched via `d3.csv` from the Italian government’s continuously updated GitHub repository, and rendered as SVG with axis generators `axisLeft` and `axisBottom`.

May 24, 2021
Loading thumbnail…

D3 Scatter Plot triggering alerts as tooltips (Vanilla JS)

This example renders an interactive scatter plot of the classic Iris dataset, loaded from a CSV file via d3.csv. The visualization maps petal length to the x-axis and sepal length to the y-axis using d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom for the axes. Circles are drawn as SVG elements with d3.selectAll and .join, and hovering over a point triggers a JavaScript alert displaying the approximate coordinates, which are computed by inverting the scale with x.invert. The plot fills the entire browser window, using the viewport dimensions for the chart’s width and height.

May 7, 2021
Loading thumbnail…

D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

A 4×4 scatter plot matrix compares every pair of numeric fields in the iris dataset, with circles colored by species using a d3.scaleOrdinal and the schemeSet1 color array. Each cell combines d3.axisLeft and d3.axisBottom for scales, while d3.csv loads the data from a Gist. The SVG charts are sized to a quarter of the window, and titles appear only on the diagonal cells. The code relies on vanilla JavaScript with d3 v6, using d3.select, d3.extent, and d3.scaleLinear per plot.

May 6, 2021
Loading thumbnail…

D3 Scatter Plot (Vanilla JS)

This example renders a scatter plot of iris flower measurements, mapping petal length to the x-axis and sepal length to the y-axis. It loads CSV data from a Gist URL using `d3.csv`, parses numeric fields, and applies `d3.scaleLinear` for both axes. Circles are appended to an SVG via `d3.select` and `join`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, using a margin convention and D3 v6 with vanilla JavaScript.

May 6, 2021
Loading thumbnail…

D3 Partial Scatter Plot (Vanilla JS)

This example displays a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using D3 v6. It fetches the CSV from a GitHub Gist, parses the numeric fields, and creates SVG circles with pixel-based coordinates scaled from the data extents. The visualization fills the browser window, using D3’s `scaleLinear`, `extent`, `csv`, and `select` APIs to handle scaling, data loading, and DOM manipulation.

May 5, 2021
Loading thumbnail…

Fork of Bouncy Wave (harnessing the group element)

This example shows a bouncy wave formed by a series of circles whose vertical positions and radii oscillate over time, while a line path traces through their centers. It demonstrates how to efficiently update a visualization by reusing a single group element via `selection.join()`, binding new data each frame. The animation runs through `setInterval`, updating a time variable that drives the data generation in `makeData`. The code uses D3 v6 APIs such as `select`, `line`, and `.join()` to append and update circles and a path within an SVG.

Apr 23, 2021
Loading thumbnail…

Named and Default export

This example demonstrates the difference between named and default exports in ES6 JavaScript modules, showing how both can be imported together in a React context. The code defines `foo.js` with named exports `foo` and `bar`, plus a default export function, then imports them in `index.js` using mixed import syntax. It uses template literals to log the exported values and imports D3's `select` API to verify the library loads. The rendered page is a minimal HTML document with large centered text, displaying "Hello HTML" without any visualization or data rendering.

Apr 23, 2021
Loading thumbnail…

Fork of Bouncy Wave

This interactive visualization renders a sine wave as a sequence of thick-stroked, white-filled circles connected by a black path, all drawn as SVG. The animation updates at 60 frames per second, with the number of circles oscillating between 5 and 15 and each circle’s vertical position, radius, and the connecting line’s shape shifting based on a time parameter. The code uses the d3 `select`, `range`, and `line` APIs to generate data and append SVG elements, with the `selection.join` method synchronizing the changing dataset to the rendered shapes.

Apr 23, 2021
Loading thumbnail…

D3 Selections (with lines)

This example demonstrates the difference between D3's `join` and `merge` operations by animating a dynamic set of circles and vertical lines. As the data count shifts with a sine wave, the `d3.select` API's `join` method incrementally updates the SVG elements, seamlessly adding or removing nodes. Circles are positioned and sized based on generated data, with a `d3.scaleLinear` color mapping from white to green applied to both the circle strokes and the lines descending from each circle to the chart's bottom. The animation runs at roughly 60 frames per second using `setInterval`.

Apr 22, 2021
Loading thumbnail…

D3 Selections (with dots and lines)

This example demonstrates how D3 selections manage live-updating data through the `join` pattern as an alternative to `merge`. Animated dots and connecting lines respond to a continuously changing dataset generated by sine functions, with circle positions and radii shifting over time. The visualization uses D3 v6’s `selectAll`, `data`, and `join` to bind dynamic data to SVG elements, while `setInterval` drives the animation at roughly 16 frames per second. The code separates data generation and visualization logic into distinct modules, showcasing reusable D3 selection patterns.

Apr 22, 2021