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

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

SSafrin La Batu
93% match
Loading thumbnail…

circle_1

This example showcases a simple "Hello World" visualization in the VizHub V3 Runtime Environment, demonstrating the platform's interactive coding capabilities. The main function writes a text element into a container div, with font size controlled by an interactive widget that responds to Alt-drag gestures for live property adjustments. The code uses plain HTML and JavaScript, with the container's clientWidth and clientHeight providing measurable dimensions for layout. It serves as a foundational template for building more complex interactive visualizations.

Mmathsalmath@gmail.com
87% match
Loading thumbnail…

Circles

This example demonstrates the VizHub V3 Runtime Environment's interactive widget system. The code exports a `main` function that takes a `container` DIV element and sets its inner HTML to display a “Hello World!” message. Users can hold the Alt key and drag the numeric `fontSize` variable within the editor to continuously hot-reload the text at varying sizes. The example serves as a minimal starting point for building more complex interactive data visualizations within this framework.

Sshruthikaelangovan196@gmail.com
87% match
Loading thumbnail…

Circles

This example demonstrates the VizHub V3 Runtime Environment's interactive widget system. The code exports a `main` function that takes a `container` DIV element and sets its inner HTML to display a “Hello World!” message. Users can hold the Alt key and drag the numeric `fontSize` variable within the editor to continuously hot-reload the text at varying sizes. The example serves as a minimal starting point for building more complex interactive data visualizations within this framework.

Sshruthikaelangovan196@gmail.com
87% 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
83% 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
83% match
Loading thumbnail…

D3 Scatter plot

This example demonstrates the VizHub V3 Runtime Environment’s "Hello World" template, rendering a large, centered text string within a container using inline HTML and CSS. The rendered `div` uses a static `fontSize` value set to 217 pixels, with no external libraries or data sources. The code exports a `main` function that receives the container element and sets its inner HTML, showcasing the minimal entry-point structure for interactive widget development.

GGbemiga Atolagbe
81% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the "Hello World" of the VizHub V3 Runtime Environment, where a large, centered text string renders inside a container DIV using inline HTML and CSS styling. The main function sets a font size value that can be interactively adjusted via Alt-drag, showcasing continuous hot reloading. The code uses plain DOM manipulation through template literals, with no external libraries, and relies on the container’s dimensions to display the text. It highlights a simplified entry point without an index.html file, focusing on real-time feedback for developers.

ZZaky Ahmad Makarim
81% match