A visualization used for showing the proportion of traffic volume across different links. Inspired by Vizceral by NetFlix. Most often the particles represent an automatically scaled multiple of real traffic volume. Each link can only create 60 particles per second.
Copyright (C) 2019 Chris Younger. I am a Splunk Professional Services consultant working for JDS Australia, in Brisbane Australia.
This visualisation expects tabular data, with specific field names. There are two kinds of row data that should be supplied: links and nodes. The link data is identified by having both a
to field, or a
path field. The path field is delimited by three hyphens "
---" and can include hops through multiple nodes. The node data will have a node field.
Note that nodes are automatically created.
Shared links will have the fields "good", "warn" and "error" automatically summed together
For the users and loadbalancer rows, a custom label is set, along with a font-awesome icon and the label is moved underneath.
Its an unsual concept to have a single search that produces two different sets of data, however this can be easily performed using append.
For example you can define all nodes and links in a lookup table and append it after all your search data like so:
existing search | append [ |inputlookup my_table_of_nodes_and_links.csv ]
Double click a node disable its manual positioning.
By default, the amount of particles shown is automatically ranged/scaled (using linear interpolation) based on the data supplied. The visualization finds the link that has the largest volume of (good + warn + error) and uses that as the upper bound. The formatter option "Particles" > "Data domain", allows manually defining the range that the data is expected to fall into. The value can be set either as a single value representing the maximum (min will default to 0) or a comma seperated pair of numbers (min,max).
There are no built-in drilldowns with this visualization. If you need a drilldown, enable the "Advanced" > "HTML Labels" formatter option, and then set the "label" data field to include a html "a" tag to link to your required destination. E.g.
existing_query | eval label = "<a href='search?q=" + drilldown + "'>" + node_label + "</a>"
When clicking a node, several tokens will be set (e.g. $click.value$), and logged to the browser console. Hit F12 to open browser developer tools to observe what tokens are being set. If the field drilldown exists on a node, then this value will be used for $click.value$, otherwise it will be the node id.
Attemping to set the various node and link options can lead to a messy SPL query. A neat way to solve this is to build a lookup table of all the nodes and links, and then |append it to the end of your real data. If the same link pair exists in multiple rows, then the "good", "warn" and "error" fields will be summed. For other link customisations such as "speed" and "width" the last set property will take effect.
existing query | append [|inputlookup my_flowmap_config.csv]
Here is an search that will generate a template CSV file called "my_flowmap_config.csv":
| makeresults count=10 | fillnull value="" node from to height radius opacity position icon good warn error color width distance speed labelx labely fromside toside tooltip label | table node from to height width radius opacity position icon good warn error color distance speed label labelx labely fromside toside tooltip | outputlookup my_flowmap_config.csv
||String||An ID of node to use as the source of the link.|
||String||An ID of node to use as the target of the link.|
||String||A series of nodes to link together, seperated by three hypens "
||Number||A value representing the volume of good traffic, which will be normalised (by default) and displayed as particles (the "good" color can be set in the formatting options and defaults to dark green).|
||Number||A value representing the volume of warning traffic, which will be normalised (by default) and displayed as particles (the "warn" color can be set in the formatting options and defaults to orange).|
||Number||A value representing the volume of error traffic, which will be normalised (by default) and displayed as particles (the "error" color can be set in the formatting options and defaults to red).|
||HTML color code||Set the color of the line|
||Number||Set the width of the line|
||Number||Set the length of the line. This field is redundant if you are manually positioning nodes.|
||String||The speed of the particles. Between 1 and 100. Defaults to 90.|
||Number||Offset the label left and right from the centre of the line. Measured in pixels. Negative values move left.|
||Number||Offset the label up and down from the centre of the line. Measured in pixels. Negative values move up.|
||String||Specify a custom attachment point on the source node. See note  below.|
||String||Specify a custom attachment point on the target node. See note  below.|
||String||Specify a custom hover tooltip for the line|
||String||Specify a custom label to occur on the line. If "allow HTML" is enabled in formatter options, this field can contain HTML such as <br/> to create a new line.|
left. Defaults to the centre of the node. The value can also be specified with a modifier (
-) to tune where on that side the attachment occurs. For example: "bottom-10" will attach to the bottom side, 10px to the left of center, "top+20" will attach to the top and 20 pixels to the right of center. When using
pathwith multiple nodes, the
fromsideonly affects the first node and the
tosideonly affects the last node.
||String||The ID of a node. Nodes can be disconnected with no links.|
||Number||A font awesome icon name. From here: https://fontawesome.com/icons?d=gallery&m=free . Defaults to the font-awesome solid icon set (
||String||Set a custom label. If "allow HTML" is enabled in formatter options, this field can contain HTML such as <br/> to create a new line. Defaults to the node ID value.|
||String||Offset the label left and right from the centre of the node. Measured in pixels. Negative values move left.|
||Number||Offset the label up and down from the centre of the node. Measured in pixels. Negative values move up.|
||Number||The height of the node in pixels.|
||Number||The width of the node in pixels.|
||HTML color code||Set the color of the node.|
||Number||Set the border radius in pixels. Set to the same value as the height and width to make the node a circe.|
||Number||A value between 0 (transparent) and 1 (opaque)|
||String||A comma seperated pair of coordinates. First number is the horizontal position and second is the vertical position as a percentage of available space in the frame. Values should be between 0 and 100|
The following third-party libraries are used by this app. Thank you!
* It is now possible to set a data domain (the expected range that data can fall in).
* Fixed inconsistent sort order and added explicity "order" field
* You can now set the width
* Documentation improvements
Splunk AppInspect evaluates Splunk apps against a set of Splunk-defined criteria to assess the validity and security of an app package and components.
As a Splunkbase app developer, you will have access to all Splunk development resources and receive a 10GB license to build an app that will help solve use cases for customers all over the world. Splunkbase has 1000+ apps and add-ons from Splunk, our partners and our community. Find an app or add-on for most any data source and user need, or simply create your own with help from our developer portal.