Skip to main content
Log in
S

s.s.vidhyasaraswathy4@gmail.com

@VidhyaSaraswathy·6 public vizzes

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named colors as a radial burst of pie slices, with each slice colored according to its RGB hex value. The code loads color data from a CSV file using `d3.csv`, then uses React hooks (`useState`, `useEffect`) to manage the asynchronous data loading. React renders the SVG elements while D3’s `pie` and `arc` generators compute the slice angles and paths. The example demonstrates a clean integration where D3 handles data processing and geometry, while React manages the component lifecycle and DOM updates.

Aug 12, 2024
Loading thumbnail…

Fork of Circles with D3

This fork of the D3 circles example demonstrates a vibrant, multi-colored scatter of circles rendered on a light green SVG canvas. The code uses the d3-selection library’s `select` and data join pattern to bind an array of circle objects—each with explicit `x`, `y`, `r`, and `fill` properties—to SVG `circle` elements. It leverages method chaining with `.attr` calls to set coordinates, radius, color, and a fixed opacity, while using `container.clientWidth` and `clientHeight` to size the visualization responsively.

Aug 12, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the solar system with correct relative sizes, though distances are not to scale. Each planet appears as a colored circle that grows in place and is labeled with its name, starting from the Sun. The code uses D3’s `transition` API for the sequential animation and defines each planet’s color, size, and orbital distance in a data array. Data is sourced from Wikipedia’s list of gravitationally rounded objects of the Solar System.

Aug 12, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the solar system with correct relative sizes, though distances are not to scale. Each planet appears as a colored circle that grows in place and is labeled with its name, starting from the Sun. The code uses D3’s `transition` API for the sequential animation and defines each planet’s color, size, and orbital distance in a data array. Data is sourced from Wikipedia’s list of gravitationally rounded objects of the Solar System.

Aug 12, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the solar system with correct relative sizes, though distances are not to scale. Each planet appears as a colored circle that grows in place and is labeled with its name, starting from the Sun. The code uses D3’s `transition` API for the sequential animation and defines each planet’s color, size, and orbital distance in a data array. Data is sourced from Wikipedia’s list of gravitationally rounded objects of the Solar System.

Aug 12, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the foundational "Hello World" template for the VizHub V3 Runtime Environment, showing a large, centered text string that can be interactively resized. The code exports a single `main` function that receives a container DIV element, whose inner HTML is set to display the text, with the `fontSize` property directly embedded using template literals. By holding the Alt key and dragging over the numeric value in the editor, the font size updates continuously, illustrating the platform's hot-reloading feature without requiring a manual refresh. It serves as a minimal, starting-point project for understanding the streamlined entry point and real-time feedback loop of VizHub V3.

Aug 12, 2024