Skip to main content
SimilarExport ZIP
100%

Brett's Type Refinery D3v4 and Webcola Controls

✓ Published4🌍 Public
Bbrett@cloudaccelerator.co
Last edited Apr 2, 2024
Created on Mar 14, 2024
Forked from Example OS-Threat

Brett's Type Refinery D3v4 and WebCola controls is an interactive graph and tree visualization using D3.js v4. It displays a collapsible hierarchical tree of STIX 2.1 threat intelligence objects, with webcola force-directed layouts for promoted and attached relationships. Users switch between tree indices via radio buttons, and d3.drag() enables node repositioning while d3.zoom() supports canvas panning. The interface includes right-click context menus and animated transitions for tree updates.

AI-generated description

This is a basic left panel with a tree view in it, based on data slice type

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Brett's Type Refinery D3v4 and Webcola Controls

This visualization presents an interactive entity-relationship browser for STIX 2.1 identity data, rendered as a force-directed graph with WebCola constraints. A left panel provides a collapsible tree view of the data hierarchy, while clicking nodes reveals a context menu with actions. The graph uses D3 v4 with WebCola layout to position nodes representing identities, assets, systems, and users, with edges indicating relationships like "asset-of" and "user-of." Hover and click interactions animate node details, while the context menu enables dynamic inspection of underlying STIX objects. Built with SVG and animation, the example demonstrates integration of D3's drag behavior with WebCola's constraint-based layout for exploring hierarchical identity data.

Bbrett@cloudaccelerator.co
87% match
Loading thumbnail…

Fork of Brett's Type Refinery D3v4 and Webcola Controls

This example demonstrates a network diagram of interconnected nodes and links, highlighting the relationships between data elements. It shows a dynamic graph where nodes are positioned using the `d3.forceSimulation` layout, with drag-and-drop interaction enabled through WebCola’s constraint-based optimization. The visualization uses D3v4 to render SVG paths and transitions, while WebCola manages link distances and node alignment for a tidier layout. The code leverages `d3.drag` and `simulation.alphaTarget` to handle user interaction, with the data source being a predefined JSON array of nodes and edges. The result is a responsive, zoomable graph that balances force-directed clustering with readable spacing.

22470008471@qq.com
82% match
Loading thumbnail…

Trial WebCola with G!

This example demonstrates an interactive graph visualization using WebCola for constraint-based layout and D3 v4 for rendering, with React as the framework. It displays a network of entities, attributes, and relations as rounded rectangles and circles, color-coded by type, with SVG text labels for node names and IDs. The force-directed layout is managed by `cola.d3adaptor`, while `d3.zoom` enables pan and zoom, and `cola.drag` supports node manipulation. Data is loaded from a local JSON file, rendering as an SVG with styling applied through CSS classes.

Bbrett@cloudaccelerator.co
72% match
Loading thumbnail…

Collapsible Tree

This interactive tree diagram visualizes hierarchical data from the flare library using a Reingold–Tilford layout. Nodes represent categories and leaves represent individual modules, with circle marks sized by a numeric value and colored by depth. Clicking a node expands or collapses its children with a smooth animated transition, implemented in D3 v3 with SVG rendering. The layout updates the tree’s horizontal positioning to reflect the current set of visible nodes, keeping the visualization tidy and readable.

663anp3ca
71% 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
71% match
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive collapsible tree visualization displays hierarchical data from a JSON file, with each node rendered as a colored rectangle based on its type. The tree expands and collapses with animated transitions when users click on nodes, allowing exploration of the family-styled dataset with labeled links and directional arrows. Built with D3.js v3 and jQuery, the visualization uses SVG for rendering and supports zooming and panning through custom behaviors. Node colors correspond to four distinct data types, while link colors change when selected. The code implements breadth-first traversal for dynamic sizing and collision detection.

NNaimisha-M
71% match
Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree with collapsible nodes, where each node is rendered as a colored box representing different data types. The tree supports zooming and panning through mouse interactions, with tooltips appearing when hovering over nodes. Built with D3.js v3 and jQuery, it uses the `d3.layout.tree` algorithm to position nodes and SVG for rendering, with animated transitions on node expansion and collapse. The example loads hierarchical JSON data containing nested objects with properties such as node name, type, and version, and color-codes nodes based on their type values.

Jjpl-web
71% match
Loading thumbnail…

Collapsible Tree

This interactive collapsible tree visualizes the hierarchical structure of the Flare dataset, displaying nodes as circles connected by curved links. Users can click any node to expand or collapse its subtree, with smooth 750-millisecond transitions animating nodes and links between positions. The visualization uses D3 v3's `d3.layout.tree` to compute positions, `d3.svg.diagonal` for link paths, and SVG transitions to update the scene. Node colors change from white to lightsteelblue when children are hidden, and the root collapses all branches initially. Text labels position dynamically based on whether a node has visible or hidden children.

Mmbostock
70% match