Skip to main content
SimilarExport ZIP
100%

Blank Slate

✓ Published0🌍 Public
Rrichard.adamson@hotmail.com
Last edited Feb 18, 2024
Created on Feb 18, 2024

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

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

Fork of Blank Slate

This example demonstrates the minimal setup for a VizHub V3 visualization, rendering a "Hello World!" message inside a container div with a large font size. The main function receives the container element and uses its dimensions to lay out the text, setting the HTML string directly via `container.innerHTML`. The code highlights the core V3 runtime API, including the exported `main` function and the immutable state management pattern with `state` and `setState`, serving as a blank slate for further interactive development.

Rrichard.adamson@hotmail.com
92% match
Loading thumbnail…

Fork of Blank Slate

This example demonstrates the minimal structure of a VizHub V3 visualization, rendering a centered “Hello World!” message in the browser. The code uses the exported `main` function, which receives a `container` DIV element and an options object with `state` and `setState`. It sets a fixed font size and inserts the text via `container.innerHTML` with inline styling. The example highlights the hot-reloading runtime environment, where the state starts as an empty object and updates follow immutable patterns.

Rrichard.adamson@hotmail.com
92% match
Loading thumbnail…

Fork of Blank Slate

This example demonstrates the minimal structure of a VizHub V3 visualization, rendering a centered “Hello World!” message in the browser. The code uses the exported `main` function, which receives a `container` DIV element and an options object with `state` and `setState`. It sets a fixed font size and inserts the text via `container.innerHTML` with inline styling. The example highlights the hot-reloading runtime environment, where the state starts as an empty object and updates follow immutable patterns.

Rrichard.adamson@hotmail.com
92% match
Loading thumbnail…

Fork of Blank Slate

This example demonstrates a minimal “Hello World” visualization built for the VizHub V3 Runtime Environment, rendering large text centered in a container using vanilla JavaScript and inline HTML styling. The code shows the required `main` export that receives a `container` DIV, whose `clientWidth` and `clientHeight` define the drawing area, and it uses immutable state management via `setState` for future interactivity. It serves as a blank template for creating more complex dashboards or interactive graphics.

CCurran Kelleher
90% match
Loading thumbnail…

Fork of Blank Slate

This example demonstrates a minimal “Hello World” visualization built for the VizHub V3 Runtime Environment, rendering large text centered in a container using vanilla JavaScript and inline HTML styling. The code shows the required `main` export that receives a `container` DIV, whose `clientWidth` and `clientHeight` define the drawing area, and it uses immutable state management via `setState` for future interactivity. It serves as a blank template for creating more complex dashboards or interactive graphics.

CCurran Kelleher
90% match
Loading thumbnail…

Fork of Blank Slate

This example demonstrates the minimal setup required to run a visualization in the VizHub V3 Runtime Environment. It renders a centered "Hello World!" message using a fixed font size of 222 pixels, applied via a template literal that sets the container’s inner HTML. The code exports a `main` function that receives a `container` DIV element with measurable dimensions, and it relies on the runtime’s hot-reloading capabilities. The example does not use external libraries, instead showcasing the basic pattern of DOM manipulation with inline styles. The rendering approach is purely HTML and CSS, with no data source or interactive features beyond the static text.

Ddawarshahmuhammadpahore@gmail.com
89% match