charlieronchetti@gmail.com

@CharlieRonchetti·11 public vizzes

Animated Scatter Plot with Menus

This animated scatter plot, built with React and D3, lets users explore the classic Iris dataset by dynamically selecting which columns map to the x- and y-axes via two dropdown menus. The chart supports both quantitative and categorical axes, smoothly transitioning circles to their new positions over one second when the data or axis type changes. On initial load, points grow from radius zero into place, and all axis transitions are animated for a polished, interactive experience.

Mar 1, 2024

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the four numeric columns of the Iris dataset, smoothly transitioning the x-axis and circle positions every three seconds. Using D3’s `scaleLinear`, `extent`, and `transition`, it updates the x-value mapping while keeping y-values fixed to sepal length. The reusable `scatterPlot` function joins data to SVG circles, animating radius growth on entry and staggered transitions during updates, with axes redrawn via `axisBottom` and `axisLeft`. Data loads as CSV, and the 1-second transitions create a clear visual comparison of feature distributions.

Feb 28, 2024

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable D3.js scatter plot component built with React and rendered as SVG. The visualization initially plots iris flower petal length against sepal length, then cycles through different data columns every two seconds, animating the transitions. It uses D3’s scaleLinear, extent, axisLeft, and axisBottom functions, and leverages the join pattern for efficient SVG updates. The code loads data from a CSV via d3.csv, and the plot adapts to window dimensions.

Feb 28, 2024

Loading thumbnail…

Reusable D3 Scatter Plot with symbols

This example presents a reusable scatter plot built with D3 v7 and React, displaying the Iris dataset with sepal length on the y-axis and petal length on the x-axis. Each species of iris is distinguished by a different SVG symbol shape, drawn using `d3.symbol` and `d3.symbols`, with axes rendered via `d3.axisLeft` and `d3.axisBottom`. The chart uses `d3.scaleLinear` for positioning and `d3.scaleOrdinal` to map species to symbols, while the reusable `scatterPlot` function is configured through a fluent interface.

Feb 27, 2024

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The visualization uses D3 v7's `csv` loader to fetch and parse the remote dataset, then applies `scaleLinear` and `extent` to compute the axis domains from the numeric columns. SVG circles are drawn using a data join, with axes generated via `axisLeft` and `axisBottom`. The chart is rendered in vanilla HTML and JavaScript, filling the browser viewport dynamically.

Feb 22, 2024

Loading thumbnail…

D3 Selection Exploration

A dynamic collection of circles animates in real time, with positions, radii, and colors shifting continuously. The visualization demonstrates React and D3 version 7 selection methods, using `select` and `join` to bind and update SVG circle elements to arrays of data objects generated by a custom `makeData` function. An interval drives the animation at roughly 60 frames per second, incrementing a time variable that modulates sine waves controlling each circle's vertical position, radius, and RGB color values. The example showcases how D3's data joins efficiently handle live updates to the DOM.

Feb 20, 2024

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example shows a large grid of horizontal and vertical stripes that appears to be interwoven, with geometric symbols such as circles, diamonds, and triangles emerging from the pattern. It generates 100 striped bands in each direction and uses two SVG masks to selectively hide portions of the grid, creating the illusion of layered shapes. Built with D3 v7 and React, the code uses `select`, `range`, `symbols`, and `symbol` to draw the mask paths, with `renderMask` applying the inverted fill logic. The rendering approach is purely SVG-based, sized to the full browser window.

Feb 18, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style grid of horizontal and vertical bars, with the pattern masked to reveal a central circle. It uses D3’s `select` and `range` to generate 100 rectangular strips in each direction, while two SVG `<mask>` elements—one inverted—combine to create the circular cutout effect. The code runs in a React environment and renders vector graphics as SVG.

Feb 15, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing by assembling a grid of horizontal and vertical stripes that intersect to form a circular void at the center. The piece renders 100 horizontal rectangles masked by a black circle, while a second set of 100 vertical rectangles uses an inverted mask with a white circle, creating a complementary pattern of visible lines. Built with the HTML DOM and SVG APIs, the visualization constructs elements directly via JavaScript, using `createElementNS`, `setAttribute`, and SVG mask definitions to achieve the geometric composition. The result is a computational homage to LeWitt's conceptual art, where simple algorithmic rules generate complex visual interplay.

Feb 14, 2024

Loading thumbnail…

Pseudo Bar Chart

This example shows a pseudo bar chart with six black rectangular bars labeled A through F, rendered as static SVG elements on a white canvas. The bars vary in height and y-position to simulate quantitative values, while labels sit beneath each bar. The code uses raw SVG `<rect>` and `<text>` elements, positioned manually with pixel coordinates, and styled with the Share Tech font from Google Fonts. It demonstrates a minimal, hand-coded alternative to data-driven charting, using only HTML and CSS within a React-free setup.

Feb 13, 2024

Loading thumbnail…

SVG Fundamentals

This example showcases basic SVG graphics within a minimal HTML page. It draws a bordered white canvas and a set of eleven black-filled circles scattered across the space at predefined coordinates. The code directly uses the SVG `<rect>` and `<circle>` elements, styled through inline attributes and a small amount of CSS for page layout. The rendering relies purely on the SVG specification, with no external JavaScript libraries or data sources. It demonstrates manual positioning and styling of vector shapes to create a simple dot-based composition.

Feb 13, 2024