Shlok Mohanty

@ShlokMohanty·2 public vizzes

SVG fundamentals

This example illustrates the rendering pipeline of the VizHub V3 runtime environment, starting with a blank slate. It demonstrates two core elements: a static SVG drawing of six red circles and a dynamic text label whose font size is controlled by an interactive widget. The SVG uses standard circle elements, while the dynamic text is generated through a `main` function that sets `container.innerHTML`. The code highlights the platform's hot-reloading feature, where holding Alt and dragging a number adjusts the `fontSize` property in real-time.

Aug 25, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates the VizHub V3 runtime environment, where a single `main` function receives a container element and renders a static “Hello World!” message using inline SVG-style HTML. The code uses no external libraries, only plain JavaScript DOM manipulation via `container.innerHTML`. A numeric variable sets the font size, which can be interactively adjusted by holding Alt and dragging the value in the editor, supporting continuous hot reloading. This provides a minimal, blank-slate template for building interactive visualizations within the platform.

Aug 25, 2024