SEDKI91

@SEDKI91·7 public vizzes

Untitled

This example visualizes a force-directed graph using Chart.js with a custom controller, rendering nodes and edges on a canvas. The graph displays character relationships from *Les Misérables* (the classic `tree.json` dataset), with steel-blue circular nodes labeled by character name and connected by weighted links. Users can switch between dendrogram, tree, and radial layouts via dropdown menus, while the Chart.js zoom plugin enables panning and zooming with mouse wheel or pinch gestures. The code integrates Chart.js 3.9.1, ChartDataLabels for annotations, and Hammer.js for touch support.

Sep 28, 2022

Loading thumbnail…

Fork of Fork of Tree with rectangular links

This interactive tree diagram visualizes hierarchical data from a JSON file, using rectangular links to connect parent and child nodes. The visualization is built with D3 version 6, employing the `d3.cluster` algorithm for layout and custom SVG path generation for the orthogonal edges. Users can click on individual nodes to expand or collapse their subtrees, triggering smooth animated transitions that reposition the remaining elements. The diagram displays node labels alongside colored rectangles indicating whether each node has children, with the viewport automatically adjusting to fit the current layout through transitions.

Mar 29, 2022

Loading thumbnail…

Fork of Interactive Tree Updated

This interactive tree visualization displays hierarchical product data, with nodes representing product categories and leaves showing individual items. Users can click nodes to collapse or expand branches, revealing or hiding child elements with animated transitions. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to position nodes and draw curved links, while `zoom` enables panning and scaling. Node rectangles display labels, and the underlying dataset includes KPI metrics like turnover and reference counts, though only the tree structure and labels are rendered visually.

Mar 28, 2022

Loading thumbnail…

Fork of Fault Tree

A fault tree diagram visualizes logical relationships between system failure events. Non-root nodes display gate shapes—AND gates appear orange, OR gates blue, with circles and triangles for basic events—connected by orthogonal links. The implementation uses GoJS Diagram and TreeLayout with custom node templates that dynamically bind shape, fill, and rotation based on data. An included SVG figure set defines the gate geometries, and interactive features include tree dragging, expander buttons, and undo/redo management.

Mar 28, 2022

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This example shows a collapsible tree diagram where each node is a colored box with wrapped text, representing hierarchical company data from a JSON file. The visualization uses D3.js v3 with `d3.layout.cluster` and `d3.behavior.zoom` to enable panning and zooming, while jQuery supports tooltip interactions. Node colors correspond to different item types (type1 through type5), and clicking nodes toggles the expansion of their children. The SVG is rendered with custom CSS for box styling, arrows, and selectable links.

Mar 28, 2022

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive tree visualization displays hierarchical data with expandable and collapsible nodes. Each node appears as a colored box with text labels, while links connect parent and child nodes with directional arrows. The example uses D3.js v3 and jQuery to load JSON data and render the tree as an SVG. The implementation relies on the `d3.layout.cluster` API for tree layout and includes interactive features such as zooming and dragging via `d3.behavior.zoom`. Node colors correspond to the `type` field in the data, distinguishing four categories.

Mar 28, 2022

Loading thumbnail…

Fork of Collapsible Tree Version 1

This interactive visualization shows a hierarchical tree of product data from a flare-2.json file, with nodes representing different levels labeled as "LVL__" and colored blue. Users can click nodes to expand or collapse their children, with animated transitions smoothly repositioning the tree. The tree layout uses d3.cluster() with horizontal links drawn via d3.linkHorizontal(), while d3.zoom() enables panning and zooming across the large 3000-pixel-tall SVG canvas. Each node includes a rectangle with text labels and transitions between states using .transition() and .attrTween() for smooth animation.

Mar 28, 2022