mathsalmath@gmail.com

Fork of Fork of Let's make a face with D3.js!

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment’s hot reloading feature, where holding Alt and dragging a numeric value in the editor updates a displayed text’s font size in real time. The code exports a `main` function that takes a `container` DIV and injects an HTML string with an inline style, rendering “Hello World!” as a blank-slate starting point. It uses no external libraries, relying instead on the runtime’s interactive widget system to reflect state changes immediately. This serves as a minimal template for building more complex visualizations.

Fork of Fork of Blank Slate with Hot Reloading

This example demonstrates VizHub V3’s hot-reloading environment, where a simple “Hello World!” text is rendered inside a styled `div` via a `main` function exported from `index.js`. The code sets an inline `font-size` (217px) and centers the text, showing how interactive widgets allow live editing of numeric values by alt-dragging. It uses the VizHub V3 runtime, which replaces an `index.html` entry point with a `main` function receiving a `container` element and an `options` object for state management.

Fork of Blank Slate with Hot Reloading

This example demonstrates the “Hello World” starting point for the VizHub V3 runtime environment, which supports continuous hot reloading and interactive widgets. The code exports a `main` function that receives a container DIV and renders a simple text string with a hard-coded font size. By holding the Alt key and dragging the numeric value in the editor, developers can adjust the font size in real time, showcasing the platform’s immediate feedback capabilities without requiring an `index.html` file. The example uses plain JavaScript DOM manipulation via `container.innerHTML` to display the output.

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.

Fork of Circles with D3

This visualization displays a set of seven colorful circles scattered across a light green background, each with varying sizes and positions. The JavaScript code uses D3.js (version 7.8.5) to bind an array of circle data objects to SVG elements, setting each circle’s center coordinates, radius, fill color, and opacity through method chaining. The visualization demonstrates the D3 General Update Pattern, where selecting, binding data, and joining SVG elements create and style the circles dynamically.