Custom Data Network Visualizer

Instructions on how to set up your own custom data network visualization.

Nodes

The nodes query defines the nodes in the network.

Parameter

Description

id

Id for the node. This will be used by the edges to define the relationships.

title

This is the text that is displayed when hovering on a node.

label

The label that is shown below the node.

value

The visual size of the node relative to other nodes.

mass

The gravitational pull of a node. Unless you really want to customize the visualizer, it is recommended to keep this the same value as the value.

group

Optionally you can associate a node with a group.

color

Optional hex code for the color of a node. The node will take the color of the group if a color is not specified for the node.

description

The description shows up in the top right hand corner when you click a node.

nodeURL

Page to display when you click the open button next to the description.

Edges

The edges query defines the relationships between the nodes.

Parameter

Description

id

Id for the edge.

label

Label that shows up on the edge.

from

Originating node id.

to

Target node id. Can be the same as the from node, it will show a loop back into the same node.

showArrowTo

Set this to True if you want to show the direction of the relationship.

showArrowFrom

Generally should only be used for bi-directional relationships along with the arrow to.

Node Groups

Node groups are an optional query you can provide to group your nodes.

Parameter

Description

sub network

Name for the group

color

Hex value for the color of the group

Not all nodes need to be in a sub network

Timeline

If no start or end date is specified, the data network is just shown as is. If there's a start or end date, the other CQLs need to have a @date parameter and that will be used to render the data network at a point in time.

You can use @date between [Modified] and [Replaced] with a version history query to see data at a point in time. You can also simply use @date > [Created] if it's an additive system.

Timeline Start Date

This CQL should return a date value as 'startDate'.

Timeline End Date

This CQL should return a date value as 'endDate'.

Slicers

To use slicers, you need to define the slicers in the [Slicers] column and add the additional attributes to the nodes query.

[
    {
        "attribute": "slice1",
        "displayName": "First Slicer"
    },
    {
        "attribute": "slice2",
        "displayName": "Second Slicer"
    }
]

Attribute is the column name from the nodes query, displayName is what shows up in the visualizer.

System Tables

All the information above is entered into the [Cinchy].[Networks] table. To access the network, go to

<Cinchy URL>/Cinchy/apps/datanetworkvisualizer?network=<NAME>

Alternatively you can go to My Data Network and then add ?network=<NAME> to the end of it.

It is highly recommended to add a new applet for each custom data network visualizer for ease of access.

Example Network

For ease of testing, save the following as saved queries and then in the Networks table simply add exec [Domain].[Saved Query Name] as the CQLs.

Node Groups CQL

-- Sample Data
SELECT
  [Sub Network] = 'Blue Network'
, [Color] = '#03a9f4'
INTO #TEMP
UNION SELECT
  [Sub Network] = 'Green Network'
, [Color] = '#8bc34a'
-- Node Groups CQL
SELECT
  t.[Sub Network] as 'sub network'
, t.[Color] as 'color'
FROM #TEMP t

Nodes CQL

-- Sample Data
SELECT
   [Id] = 'N01'
,  [Title] = 'Hover text on the node.'
,  [Label] = 'Purple Node 1 (Ax)'
,  [Value] = 5
,  [Mass] = 5
-- optional
,  [Group] = 'Green Network'
,  [Color] = '#ab47bc'
,  [Description] = 'This description shows up in the top right hand corner when you select a node.'
,  [Node URL] = 'https://www.cinchy.com'
,  [Slicer 1] = 'A'
,  [Slicer 2] = 'x'
INTO #TEMP
UNION SELECT
   [Id] = 'N02'
,  [Title] = 'Hover text on node 2.'
,  [Label] = 'Node 2 (Ay)'
,  [Value] = 10
,  [Mass] = 10
-- optional
,  [Group] = 'Green Network'
,  [Color] = ''
,  [Description] = 'This description shows up in the top right hand corner when you select a node.'
,  [Node URL] = ''
,  [Slicer 1] = 'A'
,  [Slicer 2] = 'y'
UNION SELECT
   [Id] = 'N03'
,  [Title] = 'Hover text on node 3.'
,  [Label] = 'Node 3 (Bx)'
,  [Value] = 1
,  [Mass] = 1
-- optional
,  [Group] = 'Blue Network'
,  [Color] = ''
,  [Description] = ''
,  [Node URL] = ''
,  [Slicer 1] = 'B'
,  [Slicer 2] = 'x'
UNION SELECT
   [Id] = 'N04'
,  [Title] = 'Hover text on node 4.'
,  [Label] = 'Minimum Node 4 (y)'
,  [Value] = 3
,  [Mass] = 3
-- optional
,  [Group] = ''
,  [Color] = ''
,  [Description] = ''
,  [Node URL] = ''
,  [Slicer 1] = ''
,  [Slicer 2] = 'y'
UNION SELECT
   [Id] = 'N05'
,  [Title] = 'Hover text on node 4.'
,  [Label] = 'Orphan Node 5 (By)'
,  [Value] = 2
,  [Mass] = 2
-- optional
,  [Group] = ''
,  [Color] = ''
,  [Description] = ''
,  [Node URL] = ''
,  [Slicer 1] = 'B'
,  [Slicer 2] = 'y'
-- Nodes CQL
SELECT
   t.[Id] as 'id'
,  t.[Title] as 'title'
,  t.[Label] as 'label'
,  t.[Value] as 'value'
,  t.[Mass] as 'mass'
,  t.[Group] as 'group'
,  t.[Color] as 'color'
,  t.[Description] as 'description'
,  t.[Node URL] as 'nodeURL'
,  t.[Slicer 1] as 'slice1'
,  t.[Slicer 2] as 'slice2'
FROM #TEMP t

Edges CQL

-- Sample Data
SELECT
  [Id] = 'E01'
, [Label] = 'Node 1 to Node 2, Double Arrows'
, [From] = 'N01'
, [To] = 'N02'
-- optional
, [Show Arrow To] = 'True'
, [Show Arrow From] = 'True'
INTO #TEMP
UNION SELECT
  [Id] = 'E02'
, [Label] = 'Node 2 to Node 3, To Arrow'
, [From] = 'N02'
, [To] = 'N03'
-- optional
, [Show Arrow To] = 'True'
, [Show Arrow From] = 'False'
UNION SELECT
  [Id] = 'E03'
, [Label] = 'Node 1 to Node 4, From Arrow'
, [From] = 'N01'
, [To] = 'N04'
-- optional
, [Show Arrow To] = ''
, [Show Arrow From] = 'True'
UNION SELECT
  [Id] = 'E04'
, [Label] = 'Node 3 to Node 3, No Arrow'
, [From] = 'N03'
, [To] = 'N03'
-- optional
, [Show Arrow To] = ''
, [Show Arrow From] = ''

-- Edges CQL
SELECT
   t.[Id] as 'id'
,  t.[Label] as 'label'
,  t.[From] as 'from'
,  t.[To] as 'to'
,  t.[Show Arrow To] as 'showArrowTo'
,  t.[Show Arrow From] as 'showArrowFrom'
FROM #TEMP t
PreviousMy Data NetworkNextAdvanced Settings

Last updated

Was this helpful?