Gist c4276ed96ff4bd575933c7ad390a7a92

100%

Gist c4276ed96ff4bd575933c7ad390a7a92

✓ Published0🌍 Public

Last edited May 27, 2016

Created on May 27, 2016

This example demonstrates a custom event-dispatch loop using the D3 dispatch module. It creates a `dispatch` object with a `foo` event, registers a handler, and then triggers that event 3,000 times via `dispatch.call`. The handler checks whether the passed argument is `undefined` and prints a message if so. The page displays the total number of times the handler was called. The code relies on `d3_dispatch.dispatch` and the `on`/`call` methods to manage custom event flow, with no external data source.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Dispatching Events Example

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.

Ssriramvsharma

69% match

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

65% match

Loading thumbnail…

Gist 4d1e447f82a7d2b425c4d1a3f5489e7a

A minimal example defines a custom `d3.foo()` method on the D3 namespace and calls it inside a page’s `console.log`, with the page loading the external script `d3-foo.js` that presumably defines this function. The rendered output is the return value of that method, shown only in the browser’s console. The code uses the standard D3 library, imported via a `<script>` tag, and demonstrates a simple extension pattern for library APIs. No data source, canvas, or SVG rendering is present; the example focuses solely on API invocation and console output.

KKristinHenry

63% match

Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM

62% match

Loading thumbnail…

Gist 7800813

This example demonstrates how to trigger a custom event partway through a D3.js transition. It shows a single SVG rectangle falling vertically from above the viewport to a fixed position, while a message is appended to the page halfway through the animation. The code uses `transition.attrTween` with `d3.interpolate` to animate the rectangle’s `y` attribute over three seconds, and a callback checks the normalized time parameter `t` to fire the halfway event once. The visualization uses a simple ordinal scale for positioning and is rendered as SVG with D3 v3.

11wheel

62% match

Loading thumbnail…

EventsSpeedTests

This example demonstrates how a single property added to one function—but not all functions—can trigger V8’s “failed to optimize dispatch” warning in a hot loop. It shows the impact of monomorphic versus polymorphic call-sites for `Function.prototype.apply` when dispatching to multiple callbacks. The code runs 2 million iterations of a `dispatch` function that invokes two callbacks, comparing an unoptimized case, a bound-function variant, and a fixed version using `.bind(0)` to enforce a monomorphic apply site. The included HTML interface and Node command-line tests let users measure execution time differences across the three approaches.

HHypercubed

61% match

Loading thumbnail…

Gist e6f198ff61f5d2d9ec3a540a0ac3b9ca

This example demonstrates a minimal D3.js v5 application that uses the `d3.select` method to target an HTML element with the ID `hello` and replace its text content with "Hello World!!". The code imports D3 as a module from a bundled file path (`/-/d3@5.9.2.bundle.js`), which is configured via an Airdrop setup for dependency management. The rendering approach is simple DOM manipulation, not a data-driven visualization, as no scales, shapes, or data bindings are present. The example serves as a basic integration test for loading D3 in a module-based project.

HHypercubed

60% match

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

59% match