CRviz: Initial Release
This article was co-authored with Charlie L and Greg S.
This is the third post in a 3-part series about CRviz, a network visualization tool developed by Cyber Reboot.
In previous posts, we discussed the limitations of existing network visualization tools and explained how we designed CRviz, an open source tool that uses an interactive “enclosure diagram” to overcome some of these challenges. In this 3rd post of the series we will provide you with a bit more background about how the tool works and tell you how you can quickly try out a demo or get the tool up and running for yourself.
CRviz runs in your web browser and creates “circle-packed,” hierarchical visualizations, derived from JSON-based data sets. It is primarily written in JavaScript and built using a number of open source libraries including D3.js and React. While we initially designed the tool to display nodes on a network, it is capable of displaying a wide variety of data sets — as long as they are in a JSON format.
CRviz is a client-side application and we designed it to load data via basic file uploads or from a user-supplied URL. Our longer-term goal is to tie CRviz into our Poseidon project so that network administrators can pull real-time and historical views of their networks, but more on this topic in a future blog post!
Getting started with the online demo
If you want to try out CRviz, you have a few options: you can check out the code repo and follow the installation instructions in the readme, or you can click here to get access to a fully working demo.
Let’s start with the online demo version. We suggest running this in Google Chrome, but it should work in a wide variety of browsers.
The online demo of CRviz launches with an empty screen. Your first step (after launch) is to select a dataset to view. We bundled three synthetic datasets in the online demo and you can select one of these from the “Dataset” dropdown menu in the upper left of the screen. The current options have 400, 1400, and 4000 nodes. You can also upload your own JSON file by clicking on the upload button. If you’d like to generate your own test dataset you can use our python “gensynet” (Generate Synthetic Network) tool, which can be found here.
Once you have selected a dataset, the CRviz control panel should be populated with a variety of attribute labels. You can drag and drop these labels onto the “Group by” and “Then by” drop targets to create a hierarchal visualization. These labels are derived from the JSON fields in the data set, and you’ll notice that there is a value in parenthesis next to each label; this value indicates how many unique elements exist in that attribute. For example, in our 1400 node test dataset the “OS” label has a (9) next to it, indicating that there are 9 different OS types in this particular dataset. We included these counts because they provide initial insight into what attributes might make sense to group by, and which ones probably won’t. (Pro tip: Grouping by 1400 MAC addresses might not be very useful, but grouping by 10 network subnets could be.)
Let’s look at two examples using the same 4000 node data set:
You can continue to create additional levels of hierarchy by dragging and dropping labels into the “Group By” and “Then By” fields. We have typically found diminishing returns when grouping past four levels, but of course, this varies by dataset. Below the grouping section in the side bar, “show nodes” (default is: ON) is a toggle that flips between displaying nodes vs. counts of nodes. This is useful when dealing with a large number (i.e. thousands) of items in a given grouping where looking at numerical counts might simply be easier. Below “show nodes” is “Use dark theme,” which you should try if for no other reason than it makes things looks cool(er)!
Finally, you can also add one more layer of information to the visualization by using the “Color by” drop down at the bottom of the navigation bar. In our initial release the color palette is automatically assigned, but we may allow users to select their own colors in future versions.
Hosting your own version of CRviz
As noted earlier, CRviz is a client-side (browser-based) application. If you want to stand up your own version we have two recommended paths: one with Docker, and one without.
To build and run using Docker:
1. Run the following command:
docker run -dp 80:5000 cyberreboot/crviz2. Point your browser to http://localhost
Without Docker, we recommend that you:
- Install yarn
- Run the following commands:
git clone https://github.com/CyberReboot/CRvizcd CRviz
3. Run the following commands:
yarn installyarn run buildnpm install -g serveserve -s build
4. Point your browser to http://localhost:5000
Below is an example JSON host object that we’ve used for our demo data, which can also be automatically generated using the gensynet script. You should also feel free to play around with your own datasets — CRviz is quite flexible in this regard!
The path ahead
In this first release of CRviz we have shown how enclosure diagrams can be used to visualize thousands of nodes in a computer network. While the current version of CRviz has only a very basic level of functionality, we believe the fundamental approach works with different types of data and can scale to much larger volumes.
Over the coming months we will be prioritizing additional functionality to add to the tool. Should we add comparison features, to help see changes in datasets over time? Should we focus on displaying relationships between nodes? Should we build functionality to overlay other data sets (e.g. vulnerability data) on top of an existing “base layer?” We need your input! Drop us a line at collaborate @cyberreboot.org, tweet us @_cyberreboot, or share your thoughts below.
But above all else, we hope you give the demo a spin — let’s help the community move beyond force-directed graphs!
