R

respingu

@respingu·16 public vizzes

Loading thumbnail…

Reusable D3 Scatterplot Symbolised

This example demonstrates a reusable D3.js scatterplot component that visualizes the classic Iris dataset, plotting sepal width against petal width with distinct symbols for each species. The visualization cycles through different column pairings every 200 milliseconds, smoothly updating the axes and points with animation. Built with React and D3 v7, the code uses `scaleLinear` for axes, `scaleOrdinal` and `symbol` for icons, and `axisLeft`/`axisBottom` for rendering. The scatterplot module exposes configurable setters for width, height, data, margins, and symbol size, making it fully reusable.

Loading thumbnail…

Repo Idempotent

This example visualizes the Iris dataset as an animated scatter plot that cycles through different feature pairs every two seconds, with species encoded by distinct symbol shapes. Built with React and D3, it uses `d3.csv` for data loading, `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `symbol` generators for rendering SVG paths. CSS transitions animate point movement between updates, while `axisBottom` and `axisLeft` render the changing scales.

Loading thumbnail…

Reusable D3 Scatterplot

This example shows a reusable D3 scatterplot built with React, displaying the Iris dataset with petal width on the x-axis and sepal width on the y-axis. The code defines a configurable `scatterPlot` component using `scaleLinear` and `axisLeft`/`axisBottom` from D3 v7, rendering SVG circles with tooltips. It loads data via `d3.csv` from a remote URL, and the plot adapts to the window size. The component’s chainable setter functions allow customization of dimensions, margins, and data mappings, demonstrating a flexible, modular approach to chart construction.

Loading thumbnail…

D3 Scatterplot

This example shows a D3 scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The SVG viewport fills the browser window, with circles representing individual data points and axis ticks styled at 18px. Built with React and d3.v7, the code loads the CSV via `d3.csv`, then uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` to render tick marks, and a data join to append circles with tooltips showing coordinate values. The data comes from a GitHub-hosted CSV file.

Loading thumbnail…

Testing Lines on D3

This example animates a dynamic array of white circles and connecting lines, whose positions, radii, and line endpoints oscillate smoothly over time against a black background. Using D3.js v7 with the `select`, `range`, and data-join methods, it updates the SVG scene at 60 frames per second via `setInterval`, employing `.join()` to manage entering and exiting elements. The animation’s motion is driven by trigonometric functions, including sine and tangent, applied to the current time variable `t`.

Loading thumbnail…

D3 outer data

This example animates a set of circles whose positions and radii oscillate based on sine and tangent functions, driven by a continuous time variable `t`. It shows how D3’s data join pattern keeps the DOM in sync with a changing dataset size. Using d3.select, d3.range, and the `.join()` method, the code creates or removes SVG circles each frame, with attributes for radius, x, and y updated directly from the computed data.

Loading thumbnail…

D3 3

Fifteen circles oscillate vertically along a sine-like wave, continuously animating across the screen. The visualization is rendered as SVG elements using the D3 library's selection API. It employs `selectAll`, `data`, and `join` to bind incoming data arrays to circle elements, updating their `cx` and `cy` attributes each frame. A JavaScript `setInterval` timer drives the animation at 60 frames per second, computing new y-positions from a tangent function of the current time step.

Loading thumbnail…

D3 SELECTIONS

The example demonstrates D3 selections in action by creating a full-screen SVG canvas and appending it to the document body using `d3.select`. It sets the SVG’s dimensions to match the browser window’s width and height via `window.innerWidth` and `window.innerHeight`. The code uses the `select` method from the D3 library, version 7.6.1, to chain an `append('svg')` operation and assign width and height attributes. This minimal setup serves as a foundational illustration of D3’s selection and DOM manipulation capabilities within a React framework context.

Loading thumbnail…

JS Arrays

This example displays the phrase "JS Arrays" in large, centered text using CSS styling. The page’s functionality is limited to logging a JavaScript array literal `[1,2,3,4]` to the browser console via a script tag. It relies on core HTML, CSS, and JavaScript APIs, with no external libraries or visualization rendering, serving as a minimal demonstration of array creation and console output.

Loading thumbnail…

Casting Multiple

This example generates a grid of horizontal and vertical stripes using 100 rectangles each, layered to create a woven pattern. Two SVG masks, one inverted, apply symbol shapes derived from D3's `symbol` API, casting the stripe pattern through alternating star-like forms. The code uses `d3.select`, `d3.range`, and `d3.join` to declaratively build the SVG elements within a React-free, vanilla JavaScript environment, with dimensions spanning the full window.

Loading thumbnail…

FULL SOL LE WITT REPRODUCTON D3

This example reproduces a Sol LeWitt-inspired drawing using D3.js version 7.6.1 within a React environment, rendering to SVG. It creates a grid of 100 thin horizontal and vertical rectangles, each masked by a large diamond-shaped symbol. Two masks are applied with inverted fills—one dark on light, one light on dark—so the grid lines appear only within or outside the central diamond, depending on the mask. The code uses `d3.select`, `d3.range`, and `d3.symbol` to generate the shapes and masks.

Loading thumbnail…

Full SolLeWitt Reproduction D3

This example reproduces a Sol LeWitt-inspired drawing by rendering a grid of vertical and horizontal stripes that intersect through two complementary circular mask regions. The visualization uses raw SVG DOM manipulation in vanilla JavaScript, creating 100 vertical rectangles masked by a circle cutout and 100 horizontal rectangles masked by an inverted circle. The masks, defined via SVG `mask` elements with white and black fills, reveal alternating stripe patterns. The result is a geometric interplay of lines and negative space, rendered dynamically to fill the browser window.

Loading thumbnail…

JS VANILLA SOL LEWITT

This visualization generates an abstract grid of thin vertical and horizontal rectangles rendered as SVG. It combines a Sol LeWitt-inspired geometric pattern with masking techniques, where a central circular mask reveals a crosshatched composition while another mask inverts the effect. The code uses D3.js selections and data joins to create 100 rectangles per axis, with masks defined via D3’s append method. Static SVG elements are positioned based on window dimensions, producing a minimalist, generative art piece.

Loading thumbnail…

JS VANILLA SOL LEWITT

This example creates a generative geometric composition inspired by Sol LeWitt using vanilla JavaScript and SVG. It renders 100 vertical and 100 horizontal rectangular strips, each 10 pixels wide or tall, across the full viewport. The strips are masked using two SVG `mask` elements: a circle mask for horizontal rectangles and a rectangle mask with a circular hole for vertical ones. The result is a grid of lines that appears only within a central circle, with the surrounding area showing the full-width vertical stripes. The code builds all elements dynamically via `document.createElementNS`.

Loading thumbnail…

SVG

This example shows eight black circles scattered across a white SVG canvas, each with a fixed position and radius. It demonstrates the use of raw SVG elements, including a background rectangle and multiple circle elements, rendered directly in an HTML page. The code relies on the SVG API for drawing shapes, with no JavaScript behavior or data binding. The circles are placed at varying coordinates, creating a simple static composition without interaction or animation.

Loading thumbnail…

SVG TESTING

This example tests SVG rendering by displaying letterforms and a large outlined rectangle on a fixed 980×1600 canvas. It uses raw SVG `path` elements with cubic Bezier curves (`C` commands) to draw each glyph, styled with black strokes and no fill. The page is a bare HTML document with inline CSS (hidden overflow) and no JavaScript interactivity, demonstrating static vector graphics output within a React starter project context. The focus is purely on visual fidelity of hand-coded paths at a set viewBox scale.