Skip to main content
SimilarExport ZIP
100%

stix-viz

✓ Published0🌍 Public
Bbrett@cloudaccelerator.co
Last edited Jun 11, 2023
Created on Jun 11, 2023

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.

AI-generated description

A bare minimum d3 page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stix D3 Force Graph

This interactive network graph visualizes relationships between cybersecurity threat entities, such as malware, campaigns, and attack patterns, derived from a STIX JSON file. The example uses a force-directed layout driven by D3's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces. Nodes are rendered as SVG circles, edges as lines, and a Bootstrap dropdown menu offers alternate icon shapes. The graph supports dragging and double-clicking to pin or release nodes, with zoom functionality applied to the SVG group.

Bbrett@cloudaccelerator.co
80% match
Loading thumbnail…

d3v4 try

This example demonstrates a force-directed network graph rendered with SVG, where nodes represent entities, attributes, and relations from a JSON graph dataset. Users can zoom and pan the visualization, and right-clicking a node opens a custom context menu with actions. The implementation uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter for layout, while nodes are styled as colored rectangles or small shapes based on their type. A React starter framework and d3.v4 APIs handle dynamic sizing and positioning of shapes and text labels.

Bbrett@cloudaccelerator.co
74% match
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
73% match
Loading thumbnail…

STP Network

This example visualizes a network of experts and their associated strategic technology topics (STPs) using an interactive force-directed graph. Users can toggle between a bubble chart and a network view with a button, and drag nodes to explore connections. The visualization employs `d3.forceSimulation` with charge, center, and collision forces to position nodes, while a zoom behavior allows panning and scaling. Node colors are assigned via a `d3.scaleOrdinal`, and the data originates from a nested JSON hierarchy processed with `d3.hierarchy`.

DDaniel
72% match
Loading thumbnail…

Try the d3 only

This example demonstrates an interactive entity-relationship graph visualization for log data, using D3 v4 within a React framework. Users can toggle between different view modes with buttons, including showing attributes, disconnecting attribute nodes, displaying groups, and applying constraints. The visualization renders as an SVG with a force-directed layout, where nodes are colored according to a theme loaded from a JSON color palette. The graph data structure comes from a JSON file containing schema types, links, and constraints, while the layout and interactions are driven by D3’s force simulation and zoom behaviors.

Bbrett@cloudaccelerator.co
72% match
Loading thumbnail…

plot

This example demonstrates interactive chart rendering with React and D3, adapting a force-directed network visualization where nodes are positioned and connected by links. Using `d3.forceSimulation` with collision detection and centering forces, the visualization updates node coordinates on each tick, with SVG circles and lines rendering the graph structure. The React component manages state for the simulation and uses hooks to synchronize the D3 force layout with React's rendering lifecycle. Node positions respond dynamically to simulated physics, allowing users to observe the network stabilizing from an initial random layout.

SStefan Apostol
71% match
Loading thumbnail…

ZTLCSTN

This example visualizes a graph dataset with force-directed layout, rendering nodes as circles with labels and links as connecting lines within an SVG canvas. It uses D3.js v6 with the `d3.forceSimulation` API for physics-based positioning, incorporating forces like link attraction, many-body repulsion, and centering, while enabling interactive drag and zoom through `d3.drag` and `d3.zoom` behaviors. The graph data is prepared by mapping coordinate fields, filtering inactive or broken links, and then animated in real-time as the simulation ticks update node and link positions.

MMax Davydenko
71% match
Loading thumbnail…

Fork of Data visualization ICE-8 Social network

This example visualizes a social network as an interactive force-directed graph, showing friendships between named people. The SVG rendering uses D3 v6’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while draggable circles and text labels represent individuals. Links are drawn as red lines with arrow markers, and hovering highlights a node’s border. The data, loaded from `data.json`, specifies nodes and links with relationship types and values, with all links sharing a uniform blue fill and green stroke styling.

Vvamshisoletii
71% match