Skip to main content
SimilarExport ZIP
100%

SFDC Training

✓ Published0🌍 Public
Rriccardost
Last edited Dec 10, 2019
Created on Dec 9, 2019
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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
76% match
Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214
74% 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
74% match
Loading thumbnail…

Radial Tree

This radial tree displays hierarchical data as a branching network of nodes and links radiating from a central root. The visualization uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkRadial` to compute the layout and draw curved edges, with nodes rendered as SVG circles and labels. Interactive links are added via `xlink:href` attributes. The data comes from a `data.json` file containing tasks, health goals, and awards, arranged in a nested children structure. The SVG output is styled with sans-serif fonts and customizable colors, strokes, and node radii.

WWRCIECH
74% match
Loading thumbnail…

Fork of RADIAL TREE 2

This radial tree visualization uses a hierarchical dataset (flare.csv) to display the nested structure of categories like analytics, animate, and query, with each node positioned by angle and radius from the center. The D3.js v4 code constructs the tree using `d3.stratify` and `d3.tree`, then renders SVG paths with `d3.linkRadial` for links and circles with text labels for leaves and internal nodes. The layout is static, with no panning, zooming, or interaction implemented in the visible script.

Ssuvinviswanat
74% match
Loading thumbnail…

Tree

An interactive tree visualization displays a hierarchical dataset from flare.json, with collapsible nodes, color-coded status indicators, and breadcrumb navigation. The right panel shows user and token details for selected nodes. Implemented with React and D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` for pan/zoom, with SVG rendering and animated transitions. Node colors reflect time-based status, and blinking effects highlight urgent items, while the interface supports expanding or collapsing all branches.

Ssrinivasjavvadi
74% match
Loading thumbnail…

RADIAL TREE 2

This radial tree visualization displays a hierarchical dataset from a CSV file, using a circular layout where branches extend from a central root. The visualization supports panning and zooming interaction, allowing users to explore the hierarchy. Built with D3 v4, the code uses `d3.stratify`, `d3.tree`, `d3.linkRadial`, and `d3.csv` to process and render the data as an SVG. Nodes are drawn as circles with text labels, and links are rendered as curved paths with light blue strokes. The tree is positioned within a large SVG canvas, with labels rotated to follow the radial structure.

Nnadia-el
74% match
Loading thumbnail…

Tree Example

An interactive, animated tree diagram displays a static, hierarchical dataset of nodes with names and sizes, such as “node 10” and “root.” Users click nodes to expand or collapse their children, with smooth transitions repositioning nodes and links over 750 milliseconds. Built with D3.js, the example uses `d3.layout.tree`, `d3.svg.diagonal`, and SVG transitions to render the structure, styling circles and paths via CSS. Data is hardcoded in JavaScript, and rendering uses SVG with animation.

YYifu Chen
73% match