sadhanasri125@gmail.com

@SadhanaSri125·4 public vizzes

Fork of Blank Slate with Hot Reloading

This example demonstrates the simplest possible VizHub V3 runtime environment, rendering a static "Hello World!" message with adjustable font size. The `main` function exported from `index.js` receives a `container` DIV element and writes HTML directly into it. Holding the Alt key and dragging the `fontSize` number in the editor triggers continuous hot reloading, updating the displayed text instantly. This blank slate serves as a minimal starting point for building interactive visualizations with the VizHub V3 API.

Aug 12, 2024

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse across a light green canvas, changing its fill color to a randomly generated hexadecimal value on each click. The example demonstrates immutable state updates via a Redux-style pattern, where a `setState` callback creates a new state object rather than mutating the existing one. Built with d3.js (v7.8.5), it uses `d3.select`, `d3.pointer`, and SVG joins to handle mouse events and render the circle. The initial color is blue, and the circle’s position is updated with every `mousemove` event using the current pointer coordinates.

Aug 12, 2024

Loading thumbnail…

Fork of Solar System

This animation displays the planets of the Solar System in a horizontal line, with their relative sizes shown to scale but distances compressed. Each celestial body appears sequentially, growing into place with its label beneath it. The visualization uses D3.js version 7.8.5, specifically the `select`, `transition`, and `easeLinear` APIs to animate circle radii and text opacity. Planet data, including names and sizes, comes from Wikipedia’s list of gravitationally rounded objects, though distance values are simplified for visual clarity.

Aug 12, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal VizHub V3 runtime environment, rendering the text “HEY STYLISH!” in a centered HTML div with a font size of 106 pixels. The illustration highlights the platform’s hot-reloading capability, where holding the Alt key and dragging the numeric font-size value in the editor updates the visualization in real time. The code uses a `main` function that takes a `container` element and directly sets its `innerHTML`, simplifying the entry point by eliminating the need for an `index.html` file. This blank-slate starting point serves as a template for building interactive visualizations with immediate visual feedback.

Aug 12, 2024