Skip to main content
SimilarExport ZIP
100%

Círculos Interaction state

✓ Published0🌍 Public
Ffcordon@pin.upv.es
Last edited Feb 9, 2025
Created on Feb 9, 2025
Forked from Clickable Circles

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.

AI-generated description

Click on a circle to see it highlight!

For examples of this in various frameworks, see d3-rosetta

MIT Licensed

Similar vizzes

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
83% 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
83% 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
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
81% 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…

My Circles with D3

This example displays seven circles of varying sizes and neon colors, each with a fixed position and radius, rendered on a light background. The final state is a static composition, though the code suggests a D3 join operation to create the SVG elements. It uses the `select` API and the `join` method from D3 v7.8.5 to bind data arrays to circle elements, setting `cx`, `cy`, `r`, and `fill` attributes directly. The circle data is hardcoded, and no animation or interaction is present.

Iissam.benabid@gmail.com
80% match
Loading thumbnail…

Pseudo Scatter Plot with Clickable Circles

A set of six fixed circles, rendered as an SVG scatter plot, highlights the selected point by changing its fill to white with a thick black stroke via D3's attribute and filter methods. Clicking any circle triggers a state update through a unidirectional data flow, setting a `selectedId` that re-renders all circles. The code uses D3 v7 selections and joins (`selectAll`, `data`, `join`) within an SVG set up by `setupSVG`, with click interaction bound directly to each circle.

CCurran Kelleher
80% 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
79% match