Skip to main content
SimilarExport ZIP
100%

Circles with D#

✓ Published0🌍 Public
SSafrin La Batu
Last edited Feb 28, 2024
Created on Feb 28, 2024

This example demonstrates a minimal interactive runtime environment where a large, resizable text element displays "Hello World!" centered within a container. The visualization shows how the text size remains fixed while the container dimensions can change, highlighting the dynamic layout behavior. The code uses the `main` function exported from `index.js`, which receives the container element and sets its inner HTML with inline styles. No external data or rendering libraries are used; instead, it relies on plain DOM manipulation to showcase the core pattern for building data visualizations in the VizHub V3 Runtime.

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 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.
  • For an interactive example, see Mouse Follower.

Full course playlist: YouTube: Constructing Visualization 2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with D#

This example demonstrates the VizHub V3 runtime environment with a simple interactive text display. The main function receives a container and renders a "Hello World!" message using an inline HTML string with inline styling. The code uses native DOM APIs through the container’s `innerHTML` property to set the content, with the font size controlled by a variable. No external libraries are employed, and the visualization is static, showing only the initial state with no data or user interaction beyond the placeholder comment about alt-dragging the number.

SSafrin La Batu
93% match
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
84% 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
80% match
Loading thumbnail…

D3 Tutorial Code

This example demonstrates the Hello World of the VizHub V3 Runtime Environment, rendering a simple text string inside a plain HTML div. It shows how a minimal visualization can be built without any separate HTML file, relying instead on the runtime’s continuous hot reloading. The code exports a `main` function that receives a `container` DIV and sets its `innerHTML` to display the text at a fixed pixel size via inline styles. No external libraries are used beyond the runtime itself, making this a clean starting point for learning the environment’s core workflow.

DDaniel Johnson
79% 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
78% match
Loading thumbnail…

Learn D3

A simple "Hello World" example demonstrates the VizHub V3 Runtime Environment, which enables continuous hot reloading and interactive widgets. The `main` function in `index.js` receives a `container` DIV and injects an HTML string with the text "Hello World!" styled with a large, center-aligned font. No external libraries are used, and the rendering relies on the browser's native HTML and CSS capabilities rather than SVG or canvas drawing.

SSubhendu Karmakar
77% match
Loading thumbnail…

Basic

A minimal "Hello World" visualization demos the VizHub V3 Runtime Environment. The example displays a large, centered text string whose font size is defined by a variable, supporting continuous hot reloading via the runtime. It demonstrates the basic structure required for V3, where the `main` function exported from `index.js` receives a DIV container and sets its inner HTML to render the output. This setup acts as a blank slate for building more complex interactive graphics, with no external libraries or data sources involved.

YYogen Ghodke
77% match
Loading thumbnail…

vs2

This example demonstrates the simplest possible VizHub V3 Runtime Environment setup, rendering a static "Hello World!" message directly into a container DIV using vanilla JavaScript. The main function exports from `index.js` and sets the container's inner HTML with inline styling, including a large 212-pixel font size. No external libraries are used, and the code relies entirely on the V3 Runtime's hot-reloading capability triggered by the absence of an `index.html` file. The example serves as a foundational starting point for interactive data visualization development.

Yyesyesnono01@yahoo.com
76% match