stixview

STIX2 graph visualisation library in JS

View the Project on GitHub traut/stixview

Stixview

npm version

Stixview is a JS library for embeddable interactive STIX2 graphs.

[!NOTE]
Hosted version of Stixview is available at CTIChef.com

Stixview graph

Motivation

CTI (Cyber Threat Intelligence) is very much about telling stories. Information becomes intelligence when it is complimented with a context and is placed in a story. These stories are usually crystallised in the reports by an intelligence provider and disseminated to the customers.

If intelligence provider cares about structured machine-readable CTI, the reports produced will be supplemented with STIX2 bundles. There is a gap there between a story, narrated in a report, and a structured CTI snapshot, represented by a STIX2 bundle.

The objective of Stixview library is to provide easily embeddable STIX2 graphs with necessary level of interactivity, so that CTI community can create informative and engaging stories.

Demos

To see Stixview in action, take a look at these demo pages:

Usage

To use Stixview in a browser, download the latest build from dist directory (stixview.bundle.js) and reference it from your HTML file:

<script src="stixview.bundle.js" type="text/javascript"></script>

or use unpkg CDN service:

<script src="https://unpkg.com/stixview/dist/stixview.bundle.js" type="text/javascript"></script>

API

The library relies heavily on data attributes. On page load, Stixview will find all HTML elements with data-stix-gist-id, data-stix-url or data-stix-allow-dragdrop set and use these elements as graph holders.

Example of a graph holder div:

<div data-stix-gist-id="6a0fbb0f6e7faf063c748b23f9c7dc62"
     data-show-sidebar=true
     data-enable-mouse-zoom=false
     data-graph-width=500
     data-graph-height=300>
</div>

Data attributes

Every holder element must have one of data-stix-gist-id, data-stix-url or data-stix-allow-dragdrop set, otherwise it will not be detected by the library.

Stixview supports these data- attributes:

Browser object

The library, when used in a browser, will register stixview variable on window object with these properties:

Graph object

Graph is an object with properties:

Build

yarn build