Fork of TERGAR TRAINING - 3

100%

Fork of TERGAR TRAINING - 3

✓ Published2🌍 Public

Last edited Apr 21, 2022

Created on Apr 20, 2022

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.

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

95% match

Loading thumbnail…

TERGAR TRAINING - 1

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.

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

84% 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

82% match

Loading thumbnail…

Fork of a

This visualization presents a hierarchical tree of branching numeric labels, with each node displaying its value in large, serif text that shrinks as depth increases. The layout uses the D3 tree layout to position nodes, renders horizontal curved links between parent-child relationships, and supports zooming and panning via the D3 zoom behavior. Data is loaded from a JSON file and visualized entirely as SVG elements, with node text drawn using the Playfair Display font.

RRakshithaRao27

77% match

Loading thumbnail…

Fork of Fork of D3 Hierarchy Component 3

This example shows a hierarchical task tree rendered as an SVG, with nodes displayed as rectangles containing text labels and connected by horizontal links. The visualization uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables panning and scaling of the entire graph. Data is loaded from a JSON file, and both nodes and links respond to hover events by changing their fill or stroke color.

WWRCIECH

77% match

Loading thumbnail…

Fork of Fork of D3 Stratify tree diagram

This example shows a hierarchical tree diagram built from CSV data using the D3 `tree()` layout and `linkHorizontal` for curved edges. The visualization renders as an SVG within a React component, with nodes and paths styled in a green color scheme. The code loads data from an inline CSV string with parent-child relationships, then applies the D3 `stratify` method to structure the data before passing it to the tree layout. The diagram spans the full width and height of the viewport, with margins applied to position the hierarchical structure.

GGavinDiaper

76% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

76% match