Stix D3 Force Graph

100%

Stix D3 Force Graph

✓ Published0🌍 Public

Last edited Jun 15, 2023

Created on Jun 12, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph displays 13 nodes and 18 links, using a physical simulation to position the circles and lines in an organic, interconnected layout. The D3 v3 code constructs an SVG scene with `d3.layout.force`, applying a negative charge to repel nodes and a tick handler to update the `x`, `y`, `cx`, and `cy` attributes of the line and circle elements. The graph’s structure is defined by a hard-coded nodes array and links array, representing an abstract network for the visualization.

Mmbostock

77% match

Loading thumbnail…

network representation of data

This interactive D3.js network graph maps IoT device types to their associated attack vectors, using a force-directed layout to position nodes. Nodes represent either devices (orange) or attack types (teal), with links showing connections like a Camera linked to Phishing and Brute Force. The visualization is built with `d3.forceSimulation` and its `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` components, rendered as an SVG with draggable circles and labels. Data is hardcoded in the script, and the color-coding distinguishes device nodes from attack nodes.

Vvenigallajaanu@gmail.com

76% match

Loading thumbnail…

D3 Force-Directed Graph

This example demonstrates a force-directed network layout, visualizing a small set of nodes and their connections with interactive dragging. The graph dynamically arranges connected circles using a physics simulation, cleanly separating linked nodes while repelling them from one another. The visualization is built with D3 v7, using `d3.forceSimulation` together with its `forceLink`, `forceManyBody`, and `forceCenter` components. The SVG output renders nodes as circles with labels and edges as straight lines, with positions updated on each simulation tick. The code also includes a guard that filters out any edges referencing non-existent nodes, ensuring the structure remains valid.

KKhanin Sisaengsuwanchai

76% match

Loading thumbnail…

D3 Force Directed Graph

This force-directed network visualization uses D3’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes in an SVG canvas. It displays a hierarchical dataset from `data.js`, where main nodes (e.g., Gemini, Leo) link to colored child and leaf nodes, with link distances defined per relationship (e.g., `MAIN_NODE_DISTANCE`). Nodes are draggable via D3’s `drag` interaction, and the simulation updates circle, text, and line positions on each tick. Colors come from a Paletton-generated palette in `colors.js`.

AAlbert

76% match

Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775

76% match

Loading thumbnail…

Fork of Akhil- Cyber Attack Elements Network Graph

This network graph maps relationships among cyber-attack elements, showing how assets like servers and databases connect to security devices and network infrastructure through labeled links such as “Protects” and “Hosts.” Nodes are positioned using `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter`, rendered as SVG circles with drag support from `d3.drag`. Arrowheads appear on links via SVG markers. Data originates from CSV or JSON sources, with edge weights and node groupings drawn from the provided files. Background styling and labeled text are defined in the accompanying CSS.

75% match

Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Ttkcj0912

75% match