InteractionBasic

100%

InteractionBasic

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

This example shows a single SVG rectangle that changes color each time it is clicked. It demonstrates how to attach a basic interaction handler using D3’s `selection.on` method. The code loads D3 v6 from a CDN and renders the rectangle as inline SVG with a fixed size and position. Upon click, the rectangle’s fill is set to a random value from `d3.interpolateRainbow`, cycling through the color spectrum.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Interactions 1

Four colored squares render in an SVG, initially gray. Hovering over a square fills it with its assigned color using D3's `mouseenter` and `mouseout` events, which call `d3.select(this).style` to change the fill. After three seconds, a `setTimeout` triggers the `dispatch` method to simulate a mouseout, and then removes both event listeners, leaving the squares interactive only briefly. The code binds an array of hex colors to `rect` elements using `d3.selectAll` and `data`.

Jjbruzzo

79% match

Loading thumbnail…

interaction_3

A circle follows the mouse cursor across an SVG canvas, changing its fill color randomly with every mouse movement. The React component tracks the mouse position using the `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` attributes on each `onMouseMove` event. A `getRandomColor` function selects from a fixed array of six colors, and the ReactDOM render method updates the circle's fill property. The visualization demonstrates a simple interactive data-less example built with React 16.9.0, rendering directly to SVG.

HHuldahMerlinKolli

75% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes and dynamic styling interactions. A light blue rectangle serves as a canvas containing a circle, ellipse, text label, and line. Using D3 v6 selection methods, hovering over the circle turns it yellow, clicking the circle turns it red, and clicking the line thickens it. Clicking anywhere on the SVG updates the text element to display the cursor’s coordinates via `d3.pointer`. The page also mixes plain HTML headings and paragraphs with CSS rules for color and font styling.

JJoyce Robbins

74% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates how to animate SVG elements with D3 v4, showing a static red circle and blue rectangle alongside small rectangles that jump to random positions and colors when a button is clicked. It illustrates data joins by binding an array of color objects to newly appended rectangles, then transitions them with `d3.transition()`. A `setInterval` loop continuously updates the rectangles' positions and fills using random values from the data array, while the initial static shapes remain unchanged. The code uses `selection.enter()`, `merge()`, and chained `.attr()` and `.style()` methods for smooth animations.

AAndrewMcKernan

74% match

Loading thumbnail…

D3 Course 6: Interaction with Unidirectional Data Flow

This example demonstrates interactive selection and highlighting of fruit marks in an SVG bowl using unidirectional data flow. Clicking or hovering a circle triggers callbacks that update the selected or hovered fruit ID, which then re-renders the bowl with the appropriate stroke color—black for clicked, orange for hovered. The code uses d3.scaleOrdinal for color and radius mapping, d3.select for data joins with enter/merge/exit, and d3 transitions to animate circle radius changes over one second. The fruit data is generated with d3.range and random IDs, with timed updates removing or replacing fruits.

GGabrz

73% match

Loading thumbnail…

Framework

This example demonstrates how to build a simple interactive framework using D3.js by modifying SVG elements in response to user input. It displays a blue rectangle centered within an SVG canvas, and clicking on the rectangle changes its fill color to green. The code uses D3 selections and the `select` and `arc` imports from the d3 module, with the `on("click", ...)` method to attach the event handler. The visualization relies on D3 v5 and renders directly to SVG with dimensions of 960 by 500 pixels.

Ttsmithv11

73% match

Loading thumbnail…

Manipulating SVG elements

This example demonstrates how to manipulate SVG elements interactively using D3.js within a React framework. A single yellow rectangle changes color, size, and stroke properties when users click buttons labeled "Change Color!", "Grow big!", and "Go back!". The code uses d3.select to target the rectangle by ID and modifies attributes such as fill, width, height, and stroke-width. The heading text also turns red through d3.style. The example uses d3.v5 and renders SVG directly in the browser, with styles defined in an external CSS file.

SSreenivasulu

73% match

Loading thumbnail…

The first commented line is your dabblet’s title

A full-width SVG rectangle is dynamically recolored based on its initial CSS background. The example demonstrates a minimal D3.js interaction: a single `d3.select` call targets the `rect` element and applies a solid red fill, overriding the page’s gradient styling. The HTML contains the SVG markup, while the CSS sets a pink-to-yellow linear gradient as the page background. The script loads D3 from a remote URL and uses the `style` method to mutate the SVG shape’s presentation, showing how D3 can directly manipulate existing DOM nodes.

Mmbostock

73% match