Export Image
Export Code

Blank Slate with Hot Reloading

559
Forks
1
Star

Curran Kelleher

Last edited May 13, 2024
Created on Jan 09, 2024
Forked from Hello VizHub 3

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

Comments

nimrod-grandpierre
commented on
May 08, 2024

Hey Curran! This setup is awesome with no need for an HTML, however, I found myself wondering how it could work in the background. I'm not sure how to go about setting up state and setState in a "real-world" project using VSCode let's say. Could you shed a bit of light on that perhaps? I'd be very grateful. Cheers!

Curran Kelleher
commented on
May 13, 2024

Totally! I've set up a Vite project template that shows one way to do it here:

https://github.com/vizhub-core/vite-export-template

This template provides a vanilla JavaScript implementation of state and setState. It also uses Vite's hot reloading API to support hot reloading locally. The simplest implementation of those looks like this:

import './style.css';
import { main } from '<insert your entry point here>';

let state = {};

const container = document.querySelector('.viz-container');

const render = () => {
  main(container, { state, setState });
};

const setState = (next) => {
  state = next(state);
  render();
};

render();

It's also compatible with React's useState API. you could define it as:

const [state, setState] = useState({});

I hope to develop a similar template based on React as well. That way you could export any of these examples out of VizHub that use the main pattern, and wrap them as React components for incorporation into a larger app.

Thanks for asking this question!