Fork of OS-Threat UI v2

100%

Fork of OS-Threat UI v2

✓ Published0🌍 Public

Last edited Jul 1, 2024

Created on Jul 1, 2024

This interactive cybersecurity data visualisation presents a threat analysis dashboard where users explore hierarchical data structures in an index tree view and modify a two-level network graph in a working pane. The interface offers dataslice radio buttons to switch among threat categories (sighting, event, impact, etc.) and theme toggles for light or dark modes. The tree view uses D3.js `tree()` layouts with animated expand/collapse transitions, while the working pane leverages `d3.zoom()` and `d3.forceSimulation` to support drag, pan, and context-menu interactions on the force-directed graph. Data is loaded from local JSON files containing STIX 2.1 objects and relationships, rendered as SVG elements with dynamic node icons and labels.

AI-generated description

Note: V2 differs in two ways,

The working pane is 2 svgs, instead of 3,
The number of js files are reduced and file import process simplified to one for the tree view and one for the working panel, rather than 3

This UI has four groups of elements in bootsrap columns, horizontally across the page: Column 1. Treeview Dataslice Radio buttons Column 2. Cybersecurity treeview Column 3. Working Pane - A two level Working Pane, with the 'Scratchpad' below Column 4. Working Pane buttons - still to do

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of OS-Threat UI

A fork of the OS-Threat UI renders STIX 2.1 threat intelligence data as a collapsible indent tree in a left panel, with a separate working panel for graph exploration. The tree uses d3.tree, d3.hierarchy, and custom SVG icons to display entities like sightings, indicators, and identities, while a context menu (d3.event.preventDefault) offers node actions. The working panel applies d3.zoom for panning and scaling, and button controls switch between data categories loaded from JSON files.

MMax Barrass

92% match

Loading thumbnail…

OS-Threat UI

OS-Threat UI is an interactive D3.js v7 visualization that renders organizational threat data as a hierarchical tree in a left panel, with SVG-based rendering and animated interactions. The example uses a context menu system to display threat intelligence from companyIndex.json, where nodes represent entities like organizations, hardware assets, and software systems with associated metadata such as roles, sectors, and external references. The visualization supports dynamic interactions, including custom right-click context menus with actionable menu items, and is designed to explore identity-based relationships within a company's digital infrastructure. Built with a modular structure and MIT license, it demonstrates how D3 can handle complex hierarchical data with interactive UI elements in an animated SVG environment.# OS-Threat UI ## Interactive Threat Intelligence Visualization This D3.js v7 visualization presents a hierarchical security-threat intelligence explorer for organizational asset and system mapping. The interface uses a collapsible tree structure rendered as an SVG left panel, enabling analysts to navigate complex identity and infrastructure relationships. **Visual Structure:** The tree visualization organizes STIX 2.1 identity data into nested, icon-labeled branches—from organization through company assets (e.g., hardware) and systems (e.g., software servers) down to individual asset nodes, with edges clearly annotated (asset-of, system-of). **Interaction:** Built with D3's drag and event handling, the tree supports dynamic context menus. Right-clicking a node opens a custom context menu, demonstrating how interactive D3 elements can enhance data exploration. **Design choices:** Node icons distinguish assets from systems, while color-coded edges clarify relationship types. The use of indented hierarchy preserves data lineage. **Data-ink efficiency:** The left-panel tree layout minimizes chart clutter while enabling deep dives into asset details via the context menu, making complex relationship data accessible at a glance. --- Please create a concise description (under 100 words) of the above data-visualization example for a gallery.**OS-Threat UI** is an interactive D3.js visualization that maps organizational assets and systems through a hierarchical tree view. Built with D3 v7 and SVG, it presents company infrastructure as an expandable, animated tree in a left panel. The data—sourced from a structured JSON index—shows company assets (like hardware) and systems (like software servers) with nested detail. Users can explore nodes and trigger context menus for further actions. The clean, icon-based design supports quick visual scanning of infrastructure relationships, making it a practical reference for security operations dashboards and asset management interfaces.

Bbrett@cloudaccelerator.co

86% match

Loading thumbnail…

Fork of Temp 2 Level

This visualization displays a STIX 2.1 cyber-threat intelligence graph, separating objects into two panes: “Promotable” and “Scratch Pad.” It uses D3 v7 to render SVG nodes and edges, with zoom and drag interactions. The graph is built from a JSON file containing software, file, process, and user account entities. The visualization supports theme switching between light and dark modes, with configurable colors for edges, labels, and SVG backgrounds.

Bbrett@cloudaccelerator.co

80% match

Loading thumbnail…

Fork of Temp 2 Level

A D3.js visualization splits STIX 2.1 cyber-threat data into two panes: a "Promotable" area for incident-related nodes and a "Scratch Pad" for other objects like files, processes, and user accounts. The graph renders with SVG, using `d3.forceSimulation` for layout and `d3.zoom` for panning, while node colors and edge colors adapt to light or dark themes loaded from JSON config files. The code imports data from `scratch.json` and draws icons for each object type on rectangular nodes.

Bbrett@cloudaccelerator.co

78% match

Loading thumbnail…

Temp 2 Level

This visualization presents a cybersecurity investigation interface using D3.js v7, organizing STIX 2.1 objects into two interactive panes: a "Promotable" area for objects that can be promoted and a "Scratch Pad" for other types. It builds an adjacency graph from JSON data, rendering nodes and edges in SVG with a force simulation. Users can drag and zoom between the panes, with theme-based styling and tooltips providing object details.

Bbrett@cloudaccelerator.co

76% match