Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aandrew-menendez
Last edited Jun 2, 2018
Created on Jun 2, 2018

An interactive organizational chart displays a company’s departments and employees as a collapsible tree. The D3 v4 tree layout arranges nodes vertically by depth, with circles and text labels styled by department or person. Clicking a node expands or collapses its children using the `d3.hierarchy` and `update` functions. The SVG animation transitions nodes and links smoothly, and jQuery displays selected employee names and locations in a separate info panel.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A collapsible hierarchical tree diagram displays the structure of analytical customer data records, organized into nested categories such as raw and derived attributes. The visualization uses the D3.js v3 library with its tree layout and diagonal path generator to render SVG nodes and links. Clicking a node toggles its children, animating the expansion and collapse with transitions. The data is loaded from the dendogram.json file.

DDAVINDER
84% match
Loading thumbnail…

fresh block

A tree diagram displays hierarchical data with rounded rectangular nodes and connecting curved links, all rendered in a clean white-and-steelblue palette. The visualization uses D3 v4 to generate the layout, with each node labeled by text and positioned via an external vertical_tree.js script. The code loads D3 from a CDN and applies CSS styling to define node fills, strokes, and link thickness. The example demonstrates a static, non-interactive tree structure, relying on D3's core selection and data-join methods rather than force simulation or animation.

JJoseEduinCulmaCaviedes
82% match
Loading thumbnail…

fresh block

A collapsible tree visualization displays a hierarchical document structure, with nodes representing items in an "ETO Document Suite." The visualization uses D3.js v3 to render SVG nodes and links, with collapsible branches and a text input to filter or reset the tree to its root. Animated transitions smooth node expansion and collapse. The tree layout uses `d3.layout.tree` with a diagonal path generator, and the data source is a static array of parent-child pairs. Hover tooltips and custom styling are included, while a fixed logo and header image are embedded via SVG image elements.

FFraserMacMillanGithub
82% match
Loading thumbnail…

fresh block

This example shows a hierarchical tree of analytical data categories, such as CAR, B2B, and CUSTOMER PROFILE, with branches like RAW and DERIVED leading to detailed attribute names. It renders the structure using SVG circles and links, with d3.v4's tree layout and animated transitions. The data is embedded directly in the source code as a JavaScript object, and node labels use a 10px sans-serif font.

DDAVINDER
81% match
Loading thumbnail…

fresh block

An interactive red-on-white dendrogram visualizes a hierarchical JSON dataset from `turbo.json`. Clicking a node collapses or expands its children. The tree uses `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Animated transitions via `d3.select(...).transition()` reposition nodes and links when branches open or close. Leaf nodes with URLs render as clickable text anchors.

HHamishWoodrow
81% match
Loading thumbnail…

org chart

This org chart visualizes a small hierarchical team structure using D3.js v4. It shows a collapsible tree where clicking a node toggles its children in and out of view, with smooth transitions on expand and collapse. The chart renders nodes as rectangles connected by vertical curved links, using `d3.tree()` with custom node spacing and `d3.linkVertical()` for the paths. The data originates from a hardcoded JavaScript object representing staff relationships. A zoom transform is applied via `d3.zoom()`, allowing pan and scale gestures on the SVG container.

DDlanka
79% match
Loading thumbnail…

D3 Org Chart Example

This D3.js org chart visualizes a small organizational hierarchy as an animated tree. Built with D3 v3 and rendered as SVG, it loads a JSON dataset describing a manager and direct reports. Nodes are initially collapsed to their first level and expand on click with a 750ms transition. The layout uses a standard tree with curved diagonal links, fixed node depth, and distinct styling: white circles with steelblue strokes for leaf nodes, lightsteelblue for expanded parents, and left-aligned or right-aligned text based on whether a node has children. The interaction supports progressive disclosure, expanding and collapsing branches on demand.

DDesaiNikul
79% match
Loading thumbnail…

Fork of Collapsible Tree Version 3

This fork of the collapsible tree example displays a hierarchical organizational chart with three top-level departments, each containing management and junior-level roles. D3 v4’s tree layout positions nodes horizontally, with expandable and collapsible branches triggered by clicking circle markers. Node positions animate smoothly via `transition()` over 750 milliseconds, using diagonal path curves for links. The visualization loads role data from a local array, renders as SVG, and distinguishes collapsed nodes with a lightsteelblue fill, while text labels use the `d3.hierarchy` API to manage nesting and depth.

BBoyka
78% match