You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

You build network visualizations using network graphs. Here's a visual representation of a network graph:  

 

Network graphs are a series of nodes connected by edges or links. 

In the example above, the shapes are all nodes. The lines that connect two shapes are links. Nodes and links are components of the graph. 

In our example, links and nodes also have different styling. For example, some links are dotted lines, and some are solid lines. Some nodes are circles and some are triangles. In Visualizations, the styling is also a component of your network graph. 

Each row in the Network spreadsheet represents a graph component. Row formatting depends on the component type. You can have as many components as you like, as long as they are in one of these categories: 

  • "node" – places a node
  • "link" – places a link
  • "class" – styles a node or link by creating a specific styling class, or styling type

You can add components in any order. 


 To add nodes, make a row with the following data: 

 
Column 1
Column 2
Column 3
Column 4
Column 5
Data Typeplain textplain textplain textplain textplain text
Contents

"node"

Note:

  • This sets the component type.
  • "node" must be included in the first column of every row that defines a node

The id for the node

Note:

  • Makeidsunique and specific to each node
  • Idsdo not appear on thegraph, but are used to create links between nodes

The label for the node

Note:

  • Labels appear on the node in visualization

The name of the node's class type.

Note:

  • To define class types, create a "node-class" row (see the node class table)
  • This determines the node's style

 

Tooltip text for the node

Note:

  • This text will appear when a user hovers over a node.

To add links that connect two nodes, make a row with the following data: 

 
Column 1
Column 2
Column 3
Column 4
Data Typeplain textplain textplain textplain text
Contents

"link"

Note:

  • This sets the component type.
  • "link" must be included in the first column of every row that places a link

The id for the first node in the relationship

Note:

  • Define node ids when you create nodes
  • Learn more about node ids in Column 2 of the "add nodes" section of this guide

The class type for the link

Note:

    • To define class types, create a "link-class" row (see thelink class table)
    • This determines the link's style
    • The class type describes how the nodes are related

The id for the second node in the relationship

Note:

  • Define node ids when you create nodes
  • Learn more about node ids in
  • Column 2 of the "add nodes" section of this guide

 

 

 To style nodes, make a row with the following data: 

 
Column 1
Column 2
Column 3
Column 4
Data Typeplain textplain textplain textplain text
Contents

"class"

Note:

  • This sets the component type.
  • "class" must be included in the first column of every row that defines a style

The name of the class type

Note:

  • This lets you quickly reference the node styling when you create a node
  • Learn more at Column 4 of the "add nodes" section

The property name

Note:

    • This defines what node style element the class will affect (for example, color or shape)
    • Find a full list of property names you can use in the Appendix below

The value for the property in Column 3

Note:

    • This defines what style the node will have, depending on the property. For example, if Column 3 was "color", this Column might be "blue"

 

 To style links, make a row with the following data: 

 
Column 1
Column 2
Column 3
Column 4
Data Typeplain textplain textplain textplain text
Contents

"class"

Note:

  • This sets the component type.
  • "class" must be included in the first column of every row that defines a style

The name of the class type

Note:

  • This lets you quickly reference the link styling when you create a link
  • Learn more at Column 4 of the "add links" section

The property name

Note:

    • This defines what link style element the class will affect (for example, color or shape)
    • Find a full list of property names you can use in the Appendix below

The value for the property in Column 3

Note:

    • This defines what style the link will have, depending on the property. For example, if Column 3 was "color", this Column might be "blue"


Appendix

 

 Node property names and allowed values:
property name
definition
allowed values
colorThe color of the nodeEither an RGB color expressed in hexadecimal numbers prefixed with a '#' or one of these color names: blue, red, green
alphaThe transparency of the nodeA number between 0 and 1, where 1 is maximally opaque

Link property names and allowed values:

property namedefinitionallowed values
colorThe color of the linkEither an RGB color expressed in hexadecimal numbers prefixed with a '#' or one of these color names: blue, red, green
alphaThe transparency of the linkA number between 0 and 1, where 1 is maximally opaque

 

Customization Options

Background color: set the background color of your chord graph

  • Click the colored square inside the textbox
    • the ColorPicker tool will appear
  • Either: Choose a color by clicking it
    • Click Ok
  • Or: Click No color

Space for labels: sets the space between chord labels

  • Type a number into the textbox
    • A higher number will result in less space between labels and a smaller overall graph
    • A lower number will result in more space between labels and a larger overall graph

Width of group band: sets the width of the outer rim of the graph

  • Type a number into the textbox
    • A lower number will result in a thinner band
    • A higher number will result in a thicker band

Link line width: sets the thickness of the chords

  • Type a number into the textbox
    • A higher number will result in a thicker outline
    • A lower number will result in a thinner outline

Link colors: sets the color of the links throughout the graph

  • Click the colored square inside the textbox
    • the ColorPicker tool will appear
  • Choose a color by clicking it
  • Click the squares at the top of the ColorPicker
    • Choose a color for each section of the graph
  • Click Ok

Fill links: sets whether the chords are filled or outlined in color

  • Click the drop-down menu
    • Click True to have the chords completely colored in
    • Click False to have the chords only outlined in color

 

 

 

  • No labels