Skip to main content
SimilarExport ZIP
100%

Test of JS Keyboard Events

✓ Published0🌍 Public
Pplueckeb@rptu.de
Last edited Feb 19, 2024
Created on Feb 19, 2024

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.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

  • There is no index.html - that's what triggers the V3 Runtime
  • The entry point is the main function exported from index.js
  • The main function takes an argument container, a DIV that has measurable dimensions using clientWidth and clientHeight
  • The second argument to main is an options object containing state and setState.
  • The state of the application is stored in state, which is initialized as an empty object {}.
  • The setState function can be called with a function that uses the previous state to create a new state object using immutable update patterns.
  • For an interactive example, see Mouse Follower.

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

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
75% match
Loading thumbnail…

Testing the capability of VizHub!

This example demonstrates VizHub’s ability to render a simple interactive web page with D3.js and ES6 modules. It displays a static “Hello World of VizHub!” message and a pre-formatted text block against a styled dark background. The code imports `select` from D3 v5 to set the message text, and uses a local `myMessage.js` module to supply the string. The page’s layout and typography are defined in an external CSS file with the Ubuntu font. No dynamic data or user interaction occurs.

KKatStam
72% match
Loading thumbnail…

Untitled

This example demonstrates how VizHub integrates modular JavaScript with D3.js to create an interactive data visualization. It shows a dynamic simulation driven by `d3.forceSimulation`, where nodes respond to forces and user interaction. The code separates concerns across files, using `index.js` for logic, `myMessage.js` for data, and `styles.css` for styling. It renders SVG elements via D3’s data join methods, with transitions animating position changes over time. The visualization updates live as the simulation runs, highlighting D3’s ability to bind data to the DOM and handle real-time state changes.

DDayalghosh
71% match
Loading thumbnail…

vs_test1

This example demonstrates a minimal SVG scene rendered inside the VizHub V3 runtime, using the `main` function exported from `index.js` to append content to a provided container DIV. It relies on the runtime’s hot-reloading environment, triggered by the absence of an `index.html`, and draws static SVG elements directly via the DOM API without external libraries. The visualization shows raw HTML-like SVG source code as a starting template, illustrating the fundamental setup for interactive widget development without any data or animation logic.

Yyesyesnono01@yahoo.com
70% match
Loading thumbnail…

s_test1

This example demonstrates the minimal setup required for a VizHub V3 visualization, acting as a blank canvas with no visible output. It highlights the runtime environment’s core structure: an `index.js` file must export a `main` function that receives a `container` DIV, and there is no `index.html` to trigger the V3 runtime. The code shows only raw HTML tags within the JavaScript file, without any rendering libraries or data operations. It serves as a starting template for understanding the expected module pattern and hot-reloading interactions in the VizHub environment.

Yyesyesnono01@yahoo.com
70% match
Loading thumbnail…

test

This example demonstrates a minimal "Hello World" setup for the VizHub V3 runtime, showing how a `main` function initializes a container with an interactive font-size widget and appends an SVG text element. The code uses D3.js to select the body and append an SVG, then adds a text node, while the container’s inline HTML relies on CSS styling. It highlights the runtime’s support for direct DOM manipulation and real-time property editing via Alt-drag. The SVG rendering approach is explicit, with D3’s `select` and `append` methods driving the visualization.

Ssdfux@yahoo.com
70% match
Loading thumbnail…

Testing the capability of VizHub!

This example demonstrates the foundational capabilities of VizHub by displaying a simple text message and a pre-formatted block on a dark, centered page. The visualization shows how a D3.js script can set the content of an HTML element using the `select('#message').text(message)` API call, pulling the string "Hello World of VizHub!" from a separate ES6 module. The page’s styling relies on the Ubuntu font and a custom CSS background, while the text is rendered through standard HTML. The code’s modular structure highlights how VizHub manages local imports and external D3 v5 dependencies.

AAdolfo Rosario R.
69% match
Loading thumbnail…

Testing VizHub Stats API

This example demonstrates a minimal React and D3.js v6 application that fetches event statistics from the VizHub Stats API using a POST request to `/api/event/get`, but does not yet render any visualization of the retrieved data. The code establishes the structural foundation with a `VizContainer` SVG component that applies the margin convention and displays gray and light gray rectangles to indicate the outer and inner plotting areas. The React app uses `useState` and `useEffect` hooks to asynchronously load the event IDs and log the response to the console, leaving the visualization itself unimplemented.

WWaseem Medhat
69% match