The network chart mod visualizes relationships and connections between data points. It is highly useful in viewing data where multiple types of relationships may exist between data. By providing a visual and interactive network representation of these data which can be panned, zoomed and highly configured, you are able to do in-depth analysis of relationships in data.
This network chart is a force-directed chart which means it simulates forces between the network nodes in order to render a visually appealing and understandable representation of a network.
Network charts have many use cases such as analyzing connections between people i.e. through online, social and physical interactions, analyzing products, trends and impact i.e. marketing and sales, detecting fraud, analyzing processes, data correlation and even providing explainability in data science and machine learning models.
Data Requirements
Every mod handles missing, corrupted and/or inconsistent data in different ways. It is advised to always review how the data is visualized.
To make the network chart mod work properly, the underlying data must be formatted in a certain way. A data table with at least two columns is required. One column should contain the nodes i.e. the items that will appear as nodes in your network i.e. people, objects etc. The second column should contain the name of the node this is connected to i.e. has a relationship to. These are defined as Source and Target in the network chart properties.
Setting Up the Mod
In this example dataset, we have three columns: Node, RelationTo and Score.
Node | RelationTo | Score |
---|---|---|
Mammal | Cat | 8 |
Mammal | Dog | 20 |
Dog | Labrador | 12 |
Dog | Collie | 30 |
Fish | Salmon | 6 |
Fish | Trout | 8 |
Collie | Bearded | 17 |
Collie | Border | 28 |
In the network chart configuration in Spotfire we would specify the 'Node' column from the data table above as our Source, and 'RelationTo' column as our Target.
This results in a network where both Dog and Cat will be connected to the Mammal node. However, we can see from the data above Dog is also a node, so Labrador and Collie will be connected to the Dog node. Further to this Collie has two relations to Bearded and Border. Fish only has two connection (to Trout and Salmon), so only two relations/connections will be drawn to the Fish node.
The network chart automatically generates all the necessary connections by analyzing the full dataset passed to it as in the example above. For example, notice that Bearded and Border are not in the Node column but are part of the network. The network chart detects this and will create nodes automatically required to render the entire network.
Note that you can provide multiple columns for Source and/or Target. This allows creation of relationships based upon multiple columns.
To see an example of network chart in Spotfire using the data above, please refer to the download available on the wiki page.
Configuring the Mod
After setting the data table, and Source and Target settings to tell the network chart how the data is connected (as described above), there are numerous options to configure the network chart's appearance and behavior. These are detailed below however please read this warning first:
WARNING
All calculations such as Avg (Average) and Sum will be applied after splitting the data by all categorical axes. This means any aggregation will be applied after splitting the data by Source and Target. However, if Color, Other Color, Additional Columns, Label By, Label Color By, End Node Color By are specified as categorical i.e. strings rather than numbers, then these will also be used to group the data. It is recommended to use OVER statements to ensure your aggregations behave as expected.
The recommended resolution is to either:
Create a calculated column in your data table that creates the necessary values per node you want to use. For example, you may average a score over your 'Source' column. Or use an OVER expression in the axis expression for the network chart. An example would be:
Avg([score]) Over (Intersect([Axis.Source],Parent([Axis.Target])))
This would result in an average score per Source rather than an average score per Source and Target. If you include other categorical axes, then these need to be added also. For example if Other Color axis is specified:
Avg([score]) Over (Intersect([Axis.Source],Parent([Axis.Target]),Parent([Axis.OtherColor])))
Nodes and Connections
All options below are optional. Any setting which has no value set will use the default from the network chart.
- Size By: A numerical column or value which determines the size of the node
- Color By: Standard Spotfire control for settings the color for each node or connection (see Using the network chart below for more details on how color is applied)
- Line Width: A numerical column or value that determines the width of the line connecting two nodes
-
Other Color: A HTML hex code or color to be used to color either the node or line connecting two nodes. For example, you can use an expression like if
([some_Column]=="A", "red", "blue")
which will color any row red where the column; SOME_COLUMN has a value of A. All other columns will be colored blue. See Using the network chart below for more details on how Other Color is applied.
Node Labels
- Label By: These are the labels that will be displayed beside each node. Multiple columns can be used. If no column is specified, the network chart defaults to the Source value.
- Label Size By: A numerical column or value that determines the size of the labels shown beside nodes
- Label Color By: A HTML hex code or color to be used to color the text shown beside the node i.e. #000000 or black
End Nodes
End nodes are nodes that do not have any child connections, or in other words: values that only appear in the Target axis and not in the values of the Source axis. As these values never appear as a Source entry, the network chart automatically creates an end node for these cases. As all other node settings are applied to the node created from the Source values, we need extra settings for controlling the behavior of end nodes. These are listed below:
- End Node Size By: A numerical column or value that determines the size of the end nodes
- End Node Color By: A HTML hex code or color to be used to color the text shown beside the node i.e. #000000 or black
Using the Mod
Once the network chart is configured and has data provided, it will render the network. This will be an animated visual as the network forms. The network chart can be panned and zoomed by clicking and dragging anywhere on the visual much like with the Spotfire map chart. Zooming can be performed using the mouse wheel. Individual nodes can also be dragged and moved to help alter the network displayed.
Marking
Clicking a node will mark both nodes and links in the network chart and in all other visualizations that use the same marking.
Marking by clicking on the network chart is currently limited to nodes. It is not possible to click on the link between nodes to mark them.
Rendering
There are various settings for the network chart to alter how it behaves and renders beyond those set by the data itself. These are accessed by clicking on the cog icon on the top left of the chart. From here there are 4 options which alter the network live:
- Strength: This slider alters the strength setting of the network chart. Strength is an indication of how far the nodes will try to separate out from each other i.e. a higher strength will make nodes move further away from each other. This setting is ideal for setting the optimum way to visualize your data. For example, if your network has a lot of nodes close together, increasing the strength can make these relations easier to visualize.
- Labels: This checkbox will display or hide labels as it is checked or unchecked respectively.
- Apply Color To: This drop down determines whether the Color settings of the chart (as described above) are applied to either the nodes of the network, or the lines connecting the nodes. If set to 'Nodes' the nodes of the network use the Color option of the chart, and if specified the lines will be colored by the 'Other Color' property setting of the chart. If this option is set to Links, then the lines between the nodes use the Color setting, and the nodes use the Other Color setting (if specified).
- Network Type: Two settings are available: 'Living' and 'Static'. In the default mode of 'Living' the network chart is animated and will simulate any changes progressively. In other words if a node is moved, or new data added, the network will show the transition of the nodes and link positions to the new final network. In the 'Static' mode, this animation is disabled and only the final network is shown. This static option can be useful for real-time data where the animations may make viewing the changes to the network difficult as data streams into Spotfire.
Warnings
Please see the WARNING above on how aggregations are handled in the network chart.
Building the Project
In a terminal window:
- npm install
- npm start
In a new terminal window:
- npm run server
Help and Support
This Mod is not supported by Spotfire® Support.
In the event of issues or to suggest features and enhancements, submit an issue in the Mod's GitHub repository.
For general questions about Mods, please post a question in the Forum for Extensions & Mods to make it visible and routed to the appropriate team(s) to respond.
More Information About Spotfire® Mods
- Spotfire Community Exchange: A safe and trusted place to discover ready-to-use Mods
- Developer Documentation: Introduction and tutorials for Mods developers
- Mods code examples on GitHub: A public repository for example projects
Recommended Comments
There are no comments to display.