Subhas Ramdass

Collapsible Tree Version 1

A collapsible tree visualizes the hierarchical structure of the flare-2.json dataset, with nodes representing categories and leaves showing values. Clicking a node expands or collapses its children, triggering smooth animated transitions. The implementation uses D3 v6 with `d3.tree` and `d3.linkHorizontal` to compute the layout, while `d3.zoom` enables pan and zoom. Node and link updates are animated via `transition.attr`, with SVG circles and text elements rendering the hierarchy.

Link Tree Viz of World Countries

A link tree visualization displays world countries as nodes connected by directional links, with arrow markers indicating flow direction. The SVG rendering positions nodes at fixed coordinates from a JSON data file and offsets them vertically for link path generation. Using d3.json, d3.linkHorizontal, and D3 v5 selection joins, the visualization draws curved horizontal paths with blue strokes and circles for nodes. The code includes a marker definition for arrowheads, though no interactive behavior or force simulation is currently active.

D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree as a series of collapsible boxes, using a JSON data structure to define nodes with properties like type, version, and link direction. The layout, built with `d3.layout.tree`, positions nodes vertically, while SVG rectangles and text display the node labels. Users can click nodes to expand or collapse the hierarchy, with animated transitions and colored boxes indicating different node types. The implementation uses the `d3.behavior.zoom` feature for panning and zooming, and SVG definitions for arrows and drop shadows, all rendered within an SVG container managed by D3.js v3.

Tree ICE-8

A family tree visualization presents hierarchical relationships among members of the Peddi family, rendered as an animated, collapsible tree diagram. The chart uses D3.js version 3.5.17 with the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links between nodes. Each person appears as a cyan circle with red borders and a name label; clicking a node toggles the visibility of its children. The visualization loads data from an embedded JavaScript array and displays it via SVG elements with CSS styling. The page includes an orange background and a centered title.

World Countries Tree

plotting tree

This visualization displays 2011 EV stock values as a hierarchical tree chart, with countries (China, India, UK, USA) branching into vehicle categories (buses, cars) and then into BEV and PHEV types with labeled numeric values. The code uses d3.hierarchy and d3.tree to compute the layout, then draws cubic Bezier curves as links. Node and link colors are encoded directly in the JSON data structure, with SVG rendering and a linear-gradient CSS background.

Fork of Bowl of Fruit - Click to Select

A static row of five red apples is rendered as SVG circles using React components, with d3 scales mapping fruit type to color and radius. Clicking any apple selects it, visually highlighted by a black stroke, through React state managed via the `useState` hook in `index.js`. The `FruitBowl` component handles the click interaction and passes the selected fruit’s ID upward. No animation or data updates occur beyond the selection feedback.

Fork of Blank Slate with Hot Reloading

This blank slate example from VizHub Version 3 demonstrates the minimal setup for a D3.js visualization using an SVG rendering approach. The code selects an SVG element and sets its background color to red using `d3.select` and `style`. It showcases the new runtime environment’s simplified entry point—a `main` function exported from `index.js`—which eliminates the need for an `index.html` file. This fork supports hot reloading, allowing real-time code adjustments through interactive widgets.

Fork of Hello VizHub

This example demonstrates how to set up a minimal D3.js visualization within the VizHub environment, displaying the text "Hello VizHub!" in a centered, large-font message. It loads D3 v5 from UNPKG and uses the `select` API to target a `div` element and set its text content. The code also illustrates ES6 module imports, both for local modules like `myMessage.js` and for D3’s API functions, alongside a regex literal and a constant, showcasing basic structure for interactive development.

hello

This example demonstrates the core functionality of the VizHub V3 Runtime Environment, serving as a blank slate "Hello World" starting point. The code exports a `main` function that receives a container DIV element and uses it to render a simple text message with a fixed font size. The example highlights the simplified entry point without an `index.html` file, where the container's `clientWidth` and `clientHeight` properties are available. The rendering approach is direct DOM manipulation via `innerHTML` with inline CSS styling, showcasing the hot reloading capability where holding Alt and dragging a number adjusts properties in real-time.