Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Blank Slate with Hot Reloading

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

54ae1c51dfca43a0b2b65e1d4d0a62b0

Open

Fork of Blank Slate with Hot Reloading

0 stars0🌍 Public
AAustin Tanksley
Last edited Mar 15, 2024
Created on Mar 15, 2024

This example displays a large, static “Hello World!” message centered on a blank canvas, with its font size set to 119 pixels. The visualization relies on raw HTML and CSS within a JavaScript container, using no external libraries or data sources. It demonstrates a minimal approach to rendering text, serving as a starting point for more complex projects. The code is intentionally simple, showing how a basic element can be placed and styled directly.

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.