Self-Modifying Code

100%

Self-Modifying Code

✓ Published4🌍 Public

Last edited Sep 26, 2025

Created on Jul 20, 2024

This interactive visualization displays seven colorful circles of varying sizes and positions on a light green canvas. Clicking a circle selects it, highlighting it with a black stroke and full opacity, while clicking again deselects it. The selection state is persisted to a CSV file via VizHub’s `writeFile` API, and the visualization reads that state from `selectedIndex.csv` on each render. The code uses D3’s `select` and `csvFormat` functions to manage SVG rendering and data serialization, with the click handler writing the updated selection back to the file.

AI-generated description

An example of self-modifying code using VizHub's writeFile API.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Self-Modifying Code

This example demonstrates self-modifying code: clicking any of seven colored circles writes that circle’s ID to a CSV file, which the visualization then reads to highlight the selected circle with a black stroke and full opacity. The code uses D3’s `select`, `csvFormat`, and `join` to bind circle elements to static data, while VizHub’s `writeFile` API updates the `selectedIndex.csv` file, creating a feedback loop between the visualization and its own source data. Circles are rendered as SVG elements with fixed positions, radii, and fills, and clicking the currently selected circle clears the selection by writing a null ID.

Rrudi.oreillymeehan@gmail.com

90% match

Loading thumbnail…

Círculos con interacción

Seven colorful circles rest on a soft green background, with one highlighted by a black outline and full opacity. Clicking any circle selects it and persists that choice by rewriting the `selectedIndex.csv` file through VizHub’s `writeFile` API. The code uses D3 selections (`select`, `join`) to render and update the SVG circles, while reading the initial selection from the CSV via an imported module. This demonstrates self-modifying code where user interaction changes the stored state.

Ffcordon@pin.upv.es

88% match

Loading thumbnail…

Fork of Clickable Circles

Seven semitransparent circles sit at fixed positions on a light-green SVG canvas. Clicking any circle selects it, giving it a thick black stroke and bringing it to the front. The visualization is built with D3 v7 using a unidirectional data flow pattern where the viz function re-renders on each state change. The code uses d3.select and join to manage circle elements, while event listeners call a setter to update the selected datum.

Jjedrt.samo@gmail.com

81% match

Loading thumbnail…

Clickable Circles

This example demonstrates interactive selection of circles rendered with D3.js. Each circle displays its own position and radius, and clicking one highlights it with a black stroke and raises it above the others. The visualization uses a unidirectional data flow pattern where state changes trigger re-rendering through the `viz` function. D3’s `selectAll` and `join` methods manage circle creation and updates, while click event listeners call `setSelectedDatum` to update the selected circle’s styling.

CCurran Kelleher

80% match

Loading thumbnail…

Clickable Circles from CSV

This example displays a set of colored circles loaded from a CSV file, each positioned and sized by its own coordinates and radius. Hovering over a circle highlights it with a black stroke, using a React state to track the selected circle's ID. The visualization is rendered with D3 v7's `select` and `csv` APIs, alongside React's `useEffect` and `useState` hooks, with circle attributes and mouse events applied via `selection.join`.

223100098@lums.edu.pk

80% match

Loading thumbnail…

Circles with D3 Cleaned Up

Fourteen colored circles, each with a unique position, radius, and color, are rendered on a 960×500 SVG canvas. The visualization demonstrates a clean, data-driven approach to drawing circles using D3 v7. The code binds an array of circle data to SVG circle elements using `selectAll`, `data`, and `join`, setting the `cx`, `cy`, `r`, and `fill` attributes directly from each data object. The data is defined in a separate module and the visualization logic is contained in a reusable `viz` function, making the example modular and easy to extend.

CCurran Kelleher

79% match

Loading thumbnail…

Fork of Clickable Circles

Seven semi-transparent circles, each with a distinct neon color, are arranged across a fixed, full-screen light-green background. Clicking a circle selects it, permanently highlighting the chosen circle with a thick black stroke and bringing it to the front. The visualization uses a unidirectional data flow via `setState`, with `setupSVG` and `renderCircles` managing D3 v7 join operations and click event handlers.

BBHUMIKA CHUNDU

78% match

Loading thumbnail…

Fork of Clickable Circles

This example displays seven translucent circles with distinct colors and radii, positioned across a fixed full-screen SVG. Clicking a circle highlights it with a black stroke and brings it to the foreground. The visualization uses D3 v7’s `selectAll` and `join` for rendering, with a unidirectional data flow pattern managing the selected state. Coordinates, sizes, and colors come from a static data array.

RRashad Tyler

78% match