Skip to main content
Log in
S

Sivasakthi C

@SivasakthiC2825·11 public vizzes

Loading thumbnail…

Fork of HTML

This example demonstrates a minimal HTML page that renders a centered “Hello HTML!” message using cascading style sheets for visual styling and embedded JavaScript. It serves as a bare-bones starter template for web-based visualization projects, illustrating the fundamental integration of HTML structure, CSS presentation, and JavaScript functionality. The code defines a custom CSS class to control font size and alignment, while the JavaScript presence is implied for potential interactivity, although the visible output relies solely on static markup and styling.

Aug 12, 2024
Loading thumbnail…

Fork

A responsive visualization container uses a ResizeObserver to track the container’s dimensions and updates the state with the new width and height. The d3-selected SVG element re-renders an inner rectangle on each resize, with its fill, margins, and size defined by the viz function. This example demonstrates a pattern for making D3 visualizations adapt to their parent element’s size changes, using the ResizeObserver API and D3’s join method to manage the SVG and rectangle elements dynamically.

Aug 12, 2024
Loading thumbnail…

Fork

This example demonstrates a responsive SVG visualization where a gray rectangle remains centered within the container as its dimensions adjust dynamically. The code uses a `ResizeObserver` to continuously update the width and height in the component state, and D3’s `select` and `join` methods to efficiently render the SVG and rectangle. The inner rectangle's size is calculated from the container's current dimensions minus fixed margins, ensuring it always fits within the available space.

Aug 12, 2024
Loading thumbnail…

Fork

This example demonstrates a responsive SVG visualization where a gray rectangle remains centered within the container as its dimensions adjust dynamically. The code uses a `ResizeObserver` to continuously update the width and height in the component state, and D3’s `select` and `join` methods to efficiently render the SVG and rectangle. The inner rectangle's size is calculated from the container's current dimensions minus fixed margins, ensuring it always fits within the available space.

Aug 12, 2024
Loading thumbnail…

Hello Fork

This example shows a set of seven colored circles with varying radii and positions scattered across a light green background. It demonstrates the D3.js data join pattern for binding an array of circle objects to SVG elements. The code uses d3.select, selectAll, data, and join to create the circles, then chains attr methods to set each circle's cx, cy, r, fill, and opacity properties. The data is hardcoded in a JavaScript array within the main export function.

Aug 12, 2024
Loading thumbnail…

Hello Fork

This example shows a set of seven colored circles with varying radii and positions scattered across a light green background. It demonstrates the D3.js data join pattern for binding an array of circle objects to SVG elements. The code uses d3.select, selectAll, data, and join to create the circles, then chains attr methods to set each circle's cx, cy, r, fill, and opacity properties. The data is hardcoded in a JavaScript array within the main export function.

Aug 12, 2024
Loading thumbnail…

Hello Fork

This example shows a set of seven colored circles with varying radii and positions scattered across a light green background. It demonstrates the D3.js data join pattern for binding an array of circle objects to SVG elements. The code uses d3.select, selectAll, data, and join to create the circles, then chains attr methods to set each circle's cx, cy, r, fill, and opacity properties. The data is hardcoded in a JavaScript array within the main export function.

Aug 12, 2024
Loading thumbnail…

Hello World

This example demonstrates a blank slate for the VizHub Version 3 runtime environment, displaying a centered "Hello World!" message. The code exports a `main` function that receives a `container` DIV element and sets its `innerHTML` directly, allowing for continuous hot reloading of simple visual changes. Interactive widgets enable real-time adjustments, such as altering the font size, to showcase the environment's responsive feedback loop. This serves as a foundational template for building more complex data visualizations.

Aug 12, 2024
Loading thumbnail…

Fork of Hello World......

This example demonstrates the fundamental “Hello World” of the VizHub V3 Runtime Environment, displaying the text “Hello World!” on a blank page. It highlights real-time interactivity, allowing numeric values in the code to be adjusted by holding the Alt key and dragging, which immediately updates the rendered font size. The implementation uses a simple exported `main` function that receives a `container` DIV element and manipulates it via `innerHTML` to inject styled HTML content. There are no external libraries or data sources involved.

Aug 12, 2024
Loading thumbnail…

Hello World

This example demonstrates the VizHub V3 Runtime Environment’s interactive widget system, where holding Alt and dragging a numeric value in the code editor updates the displayed font size in real time. The code exports a `main` function from `index.js` that receives a `container` DOM element and sets its inner HTML with a centered "Hello World!" message using inline styling. No external libraries are used; the example relies on vanilla JavaScript and DOM manipulation to showcase the core hot-reloading workflow.

Aug 12, 2024
Loading thumbnail…

Hello World

This example demonstrates the VizHub V3 Runtime Environment’s interactive widget system, where holding Alt and dragging a numeric value in the code editor updates the displayed font size in real time. The code exports a `main` function from `index.js` that receives a `container` DOM element and sets its inner HTML with a centered "Hello World!" message using inline styling. No external libraries are used; the example relies on vanilla JavaScript and DOM manipulation to showcase the core hot-reloading workflow.

Aug 12, 2024