Skip to main content
SimilarExport ZIP
100%

Fork of Brett's Type Refinery D3v4 and Webcola Controls

✓ Published1🌍 Public
Bbrett@cloudaccelerator.co
Last edited Mar 24, 2024
Created on Mar 23, 2024

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.

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…

Brett's Type Refinery D3v4 and Webcola Controls

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.

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

Fork of Fork of Fork of Let's make a face with D3.js!

This example builds an interactive OS-threat dashboard using D3.js v4 and WebCola, visualizing a force-directed network graph of characters from *Les Misérables*. Users can toggle between sightings, tasks, impacts, events, and company/me views, and switch node shapes between rectangular, round, or empty styles. The graph is rendered as an SVG, with the layout constrained by the WebCola library to manage node positions and minimize overlap. Bootstrap styles provide the UI chrome, while a tooltip div offers contextual feedback. The visualization demonstrates how D3 can integrate with external layout libraries and dynamic UI controls to create a functional, multi-view network exploration tool.

Bbrett@cloudaccelerator.co
74% match
Loading thumbnail…

Fork of Collapsed Combination 2

This example visualizes a heterogeneous graph of entities, attributes, and relations, representing trace records and their associated data. Nodes are color-coded by type—entities in blues, attributes in oranges, and relations in blue-green—with a force-directed layout managed by WebCola’s `cola.d3adaptor`. The graph is rendered as SVG rectangles and lines, with D3 v4 handling zoom and pan interactions. Color themes are loaded from a JSON palette file, and the visualization supports grouping of related nodes into collapsible sessions.

Bbrett@cloudaccelerator.co
74% match
Loading thumbnail…

stix-viz

This example shows an interactive network graph of STIX entities and attributes, where nodes represent events, logs, and properties from a JSON data source, and links indicate relationships. The visualization uses D3.js v6 with a force-directed layout (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`) to position nodes, and SVG rendering to draw rectangles and text labels. Users can right-click a node to open a custom context menu (`createContextMenu`) with placeholder actions, and the graph supports zooming via `d3.zoom`. Node shapes and colors distinguish entity, attribute, and relation types.

Bbrett@cloudaccelerator.co
73% match
Loading thumbnail…

WebCola Test

This example demonstrates a WebCola constraint-based graph layout applied to a small set of unattached STIX threat-intelligence entities, including a software, file, and process node. The visualization partitions the SVG canvas into three horizontal bands representing promoted, attached, and unattached categories, using fixed boundary nodes and separation constraints to keep nodes within their designated regions. The code loads data from a JSON file via D3’s `json` method and uses WebCola’s `d3adaptor` for simulation, with SVG rectangles drawn for the region boundaries.

CCurran Kelleher
73% 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…

Unconstrained WebCola!

This example uses WebCola’s constraint-based layout to render a graph of entity, attribute, and relation nodes from a JSON dataset, with SVG rectangles and text labels colored by type. The code leverages the `cola.d3adaptor` with `symmetricDiffLinkLengths` and `start` to drive the force-directed simulation, while node dimensions adapt to label bounding boxes via `getBBox()`. Rendering is handled through D3 v4 selections, with zoom and drag interactions enabled.

Bbrett@cloudaccelerator.co
72% match