Skip to main content
SimilarExport ZIP
100%

Fork of Fork of TERGAR TRAINING -Intro_to_meditation

✓ Published1🌍 Public
NNita
Last edited Apr 30, 2022
Created on Apr 30, 2022

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.

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
85% 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
84% 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
80% 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
79% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Tree 7

This interactive tree diagram displays a hierarchical dataset loaded from a local JSON file, showing the root node “Ganne” branching into descendants with clickable nodes. The visualization uses D3.js 3.5.17’s tree layout and SVG rendering with animated transitions. Node positions compute via `d3.layout.tree`, while clicking toggles children visibility using a collapse/expand function. The code employs `d3.svg.diagonal` for curved links, styled with green circular nodes and gray paths, and updates nodes with smooth 1100-millisecond transitions.

DDivyaVellanki
75% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Tree 7

This interactive tree diagram displays a hierarchical dataset of names, with nodes that can be clicked to expand or collapse their child branches. The visualization uses D3.js version 3.5.17, employing the `d3.layout.tree` API to compute node positions and `d3.svg.diagonal` to draw curved links between parent and child nodes. Nodes transition smoothly over 1100 milliseconds using D3's `.transition()` method, while SVG circles and text labels represent each entry. The data comes from a local JSON file loaded via `d3.json`, and the entire graphic is rendered as an animated SVG.

Yyaswanthsen
74% match
Loading thumbnail…

Fork of Fork of Fork of Tree 7

This interactive tree diagram displays a hierarchical genealogy of names loaded from a JSON file, with nodes and links rendered as an SVG. Users can click any node to collapse or expand its subtree, triggering smooth animated transitions of the layout. The visualization uses D3.js version 3.5.17, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs, with node positions calculated and updated via the `update` function on each interaction. Styling is defined in a linked stylesheet, and the example is presented as an animated, self-contained web page.

Hhappymail6
74% match
Loading thumbnail…

Fork of Fork of Fork of Tree 7

This example presents an animated, interactive tree diagram built with D3.js. It visualizes a small hierarchical JSON dataset starting from a root node, with branches expanding three levels deep. Users can click any node to collapse or expand its children, triggering smooth transitions of the SVG paths and circles. The layout uses `d3.layout.tree` and `d3.svg.diagonal` for the curved links, with nodes repositioned over a fixed horizontal depth. The rendering relies on SVG elements and timed transitions via `.transition()` with a set duration.

Ffkukcha
73% match