Skip to main content
SimilarExport ZIP
100%

Círculos con interacción

✓ Published0🌍 Public
Ffcordon@pin.upv.es
Last edited Feb 10, 2025
Created on Feb 9, 2025

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Self-Modifying Code

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.

CCurran Kelleher
88% match
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
84% match
Loading thumbnail…

Círculos Interaction state

Seven pastel circles on a light green background respond to clicks. Clicking a circle raises it to the top and adds a thick black outline, while clicking the background removes the highlight. The example uses d3-selection’s `join` for data binding and `on` event listeners to update a `selectedId` in the shared state. The data is a static array of circle positions and radii, rendered as SVG elements.

Ffcordon@pin.upv.es
83% 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
80% 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
79% 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
79% match
Loading thumbnail…

Fork of Clickable Circles

Seven colored circles sit on a pale green background. Clicking a circle highlights it with a thick black outline and brings it to the front. The example uses d3 v7 for selection and event handling, with a custom unidirectional data-flow pattern managing the selected state. Circle positions and sizes come from static data in a JavaScript module.

Ggedamrajani336@gmail.com
78% 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
78% match