Skip to main content
SimilarExport ZIP
100%

Assign 2.7.1

✓ Published0🌍 Public
Ppjdhungana@gmail.com
Last edited Jul 21, 2023
Created on Jul 18, 2023
Forked from Hello VizHub

This visualization displays a hierarchical organizational chart as an animated, collapsible tree. It categorizes the structure into government, non-profit, and private sectors, with color-coded nodes indicating different levels. The code uses D3’s layout tree and SVG rendering, with zoom and drag behavior, plus custom tooltips and link arrows. It also demonstrates ES6 module imports and loading D3 via CDN in a VizHub context.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

assign 2.8: tree

This visualization displays a hierarchical tree of employment sector categories, including government, private sector, and stock market nodes with subcategories like supply-demand and laborer. The code uses d3.tree and d3.hierarchy to compute the layout, then renders the structure as SVG text elements connected by d3.linkHorizontal paths. The dataset comes from data.json, and the visualization includes zoom functionality via d3.zoom. Nodes are de-duplicated and repositioned using underscore.js utilities, with the last root-level branch highlighted in steel blue. Transitions animate node movement using d3 transitions.

Ppjdhungana@gmail.com
86% 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
80% match
Loading thumbnail…

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

VVenkat-Sumith-Thota
80% 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
79% match
Loading thumbnail…

D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical company structure as a collapsible tree diagram, where each node is rendered as a colored box representing different data types such as products, clinical trials, or disease areas. Users can click nodes to expand or collapse branches, with smooth animations transitioning the tree layout. Built with D3.js v3, the visualization uses SVG for rendering, includes zoom and drag functionality via d3.behavior.zoom, and loads hierarchical data from a JSON file. The code also implements custom tooltips and drop shadows to enhance readability of the node information.

1123ATFake
78% match
Loading thumbnail…

D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical company structure as a collapsible tree diagram, where each node is rendered as a colored box representing different data types such as products, clinical trials, or disease areas. Users can click nodes to expand or collapse branches, with smooth animations transitioning the tree layout. Built with D3.js v3, the visualization uses SVG for rendering, includes zoom and drag functionality via d3.behavior.zoom, and loads hierarchical data from a JSON file. The code also implements custom tooltips and drop shadows to enhance readability of the node information.

1123ATFake
78% 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
78% match
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree structure using collapsible rectangular nodes, with each node color-coded by type and labeled with names, versions, and codes. The tree layout is computed with `d3.layout.tree`, and nodes and links are rendered as SVG elements with smooth animated transitions on collapse and expand. The implementation uses D3.js v3 and jQuery, loading hierarchical JSON data, and includes zoom and drag capabilities via `d3.behavior.zoom`. Node colors vary by data type, and tooltips provide additional details on hover.

HHEMANG THANKI
78% match