Skip to main content
SimilarExport ZIP
100%

Blank Slate with Hot Reloading

✓ Published106🌍 Public
CCurran Kelleher
Last edited Feb 20, 2025
Created on Jan 9, 2024
Forked from Hello VizHub 3

This blank slate demonstrates the VizHub V3 runtime’s hot reloading: a single `main` function renders “Hello World” with a fixed font size into a container DIV. Interactive widgets let users Alt-drag the numeric value directly in the editor to update the font size live, with changes reflected instantly alongside `state` and `setState` APIs for immutable state management. The example uses plain HTML and inline CSS for layout, with no external libraries. Its purpose is to show the minimal setup required before building larger visualizations.

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.

Full course playlist: YouTube: Constructing Visualization 2024.

VizHub Version 3: A New Era in Interactive Coding

The release of VizHub version 3 marks a significant milestone in the evolution of data visualization tools. This new version introduces a unique feature set designed to enhance the coding experience and make data visualization more interactive and intuitive.

Interactive Widgets: A Leap Forward in Real-Time Feedback

One of the standout features of VizHub version 3 is its support for interactive widgets, which enable continuous hot reloading. This means that developers can see the effects of their code changes in real-time, without the need for manual refreshes. By simply holding down the 'Alt' key and dragging a number in the editor, properties like font size can be adjusted on the fly, providing immediate visual feedback.

Simplifying the Entry Point: The Main Function

In a departure from traditional setups, VizHub version 3 does away with the need for an index.html file. Instead, the entry point is a main function exported from index.js. This function takes two arguments:

  • container: A DIV element that has measurable dimensions using clientWidth and clientHeight.
  • options: An object containing state and setState, where:
    • state is initialized as an empty object {} and stores the application's state.
    • setState is a function that can be called with a function to create a new state object using immutable update patterns.

This streamlined approach is designed to simplify the setup process and focus more on the creative aspects of coding.

A Blank Slate Starting Point: "Hello World" for VizHub V3

The "Hello World" example in VizHub version 3 serves as a blank slate starting point, showcasing the capabilities of the new runtime environment. This example demonstrates the simplicity and power of the VizHub V3 Runtime Environment, providing a foundation for developers to build upon.

Learning Through Interaction: The Mouse Follower Example

For an interactive example of the capabilities of VizHub version 3, the Mouse Follower demonstration provides a hands-on experience. This example illustrates how developers can create dynamic visualizations that respond to user input, further highlighting the platform's emphasis on interactivity and real-time feedback.

A Humble Yet Powerful Tool

VizHub version 3 represents a humble yet powerful step forward in the world of interactive coding and data visualization. Its focus on real-time feedback, simplified entry points, and interactive examples aims to enhance the coding experience and make learning more accessible. While there is still much to explore and improve, this new version is a testament to the ongoing efforts to make data visualization more dynamic and engaging.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the "Hello World" of VizHub V3, a blank slate starting point that showcases continuous hot reloading. The code exports a `main` function that receives a container element and renders a text string using inline styles, with the font size set to a static value. The example highlights interactive widgets, where holding Alt and dragging a number in the editor adjusts properties like font size in real-time, providing immediate visual feedback through the runtime environment. The rendering approach uses plain DOM manipulation via `container.innerHTML` without additional libraries.

AAndré Thiago Netto
91% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal "Hello World" visualization using the VizHub V3 Runtime Environment, showing how continuous hot reloading enables live editing of a number in the code to change the rendered font size via the Alt-drag interaction. It uses the exported `main` function, which receives a container DIV element with measurable dimensions and sets its `innerHTML` to display the text. The rendering approach is plain DOM manipulation via a template literal, with no external libraries, focusing on the runtime’s core feature of real-time feedback during development.

Ssaideep1612@gmail.com
90% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the foundational "Hello World" setup for the VizHub V3 Runtime Environment, serving as a blank slate for interactive coding. It shows a minimal HTML structure with an SVG element and a paragraph, while the runtime simplifies entry by using an exported `main` function in `index.js` that receives a container and state-management options. The code highlights the platform’s hot reloading capability, where interactive widgets allow real-time property adjustments (e.g., font size) via Alt-drag, and it uses the `setState` function for immutable state updates. The visualization is rendered directly into the provided container, with no external libraries beyond the runtime’s built-in support, and the included video and links reference further examples like a Mouse Follower.

Hhchen156@jh.edu
89% match
Loading thumbnail…

march 2024 Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment's "Hello World" starting point, showing how a simple `main` function exported from `index.js` renders HTML directly into a provided container DIV. The code sets a fixed `fontSize` of 214 pixels and injects a styled div with centered text, showcasing the streamlined entry point that replaces traditional `index.html` files. Hot reloading enables live editing, where dragging a number while holding the Alt key updates the font size in real time, supported by the runtime's interactive widgets.

DDonald Bagwell
89% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the minimal setup for a VizHub V3 visualization, showing a static "Hello World!" message rendered inside a container DIV. It highlights the runtime’s hot reloading capability, where changes to the `fontSize` variable are reflected instantly without a full page refresh. The `main` function receives the `container` and uses its `clientWidth` and `clientHeight` for layout, while storing application state in an empty object and updating it via `setState` with immutable patterns. No external libraries are used, relying on plain JavaScript and inline HTML strings for rendering.

Ssirusxcoder
88% match
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This example demonstrates the foundational "Hello World" for VizHub V3, showing how the runtime renders a single styled text element inside a container. It highlights the hot-reloading workflow by rendering a hardcoded font size of 222 pixels within an HTML string, using inline CSS for centering. The code exports a `main` function that sets the container’s innerHTML, illustrating the simplified entry point that replaces traditional HTML files. This serves as a minimal template for interactive widget development, where manual code changes trigger immediate visual updates in the browser.

AAndré Thiago Netto
87% 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
87% 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
87% match