Skip to content

JDHooker/CYBERSPAN-Scrolling-Data-Visualization

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CYBERSPAN Scrolling Data Visualization

This is the code for a scrolling data visualization that gives a high-level overview of CYBERSPAN.

See the actual scrolling visualization page.

Created by John - Summer 2025.

Description

Scrollama Logo D3 Logo

This repository uses Scrollama for page tracking to be able to determine when in the page triggers should be happening in the JavaScript and D3 for the visualization animation. As the user scrolls through the webpage, the interactive visualization updates to show the user the high level ideas of what happens with CYBERSPAN, a product by IntelliGenesis. The steps of the visualization and webpage are meant to show:

  1. A greyed out network graph.
  2. A colored network graph with labels. The user can hover over the text to see those devices highlighted on the network graph.
  3. A coloring of the internet node.
  4. Normal packet communications represented by blue inbound traffic.
  5. Mix of normal and anomalous communications represented by random blue or red inbound traffic.
  6. Insertion of CYBERSPAN into the network with labels reappearing. Normal packet communications continue with blue inbound traffic and mirroring to CYBERSPAN as it passes through the node representing "Switch 1".
  7. Mix of normal and anomalous communications respresented by random blue or red inbound traffic with CYBERSPAN getting all mirrored traffic and alerting when there is anomalous traffic.
  8. Blinking colors on all nodes and then only CYBERSPAN repeatedly to demonstrate the agentless property of CYBERSPAN.
  9. Buttons to CYBERSPAN and IntelliGenesis to learn more.

Scrolling Visualization Demo

Vertical Demo

When the window is resized to be small enough (<1200 px in width), the visualization will display behind semi-transparent steps. The user can also scroll up the page to see visualizations again, although after the CYBERSPAN insertion into the network, CYBERSPAN stays in the network (even for the previous steps). In addition, once the user reaches the buttons at the end, they will be required to reload the page to get the visualization portion back.

Usage

To locally view, start an http server with python -m http.server or any other simple http-server hosting method.

Other

About

Scrolling Data Visualization describing the CYBERSPAN project from IntelliGenesis.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors