anilthapa1.at23@gmail.com

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 runtime environment’s hot reloading capability, where holding the Alt key and dragging a number in the editor updates the rendered output in real time. The code exports a `main` function that sets a numeric `fontSize` variable and writes it directly into a container’s inner HTML to display “Hello World!” at that size. It relies on the runtime’s interactive widget system and the container’s dimensions, with no external libraries or data sources.

Fork of Blank Slate with Hot Reloading

Fork of Simple Scatter Plot

This fork of the simple scatter plot visualizes the relationship between bill length and flipper length in the Penguins Dataset, with each circle representing an individual penguin. The code uses `scaleLinear` to map data values to pixel coordinates, and draws axes, axis labels, and a background rectangle via the `@curran/axis-labels` library. Circles are rendered with D3's `selectAll` and `join` API, showing a clear pattern of measurement correlation across species. The example serves as a template for users to adapt with their own data by modifying the `xValue` and `yValue` functions.

Fork of Solar System

This example visualizes a solar system as a network of connected nodes, with planets orbiting a central star and lines tracing their paths. It uses `d3.forceSimulation` to position the bodies and `d3.geoPath`-like rendering for orbital trajectories. The animation is driven by `requestAnimationFrame` while each planet’s velocity and acceleration update per frame, producing a dynamic, physics-inspired model. The fork specifically alters the original force parameters, changing the balance of attraction and repulsion to create divergent orbital patterns. All rendering is done through SVG elements, with the code drawing from the v3 branch of the original project.

Fork of D3 Transitions

Six circles in a pale green SVG canvas demonstrate D3's built-in transition system. On load, each circle animates from a radius of zero to its target size with a staggered delay, while subsequent updates move them instantly to new positions and exits shrink them back to nothing. Using D3 v7.8.5, the code employs `select` joins with `.data()` keys, `transition()` for both slow and fast timing, and `easeLinear` for uniform motion. Circle positions, radii, and hex colors are hardcoded in the data array.

Fork of Circles with D3

This visualization demonstrates the creation and dynamic styling of SVG circles using D3.js. The code selects an SVG element, sizes it to the container, and binds an array of circle objects to render four circles with distinct positions, radii, and colors. It uses D3’s data binding with `selectAll`, `data`, and `join` to manage the SVG circle elements, along with attribute setters like `attr` for `cx`, `cy`, `r`, and `fill`. The background is set to a light green via inline styling, and each circle receives a fixed opacity of 0.9.

Fork of Blank Slate

This example is a blank-slate "Hello World" for the VizHub V3 Runtime Environment. It demonstrates the new entry point, exporting a `main` function that receives a `container` DIV element and renders a static HTML string with inline styles. The code sets a fixed font size of 450 pixels and centers the text "Hola Amigo!" within the container, showing the simplicity of the framework's setup.

SVG Circles

This example creates a static composition of seven colored circles on a light green background. The circles vary in position, radius, and fill color, with a semi-transparent opacity applied uniformly. The code imports the `select` function from the D3 library, uses method chaining with `selectAll`, `data`, and `join` to manage SVG and circle elements, and sets attributes dynamically based on array data.

SVG Fundamentals

This example introduces SVG fundamentals by directly embedding shapes—circles, rectangles, and lines—in an HTML document. It demonstrates the use of SVG attributes such as x, y, cx, cy, r, width, height, fill, and stroke to control positioning, dimensions, and visual styling of primitive elements. The code also showcases layering, as the rectangle and lines are drawn over the circles, and renders a static composition inside a 500×500 viewport using inline SVG markup.

Fork of Fork of Blank Slate with Hot Reloading

A minimal "Hello World" example introduces the VizHub V3 runtime environment, demonstrating continuous hot reloading and interactive widgets. The code exports a `main` function from `index.js` that receives a `container` DIV and an `options` object with `state` and `setState`, eliminating the need for an `index.html` file. By holding the Alt key and dragging numbers in the editor, properties like font size update in real time, showcasing the platform's focus on immediate visual feedback for interactive data visualization development.

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal VizHub V3 Runtime Environment setup, serving as a blank slate for building visualizations. It uses an exported `main` function from `index.js` that receives `container` and `options` (with `state` and `setState`) for managing application state. The code supports interactive widgets with hot reloading, enabling real-time adjustments by holding the Alt key and dragging numeric values in the editor, as shown in the included video. This simple template lays the foundation for developing richer, interactive data visualizations without an `index.html` entry point.