Skip to main content
SimilarExport ZIP
100%

Autofocus

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jan 17, 2012

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3 | keypress keyboard events

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.

Aantoniojl@gmail.com
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
65% 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
63% 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…

#javascript

This example demonstrates a JavaScript code editor that maintains focus and blur states for a text input area. The snippet configures event handlers for editor focus and focus loss, using a React component that passes `onEditorFocus` and `onEditorLoseFocus` callbacks through its props. It shows how the editor responds to user interaction by triggering these custom methods, which could update a visualization or UI state. The code relies on React’s event system and component props to manage the editor’s behavior, with no external libraries like d3 or Canvas involved.

GGugaGongadze
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.

深深度碎片
60% match
Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev
60% match
Loading thumbnail…

key bind

This example demonstrates a minimal React application that captures keyboard input. It renders an input field and logs a message to the console when the Enter key is pressed, using React’s `useState` and `onKeyPress` event handler. The code includes commented-out SVG elements and a `mousePosition` state, but only the input element is active. The app is built with React 16.9 and rendered via `ReactDOM.render` into the root div, with styling applied through an external stylesheet.

AAnimesh Nautiyal
60% match