Fork of TERGAR TRAINING - 2

100%

Fork of TERGAR TRAINING - 2

✓ Published0🌍 Public

Last edited Apr 20, 2022

Created on Apr 20, 2022

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.

AI-generated description

Training Material interactive visualization

MIT Licensed

Similar vizzes

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

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

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

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

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

79% match

Loading thumbnail…

Fork of a model

This visualization presents a hierarchical dataset as an indented tree layout rendered with SVG. The root node, labeled "bruh," branches into a deep structure of numeric values, and each node displays its name as text with a font size that decreases with depth. The code uses d3.hierarchy and d3.tree to compute the layout, while linkHorizontal generates the curved paths connecting parent and child nodes. Pan and zoom interactions are enabled through d3.zoom, applying transforms to a group element. The styling uses a green stroke for links, a serif font, and text shadows for readability. Data is loaded from the JSON file data.json.

JJavaDummy4

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

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