Hot Reloading and Interactive Widgets

VizHub Features
#1

One of the defining characteristics of VizHub 3 is “Hot Vizzes”, or, vizzes that support hot reloading. These are differentiated from regular vizzes (which use vanilla HTML) by a glowing frame.

image
image1035×509 108 KB

Hot Reloading

The fundamentals are documented here:

To summarize:

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

This example shows usage with D3 transitions:

This example shows patterms for interaction:

This example shows patterns for animation:

Interactive Widgets

The following interactive widgets are supported in the code editor.

  • Alt + Drag on a number to change it by dragging
  • Alt + Click on a color hex code to change it with a color picker
  • Alt + Click on a boolean value (true or false) to toggle it
  • Alt + Click on a URL to open it in a new tab

Why?

The point of hot reloading, and the reason to invest in writing hot-reloadable code, is so that you can iterate faster in a collaborative context, accelerating time to delivery for dataviz projects, and making the work itself more joyful. The hot reloading and interactive widgets work across clients in real-time, so you can use these tools while, for example, pair programming, mob programming, or to action client feedback live during a presentation meeting!