First

100%

✓ Published0🌍 Public

Last edited Jan 25, 2024

Created on Jan 25, 2024

Forked from Blank Slate with Hot Reloading

This example introduces the VizHub V3 Runtime Environment with a minimal "Hello World" SVG graphic. It renders a yellow circle as a face with two smaller black circles for eyes, drawn using basic SVG elements such as `<circle>` within a fixed-width canvas. The code demonstrates the required `main` function export, which accepts a `container` DIV and sets its inner HTML to define the visualization. The rendering approach relies entirely on inline SVG markup, with no external libraries or data processing.

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

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles

This example demonstrates the “Hello World” of a VizHub V3 Runtime Environment, showing a blank SVG canvas that fills the container’s width and height. The code uses D3’s `select` and `selectAll` with a data join of `[1]` to create an empty SVG element. The visualization highlights a minimal setup for continuous hot reloading with interactive widgets, serving as a template for building more complex charts. The entry point is the exported `main` function, which receives the `container` DIV as its argument, and the example lacks an `index.html` file, triggering the V3 Runtime.

AAaron

82% match

Loading thumbnail…

creating-circles

This example demonstrates the fundamental structure of a VizHub V3 visualization, starting from a blank canvas. It shows how the `main` function receives a DIV container and uses it as the mounting point for all visual output. The code implements a simple circular shape using basic SVG elements within the container, serving as a minimal "Hello World" for the runtime environment. The example highlights the V3 Runtime's continuous hot-reloading capability, where changes to the code instantly update the rendered visualization. It uses plain JavaScript and SVG APIs, with no external libraries, to establish the baseline for subsequent tutorials.

Oownerofthesoul0000@gmail.com

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the minimal setup required for a VizHub V3 visualization, serving as a foundational starting point. It renders a simple "Hello World!" text message using an inline HTML string that is inserted into the container element, with the font size controlled by a variable that can be adjusted interactively. The code exports a `main` function that receives a DIV element, and it does not rely on any external libraries or data sources. The visualization is purely static, showcasing the basic structure for hot reloading and interactive widget support in the VizHub environment.

Ssaeedusa@gmail.com

81% match

Loading thumbnail…

Hello VizHub

A yellow circle with a simple face—two black-outlined eyes—is centered in an SVG canvas. Built with D3 v5, the code uses `d3.select` and `d3.append` to create circular and group elements, with `attr` calls positioning the eyes via fixed pixel offsets. The visualization demonstrates basic SVG rendering and DOM manipulation within the VizHub framework, using the provided `styles.css` for font styling.

VVijay

80% match

Loading thumbnail…

SVG-Fundamentals

This example demonstrates the minimal setup for a VizHub V3 visualization, rendering a simple "Hello World!" text message. It shows how the runtime environment enables continuous hot reloading without an `index.html` file. The code exports a `main` function that receives a `container` DIV element and directly sets its `innerHTML` with inline styles, including a large, adjustable `fontSize` value. It relies entirely on the native DOM API and the VizHub V3 runtime, with no external libraries or data sources involved.

CChetan Tewari

80% match

Loading thumbnail…

test

This example demonstrates a minimal "Hello World" setup for the VizHub V3 runtime, showing how a `main` function initializes a container with an interactive font-size widget and appends an SVG text element. The code uses D3.js to select the body and append an SVG, then adds a text node, while the container’s inline HTML relies on CSS styling. It highlights the runtime’s support for direct DOM manipulation and real-time property editing via Alt-drag. The SVG rendering approach is explicit, with D3’s `select` and `append` methods driving the visualization.

Ssdfux@yahoo.com

80% match

Loading thumbnail…

Let's make a face!

This example demonstrates the minimal setup for a VizHub V3 Runtime Environment visualization, serving as a “Hello World” starting point. The code exports a `main` function that accepts a container element and injects an HTML string with a large, centered text div. It uses no external libraries, only plain JavaScript and the container’s `clientWidth` and `clientHeight` for sizing. The state is managed via an empty object and `setState`, supporting future interactivity through immutable updates, as hinted by the linked Mouse Follower example.

Wweisbroda@rfa.org

79% match

Loading thumbnail…

Hello VizHub

A single yellow circle with a black outline fills the center of an SVG canvas, demonstrating the basic setup of a D3.js visualization. The example uses the `d3.select` API to target the SVG element, then appends a circle element with radius and center coordinates derived from the SVG's width and height attributes. The visualization renders through SVG, with the circle's fill and stroke set via `.attr()`. It serves as a minimal template for creating interactive web graphics with D3 version 5.

Hhtt102

79% match