Let's make a face!

100%

Let's make a face!

✓ Published0🌍 Public

Last edited Feb 21, 2024

Created on Feb 21, 2024

Forked from Blank Slate with Hot Reloading

This example demonstrates the minimal setup for a VizHub V3 Runtime Environment visualization, serving as a “Hello World” starting point. The code exports a `main` function that accepts a container element and injects an HTML string with a large, centered text div. It uses no external libraries, only plain JavaScript and the container’s `clientWidth` and `clientHeight` for sizing. The state is managed via an empty object and `setState`, supporting future interactivity through immutable updates, as hinted by the linked Mouse Follower example.

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…

Blank Slate

This example demonstrates the minimal setup required to run a visualization in the VizHub V3 Runtime Environment. It renders a simple "Hello World!" message with inline HTML and CSS, set to a large font size. The code exports a `main` function that receives a `container` DIV element, then directly assigns to its `innerHTML`. It uses no external libraries, and the state management options (`state` and `setState`) are present but unused. The example serves as a blank starting point for exploring the runtime’s hot reloading capabilities.

Rrichard.adamson@hotmail.com

86% match

Loading thumbnail…

Blank Slate

Rrichard.adamson@hotmail.com

86% match

Loading thumbnail…

5

This example demonstrates the VizHub V3 runtime environment’s core workflow by rendering a single, large “Hello World!” message centered on the page. It shows how a simple `main` function receives a container element and writes directly to its `innerHTML`, using an inline style with a fixed font size. The code highlights the minimal setup required: no `index.html` file is needed, as the runtime injects the container and calls the exported `main` function. The example serves as a blank-slate starting point, illustrating how state management works through the optional `state` and `setState` parameters, though this instance does not use them.

RRakesh Kumar Chekuri

86% match

Loading thumbnail…

Blank Slate

This example demonstrates the minimal setup required for a VizHub V3 visualization, rendering “Hello World!” in large text centered within a container. It uses the exported `main` function, which receives a `container` DIV and an options object, to set the container’s inner HTML with inline styles. The code does not rely on external libraries or APIs; instead, it shows the basic structure for continuous hot reloading, where state is initially empty and can be updated via `setState`. The rendering approach is direct DOM manipulation via `container.innerHTML`.

Rrichard.adamson@hotmail.com

85% match

Loading thumbnail…

Basic

A minimal "Hello World" visualization demos the VizHub V3 Runtime Environment. The example displays a large, centered text string whose font size is defined by a variable, supporting continuous hot reloading via the runtime. It demonstrates the basic structure required for V3, where the `main` function exported from `index.js` receives a DIV container and sets its inner HTML to render the output. This setup acts as a blank slate for building more complex interactive graphics, with no external libraries or data sources involved.

YYogen Ghodke

84% match

Loading thumbnail…

vs2

This example demonstrates the simplest possible VizHub V3 Runtime Environment setup, rendering a static "Hello World!" message directly into a container DIV using vanilla JavaScript. The main function exports from `index.js` and sets the container's inner HTML with inline styling, including a large 212-pixel font size. No external libraries are used, and the code relies entirely on the V3 Runtime's hot-reloading capability triggered by the absence of an `index.html` file. The example serves as a foundational starting point for interactive data visualization development.

Yyesyesnono01@yahoo.com

84% match

Loading thumbnail…

p001-hello-world

This example demonstrates the minimal setup for a VizHub V3 Runtime visualization, rendering a static "Hello World!" message inside a bordered container. It shows how the exported `main` function receives a DIV element and injects HTML content directly using template literals, with a hard-coded font size of 212 pixels. The code imports `style.css` for basic border styling and relies on the V3 environment’s hot reloading, triggered by the absence of an `index.html` file. No external libraries or data sources are used.

SShad Frigui

83% match

Loading thumbnail…

SVG-Fundamentals

This example demonstrates the minimal setup for a VizHub V3 visualization, rendering a simple "Hello World!" text message. It shows how the runtime environment enables continuous hot reloading without an `index.html` file. The code exports a `main` function that receives a `container` DIV element and directly sets its `innerHTML` with inline styles, including a large, adjustable `fontSize` value. It relies entirely on the native DOM API and the VizHub V3 runtime, with no external libraries or data sources involved.

CChetan Tewari

83% match