Skip to main content
SimilarExport ZIP
100%

on click

✓ Published0🌍 Public
RRobinL
Last edited Apr 24, 2013
Created on Apr 24, 2013

This example demonstrates how to attach interactive click events to data-bound circles in a D3.js visualization. Two data points, each containing a row ID and x/y coordinates, are rendered as black circles on an SVG canvas. When a user clicks a circle, the browser displays an alert with the corresponding row ID from the underlying CSV-style dataset. The code uses D3 selections like `svg.selectAll("circle").data(csv).enter()` to bind data and `d3.selectAll("circle").on("click", ...)` to handle user interaction.

AI-generated description

Similar vizzes

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
76% 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
76% match
Loading thumbnail…

Clickable Circles from CSV

This example displays a scatterplot of colored circles loaded from a CSV file, where clicking a circle highlights it with a black outline. Built with React and D3 v7, it uses the `csv` function to parse data and the `select` API with a `join` operation to bind circle elements to each data row. The `selectedId` state triggers a re-render, applying the stroke style via a conditional attribute.

CCurran Kelleher
76% match
Loading thumbnail…

click event pattern

This example demonstrates a click event pattern for interactive data visualization. A set of colored circles representing fruits (apples, lemons, peaches) can be clicked to select them, triggering a visual highlight with a black stroke. The scene is animated using D3 transitions, with circles entering, exiting, and resizing over time. The code uses D3 v5 modules such as `scaleOrdinal` for color and radius mapping, `select`, `range`, and `transition().duration()` to orchestrate the SVG rendering and smooth animations.

YYanxxx447
74% match
Loading thumbnail…

onclick change color

This example presents the classic Iris dataset as a scatter plot of sepal length against sepal width, with each flower represented by a large circle. It shows how a user can interact with the visualization by clicking on a data point, which immediately changes that circle’s fill color to red. The implementation uses D3 v6’s `select`, `csv`, `scaleLinear`, and `extent` functions to load the data, project it into SVG coordinates, and render the circles within an SVG container. The click interaction is encoded directly via an `onclick` attribute on each circle, setting its style to a red fill.

NNita
72% match
Loading thumbnail…

Clickable Circles with D3 and React

Clickable circles rendered in an SVG canvas demonstrate a React and D3 integration. The visualization shows 14 circles with varied positions, sizes, and colors from a static array. Clicking a circle selects it, highlighting its outline with a black stroke. The App component manages selection state and re-renders the D3 visualization via `select()` and `.join()` for efficient DOM updates. The `viz` function uses D3’s SVG selection API to set attributes and attach click handlers, while React’s `useState` and `useEffect` control the interactive response.

CCurran Kelleher
72% 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
71% match
Loading thumbnail…

Changing data

Two datasets of varying circle sizes and counts are displayed along a horizontal axis. A button click uses `d3.select` and event listeners to toggle between datasets, demonstrating D3’s data join pattern with `data()`, `enter()`, and `exit()`. New circles appear via `append` with an initial radius of zero, while all circles transition with `transition().duration(500)` to update their `cx` and `r` attributes, and the dataset label changes via `select("text").text()`. The SVG elements are rendered as orange, semi-transparent circles.

WWarren-Fitzhenry
71% match