Skip to main content
SimilarExport ZIP
100%

Fork of Idempotent Rendering Pattern (Part 2)

✓ Published0🌍 Public
SSubhendu Karmakar
Last edited Feb 5, 2024
Created on Feb 5, 2024

This example demonstrates a self-referential rendering pattern where a visualization draws itself. It combines the JavaScript `FileReader` API with the P5.js `loadPixels()` method to process image data, which is then re-rendered through a feedback loop using the `Hype` library’s `HPath` and `HDrawable` objects. The sketch iterates over pixel color values to drive the placement and styling of new vector shapes, producing an idempotent, generative output that evolves from its own previous state.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Idempotent Rendering Pattern (Part 2)

This example visualizes penguin bill dimensions using a scatter plot, with bill length on the x-axis and bill depth on the y-axis. The chart uses D3.js v7 APIs such as `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to render axes and circles for each data point from the `@curran/penguins` dataset. The visualization follows an idempotent rendering pattern, where the `viz` function calls `scatterPlot`, which in turn leverages the `axes` utility to manage chart structure and labels.

SSubhendu Karmakar
73% match
Loading thumbnail…

Idempotent Rendering Pattern

This example demonstrates the idempotent rendering pattern for D3 visualizations, showing a scatter plot of penguin bill length versus bill depth using a clean, green background. The chart renders circles for each data point and includes labeled axes via a reusable `axes` module. The code applies the join pattern with `selection.selectAll(...).data([null]).join(...)` for both SVG elements and axes, ensuring that updates are deterministic and render correctly on each call. It uses `scaleLinear` and `extent` to compute scales, with margins and dimensions passed through a shared state object.

SSubhendu Karmakar
69% match
Loading thumbnail…

Fork of Fork test 2

This visualization displays a set of geometric shapes, including paths and rectangles, arranged in a static composition. The SVG elements use a defined color palette and some rectangles have hover effects, while a JavaScript script dynamically generates and appends an additional 100 horizontal rectangles, which overlay the existing shapes to create a striped pattern. The page is built with raw HTML, CSS, and JavaScript, using the React framework for the project structure, and renders entirely as SVG.

Zzaioris
67% match
Loading thumbnail…

Fork of P5.js Starter

This example demonstrates a p5.js sketch rendered in the VizHub environment with hot reloading, showing three concentric target patterns of varying gray shades on a canvas. The code imports the p5 library and manually instantiates it to bypass the default global functions, binding methods like `createCanvas`, `background`, `fill`, and `ellipse` to the p5 instance. It defines `setup` and `draw` functions within the sketch, attaching them to the instance, and uses the canvas `parent` method to attach the canvas to the container element, enabling seamless updates during development.

AAndrew Blakeslee Moore
65% match
Loading thumbnail…

Fork of Fork of P5.js Starter

This example demonstrates how to run a P5.js sketch inside VizHub with hot reloading, rendering three concentric-circle targets in grayscale. The code imports the `p5` library, binds instance methods like `createCanvas`, `background`, and `ellipse` to local variables, and attaches custom `setup` and `draw` functions to the P5 instance. It manages the sketch lifecycle by storing the instance on the container element and removing it on reload, allowing interactive editing of numeric parameters with instant visual updates.

NNick Hogle
65% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays a radial burst visualization of CSS named colors, using each color’s RGB hex value to fill a pie slice of equal size. The visualization loads data from a remote CSV file via D3’s `csv` utility, then uses React with hooks like `useState` and `useEffect` to manage the asynchronous data loading. The rendering is done in SVG, with D3’s `pie` and `arc` functions computing the slice geometry, while React maps each data point to a `<path>` element.

Ssimontoblad
65% match
Loading thumbnail…

Fork of Rendering Data with React & D3

This interactive example visualizes a dataset of CSS named colors as a radial burst, where each color is represented by a pie slice arranged around a central point. Using React to manage the rendering pipeline, the code fetches color data from a remote CSV file and passes it through D3’s `pie` and `arc` functions to generate SVG paths. Each slice is filled with its corresponding RGB hex value, producing a colorful, circular mosaic. The visualization demonstrates the integration of D3’s data handling and geometry with React’s component-based UI for dynamic SVG output.

RRandyElkins
65% match
Loading thumbnail…

Fork of P5.js Starter

This example shows an interactive P5.js sketch displaying concentric circles in grayscale, adapted from P5’s “Functions” example. It demonstrates how to integrate P5.js with VizHub’s hot reloading by importing the library and manually managing the p5 instance on the container element. The sketch extracts P5 APIs like `createCanvas`, `background`, `fill`, and `ellipse` from the instance and binds them, attaches custom `setup` and `draw` functions, and sets the canvas parent to the container. This pattern enables live editing of parameters with immediate visual feedback.

NNick Hogle
65% match