Vijay Karchi

@VijayKarchi·7 public vizzes

Fork of sccenario graph collapsible

This interactive tree diagram shows a collapsible scenario graph for a subscriber addition workflow. Built with D3 v7, the visualization represents a hierarchical data structure where nodes display steps and sub-steps. Users can click nodes to expand or collapse their children, with animated transitions using `d3.transition` and custom path generation via `d3.link(curveStep)`. The SVG rendering maps scenario metadata like step types and features, with collapsible behavior controlled through the tree layout and node state management.

Apr 28, 2023

Loading thumbnail…

Signup Template

This example shows a simple signup template that presents the user with a welcome message, their assigned username and password, and contact information using plain HTML and CSS. The page uses flexbox in a container div to center the content vertically, with a green header and footer that frame the signup details. Additional styling comes from the Google Fonts API, which loads the Poppins and Oswald typefaces for the body and header text, while the Material Symbols Outlined font is also included via a stylesheet link. All content is static and requires no JavaScript.

Apr 27, 2023

Loading thumbnail…

Scenario Hierarchy Graph

This interactive tree diagram visualizes a hierarchical scenario structure with collapsible nodes, showing steps and their sub-steps for a data flow. Built with D3 v7, it uses `d3.hierarchy` and `d3.tree` to compute layouts, while `d3.link` with `curveStepAfter` generates step-shaped paths between nodes. Users can click nodes to expand or collapse children, triggering animated transitions with `d3.transition`. The SVG rendering includes circles and text labels, with data imported from a JavaScript module. Collapsed nodes initially hide all descendants, revealing them progressively through click interactions.

Apr 12, 2023

Loading thumbnail…

sccenario graph collapsible

This interactive collapsible tree visualizes a hierarchical scenario graph, showing step nodes that expand and collapse to reveal child API data. The visualization uses d3.hierarchy and d3.tree to compute node positions, while user clicks trigger transitions that toggle children visibility. SVG circles and labels render each node, with vertical link paths connecting parent-child relationships. Animated transitions use d3's transition system to smoothly move nodes between states, with the root dataset imported from a separate JavaScript data module.

Apr 12, 2023

Loading thumbnail…

Forced Graph

This example shows a small network of project and feature nodes connected by links, rendered as styled HTML cards within an SVG using D3’s force simulation. The graph uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while each node is a custom `foreignObject` containing a `div` with a left icon area, a title, and a share action. The `tick` event updates link coordinates and translates each node’s container based on simulated positions, and clicking a node triggers an alert with its id. The data comes from an imported `data.js` module defining two nodes and one link.

Apr 8, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a static card-style node displaying a project title, a home icon, and two action icons. The node uses a flexbox layout with a left icon area and a right content area, styled with CSS borders and dotted separators. Rendering relies on HTML and CSS, with Material Symbols Outlined icons loaded from Google Fonts. The code does not include any JavaScript or data-driven visualization.

Apr 7, 2023

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries organized by continent and region, with each country displayed as a text label and connected by curved links. The D3 v5 code loads a JSON dataset and uses `d3.tree` and `d3.hierarchy` to compute the layout, while `d3.linkHorizontal` generates the curved paths. Text size decreases with depth, and a `d3.zoom` behavior enables panning and zooming on the SVG.

Apr 6, 2023