Fork of Dispatching Events Example

100%

Fork of Dispatching Events Example

✓ Published0🌍 Public

Last edited Oct 20, 2021

Created on Oct 20, 2021

This example demonstrates a custom D3 chart component that emits events to communicate changes. The Circle component renders an SVG circle that, when clicked, dispatches an `input` event with a new random radius value. The main script listens for this event and calls the circle’s update method, which uses a transition to animate the radius to the new size. The code uses D3’s `create` and `select` functions, along with the `dispatch` and `property` methods, to implement a reusable event-driven pattern. The circle’s cursor is set to a pointer to indicate interactivity.

AI-generated description

Click the circle to make it change size.

Trying to understand the pattern found in Observable: D3 Charts in terms of how one might adapt it so that chart instances can emit events.

Reference examples:

MIT Licensed

Similar vizzes

Loading thumbnail…

Dispatching Events Example

A circle rendered as an SVG element changes its radius in response to clicks, demonstrating how chart instances can emit and handle custom events. Clicking the circle triggers a click handler in the Circle component, which dispatches an `input` event with a random value and a `detail` property. The main script listens for this event using D3’s `select().on()`, reads the radius from `event.target.value`, and calls the `update()` method to animate the radius via a D3 transition. The example uses `d3.create`, `d3.select`, and `transition.attr`, based on the Observable chart pattern.

CCurran Kelleher

90% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and update a scatter plot of circles using D3.js, showing a data-driven approach where each circle’s position, size, and color are bound to an array of objects. It illustrates the D3 General Update pattern with method chaining, using `select`, `selectAll`, `data`, and `join` to efficiently manage SVG elements. The visualization adapts to its container’s dimensions by setting the SVG’s width and height via `attr` based on `clientWidth` and `clientHeight`. The code uses the D3 library (version 7.8.5) to render circles with defined opacity, offering a clear example of declarative data binding for dynamic web graphics.

RRohithNaiduDevareddy@my.unt.edu

74% match

Loading thumbnail…

Fork of base

This example demonstrates a simple interactive SVG scene with three colored circles and a clickable rectangle. The visualization uses D3 v5 to append circles to a central group, with the red circle responding to mouseover and mouseout events. Clicking the rectangle triggers a transition chain that moves the red circle through two sequential 2-second animations using `transition.attr`. The code imports D3 functions directly via ES6 modules, and also imports a custom message from a local module, which is rendered in the page. The scene is rendered as static SVG elements with no external data source.

BBomkerss

74% match

Loading thumbnail…

Refactor of Fork of D3 Selection Explorations

This example uses D3 to render an animated SVG scatterplot of circles. The code generates synthetic data, calculating each circle’s x, y, and radius from a sine wave function based on an index and time variable. At 60 frames per second, a `setInterval` updates this time value, and the `d3.select` and `d3.range` APIs update existing circle attributes via the `.join` method, creating a smooth, pulsing wave pattern. All rendering is handled as SVG within the full browser viewport.

EEdgar Cortez

73% match

Loading thumbnail…

Fork of D3 functions

This example demonstrates a fork of D3 functions, showing how the enter, update, and exit selections manage SVG circle elements as data changes. Two buttons trigger transformations: "Remove" pops the last item from an array, while "Modify" uses a random splice to replace a data point. The code uses d3.select, scaleLinear, and the data join pattern with merge and exit methods, rendering steelblue circles that turn red when removed. The visualization is built with d3.v5 and SVG, with data defined as x/y coordinate pairs.

JJShellBach

73% match

Loading thumbnail…

Fork of D3 functions

This example shows how D3’s data join handles dynamic updates to a scatterplot of five circles. Buttons trigger removal or modification of data points, with exiting circles turning red while new and updated circles render in steel blue. The code uses D3 v5’s `select`, `scaleLinear`, and `merge` to bind array data to SVG circles. Updates call the `update` function, which handles enter, update, and exit selections, while random coordinates come from a custom `rand` helper.

BBomkerss

73% match

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates dynamic data binding with D3 selections by rendering a set of circles that continuously change position, radius, and count over time. It uses the D3 v7 `select` and `range` functions along with the `join` method to manage enter, update, and exit states. The animation runs on a `setInterval` timer, updating a sine-wave-based dataset that controls each circle’s x-coordinate, y-coordinate, and radius. The visualization renders as an SVG canvas that fills the browser viewport, showing how D3’s data-join pattern efficiently handles fluctuating data sizes.

Rroyable88

73% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates how to create and update SVG circles with D3.js, using a data-driven approach where each circle’s position, radius, and fill color are bound to an array of objects. The code employs D3’s `select`, `selectAll`, `data`, and `join` methods to manage DOM elements, while method chaining sets circle attributes like `cx`, `cy`, `r`, and `fill`. It also shows how to set the SVG container’s dimensions from the parent element’s client size. The visualization serves as a tutorial illustration of D3’s general update pattern, with data defined inline rather than loaded externally.

RRohithNaiduDevareddy@my.unt.edu

73% match