Docs

Styling

In this chapter, you'll learn how to set different colors, sizes and other customized settings.

Colors

On the large scale, maps have color schemes. You choose a scheme when you create a map, and you can change it at any point by clicking on the scheme in the editor:

A color scheme is a configuration that specifies how nodes and edges should be colored, how they should be sized, the background of the map, etc.

Node coloring

By default, nodes are colored algorithmically — this means that they are automatically colored based on the connections they have. Also by default, nodes that have the highest number of incoming edges will be the brightest (against a dark background) or darkest (against a white background). You can change this in the Node coloring section of the editor:

Color nodes by incoming or outgoing degrees

For example, if you want nodes with the highest number of immediate incoming edges, choose the first option (Income degree (1 depth)). As another example, if you want the highest number of outgoing edges to all depths, choose the last option.

You can also color specific nodes different colors by manually specifying colors in your Excel spreadsheet. Specify a color for the fill by adding a column called fill::. Put the RGB hex color code, e.g. #ff00aa, and that node will have the specified fill color:

Likewise, to specify a color for the outline (stroke) of the node, create a column called stroke:: and specify a hex value in the cell.

The size of the node can also be customized by creating a column called radius:: and entering in a numeric number.

Labels

There are two kinds of labels that appear on a node:

  1. Node labels These are the labels in the center of the node. They appear when you are on a zoom level greater than 3 (there are 6 zoom levels total).

    You can change the text that appears on the node by selecting a property from the dropdown under NODE LABEL:

  2. Mouseover Node labels These labels appear when you mouseover over a node. They appear at all zoom levels.

    You change the text that appears upon mouseover by selecting a property from the dropdown under MOUSEOVER NODE LABEL:

Mouseover Pathway

When you mouseover a node, other connected nodes can light up based on the graph algorithm you choose.

There are six different behaviors to choose from. These behaviors are based on your data, and not on the visual direction of your arrows. This confusion often arises when you select a Reverse direction for your edges, and wonder why the incorrect nodes are lighting up on mouseover.

Choose what other nodes light up when you mouseover a node
  1. Incoming (1 depth) Nodes that are directly connected (i.e. immediate neighbors) by an edge that points towards the node being mouseovered will light up.

    In the example below, there are no incoming edges, therefore, no other nodes are lit up.

  2. Incoming (all depths) Nodes that are directly connected by incoming edges and their neighbors will light up. This means that if you have A ← B ← C ← D, and you mouseover on A, then all A, B, C and D will light up.

  3. Outgoing (1 depth) Nodes that are directly connected (i.e. immediate neighbors) by an edge that points away the node being mouseovered will light up.

    In the example below, only Physics 2 is lit up because it is the only node that is directly connected by an outgoing edge from Physics 1.

  4. Outgoing (all depths) Nodes that are directly connected by outgoing edges and their neighbors will light up. This means that if you have A → B → C → D, and you mouseover on A, then all A, B, C and D will light up.

  5. Incoming and Outgoing (1 depth) Nodes that are directly connected (i.e. immediate neighbors) by an edge that points towards or away the node being mouseovered will light up. This is the combination of #1 and #3.

  6. Incoming and Outgoing (all depths) Nodes that are directly connected by incoming or outgoing edges and their neighbors will light up. This is the combination of #2 and #4.

Info Pane

The Info Pane appears when a node is clicked on, or if a search result is selected. You can customize the:

  1. Tree Map The Tree Map shows the chain of dependency of the clicked-on node:

  2. Entity Properties displayed You can choose what entity properties (columns in your spreadsheet) are displayed in the Info Pane:

  3. Search PropertiesWhen users use the search feature to search for nodes, you can control what fields they can search against. For example, selecting that the field rotten tomato score will let users type in a score to search for movies.