Skip to main content
SimilarExport ZIP
100%

d3 | keypress keyboard events

✓ Published1🌍 Public
Aantoniojl@gmail.com
Last edited May 6, 2022
Created on May 6, 2022
Forked from Hello HTML

This example demonstrates Japanese number characters (zero through nine) and their readings, which update interactively when a user presses a number key or clicks a button. Built with D3.js v3, it binds keyboard events using the Mousetrap library and handles button clicks through D3 selections and the Lodash `times` helper. The `update` function uses D3’s `select` and `html`/`text` methods to change the displayed character and reading, while adjusting button opacity to highlight the active selection.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 | nodes | experimental

This experimental visualization combines a force-directed graph with Japanese number interaction. The page displays Japanese numerals (0–9) with their English readings, updated via keyboard input or button clicks using Mousetrap bindings and D3 selections. A network diagram, rendered through `d3.forceSimulation` with nodes and links, accompanies the numeric display. The JSON dataset maps each numeral to its Japanese character and reading, while D3’s `scaleOrdinal` assigns colors to node groups. The force layout, drag behavior, and tick updates drive the animated node and link positioning.

Aantoniojl@gmail.com
73% match
Loading thumbnail…

Autofocus

This example demonstrates how keyboard input can trigger a data visualization update on a web page. It uses a simple input field and listens for keydown events on the document window to display the numeric key code of the pressed key. The code relies on D3 version 3’s `d3.select` and `d3.event` APIs to manage element selection and event handling, and it updates the input element’s value property with the key code. The interaction is minimal, focusing on immediate visual feedback without additional data processing or rendering.

Mmbostock
68% match
Loading thumbnail…

JS Keyboard Interaction Test

This example demonstrates a bare-bones JavaScript keyboard interaction test, where the page’s body listens for `keydown` events and logs each pressed key’s value to the browser console. The rendering is minimal, using a CSS class for large centered text but no visual output beyond the console log. The code relies on the native DOM `EventListener` API on `document.body` and the `console.log` method, with no external libraries or frameworks. The interaction is limited to keyboard input, with no data source or chart rendering involved.

Pplueckeb@rptu.de
63% match
Loading thumbnail…

Test of JS Keyboard Events

This example demonstrates how JavaScript keyboard events can drive interactive visualizations in the VizHub V3 runtime environment. It listens for key presses and uses the container element’s client dimensions to render responsive updates, leveraging the V3’s hot-reloading and state management API. The code employs the `main` function pattern with `state` and `setState` to handle immutable state transitions, providing a template for integrating user input into data-driven graphics. No external libraries are used, relying instead on native DOM event handling and the environment’s built-in rendering loop.

Pplueckeb@rptu.de
62% match
Loading thumbnail…

d3 zoom and pan from the keyboard

This example demonstrates keyboard-driven zooming and panning of a map rendered with D3.js, replacing typical mouse or touch interactions. A user presses arrow keys to shift the viewport, plus or minus keys to zoom in and out by a factor of two, and Escape to reset the transformation. The behavior is implemented through D3’s zoom behavior, which tracks translation and scale, and applies these values to the SVG’s transform via a transition. The code also handles legacy key codes for Safari and logs unrecognized keys to a debug console.

PPhilippe Rivière
62% match
Loading thumbnail…

D3 Practice

Two parallel D3.js panels demonstrate the effect of a key function during data joins. As a button inserts letters one at a time from the alphabet, both panels update their displayed sequence, but only the lower panel uses a key function in its `.data()` call, allowing D3 to track each letter’s identity across transitions. The upper panel, lacking the key, reuses DOM elements by index, causing letters to shift incorrectly. The example uses `d3.select`, `.join()`, and `.transition()` to animate the horizontal positions of styled `div` elements.

SSubhendu Karmakar
62% match
Loading thumbnail…

Scoring Test

This example shows a simple interactive counter where a button click increments a numeric display. It demonstrates how to build a reactive UI using D3's selection and data join methods, with the `setState` function managing state updates. The code uses D3 v7, specifically `select`, `selectAll`, `join`, and `.on` event listeners, while styling the button and counter with flexbox in CSS. The counter text updates dynamically to reflect the current count, and the example highlights D3's role in handling both DOM manipulation and state-driven rendering.

CCurran Kelleher
61% match
Loading thumbnail…

9. key-function-update-pattern

This example demonstrates the D3 key-function update pattern for binding data to existing SVG elements. It shows the alphabet rendered as text elements, with each update randomly shuffling and slicing the dataset, highlighting entering elements in green and updating elements in dark gray. The code uses `selection.data(data, keyFunction)` to join data by value rather than index, then applies `merge()` and `remove()` to manage the enter, update, and exit selections. The visualization runs on a one-second interval, using `d3.shuffle` to generate new sequences.

深深度碎片
61% match