TERGAR TRAINING - 1

100%

TERGAR TRAINING - 1

✓ Published2🌍 Public

Last edited Apr 20, 2022

Created on Apr 19, 2022

This visualization presents a hierarchical training dataset as an interactive tree diagram, using a horizontal link layout with labeled nodes whose font size decreases with depth. The SVG rendering relies on d3.tree, d3.hierarchy, d3.stratify, and d3.linkHorizontal, with data loaded from an external CSV via d3.csv. Pan and zoom controls are implemented using d3.zoom, and node text includes white shadows for readability against the teal paths.

AI-generated description

Training Material interactive visualization

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of TERGAR TRAINING - 2

This visualization displays a hierarchical tree structure using a horizontal dendrogram layout, with text labels sized inversely to node depth. The code loads CSV data from a GitHub gist and processes it through d3.stratify and d3.tree, rendering links via linkHorizontal paths and labels with SVG text. Pan and zoom capabilities are implemented using d3.zoom, applying transforms to a zoom group. The styling uses a custom Playfair Display font and green strokes for connections, with white text shadows for readability.

NNita

91% match

Loading thumbnail…

Tree Diagram TERGAR TRAINING - June 17,2022-(1)

This interactive tree diagram visualizes hierarchical training data, displaying nodes as text labels connected by curved paths. The visualization uses D3 v5’s `tree()` layout combined with `linkHorizontal()` to generate the branching structure, and `zoom()` enables panning and scaling. Data is loaded from a CSV file via `d3.csv()` and structured using the `stratify()` method, with node labels rendered as SVG text elements. The diagram employs a fixed viewport that fills the browser window, with node names displayed in a serif font and connections drawn in green strokes.

NNita

90% match

Loading thumbnail…

Fork of TERGAR TRAINING - 3

A fork of the TERGAR training material displays a horizontal hierarchical tree layout of organizational or taxonomic data from a CSV file. The visualization uses d3.stratify to build the hierarchy and d3.tree for layout, rendering nodes as text labels and connecting links as curved paths via d3.linkHorizontal. The SVG output features a zoom behavior and Playfair Display typography, with font size decreasing by depth. The data is loaded asynchronously from a GitHub gist, with the entire tree rendered at once.

NNita

87% match

Loading thumbnail…

Fork of Fork of TERGAR TRAINING -Intro_to_meditation

This interactive visualization displays a tree diagram representing meditation training materials, with nodes labeled by topic names and connecting paths drawn with a green stroke. The tree grows horizontally, with font sizes decreasing at each depth level. It is built using D3 v5, employing the `d3.tree()` layout, `d3.hierarchy()`, `d3.linkHorizontal()` path generator, and a zoom control via `svg.call(zoom())`. Data is loaded asynchronously from a CSV file hosted in a GitHub gist using `d3.csv()`, then processed with a custom stratification function that assigns parent-child relationships based on name fields.

NNita

80% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays the hierarchical structure of a dataset, with nodes and links rendered using SVG and animated transitions. The visualization uses D3.js version 3, with the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Clicking nodes expands or collapses their children, with smooth transitions achieved through `transition.attr`. The static data is embedded in the code, and the example also includes a separate CSV file for population data, though it is not referenced in the visualization.

1123ATFake

75% match

Loading thumbnail…

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

VVenkat-Sumith-Thota

74% match

Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi

74% match

Loading thumbnail…

SFDC Training

An interactive radial tree visualization displays a hierarchical dataset, "SFDC Training," using D3.js. The layout is computed with `d3.layout.tree` and rendered as SVG. The visual shows a quality indicator with branches for efficiency and public audiences. Clicking nodes expands or collapses children; clicking links with URLs loads embedded videos. The animation uses D3 transitions to smoothly reposition nodes and links.

Rriccardost

74% match