Set Colors, Icons, and Captions

The lists in the Legend let you change initial colors and apply icons for a category or relationship, tag, or property value, and set captions based on a property value for a category or relationship.

All nodes or edges in the current view are colored, whether selected or not. Hidden entities are also re-set.

You can:

  • Edit the colors for each category, property, tag, or relationship.

    • Apply a color to individual labels or property values by clicking the brush icon to open GraphXR’s style setting dialog.

      03 02 01 StyleSettingIntro
    • For a property, apply a color Scale based on the range of its values in the data.

      03 02 02 ColorScale
  • Set the Icon for the nodes of a category, property or tag using the style setting dialog, and set one of three project-wide icon coloring modes.

    03 02 03 Icon
  • Set a source property for the Avatar image displayed on nodes of a category.

  • Display one or more Captions sourced from a property value on nodes or edges using the style setting dialog.

    03 02 05 Captions
    Most often, you access the style setting dialog by clicking on the brush icon in a Legend list. You can also open it in panels for individual categories or relationships in the Projects page.

Edit colors

GraphXR automatically assigns colors according to categories, relationships, and the individual values of properties. You can:

  • Edit any of the assigned colors.

  • For a property, apply a color gradient scale based on the range of property values visible in the data.

Edit an assigned color

To edit an assigned color, you open its style setting dialog and Color picker by clicking the colored brush icon next to its label in the Legend list.

For properties, a selection menu is provided to select the correct property name and list of its unique values

To edit a color assigned to a category, relationship, tag, or property value:

  1. In the Legend click the Category, Relationship, Tag, Property, or RelProperty section.

  2. Locate the item in the Legend list.

    • For a Category, Relationship, or Tag, click the brush icon at the right of the item to display its style setting dialog, which opens with the Color tab.

      03 02 06 ColorOne
    • For a property, click in the Property ( or RelProperty) dropdown menu to select the Category (or Relationship), open its property submenu, and select a property name. Under Value, the list shows unique property values, each with its brush icon to open the style setting dialog.

      03 02 07 PropValueSelect
  3. Locate and apply a color:

    • Use the color picker to see the the existing color and adjust it.

    • Enter the Hex value for a color.

    • Select a Color Palette from the dropdown menu and click one of the pre-set colored dots. The choice is displayed in the color picker and the Hex textbox.

      03 02 08 ColorPicker

      The new color is applied when you select it.

  4. Choose another list item to open its style setting dialog, or click the X at the upper right to close the dialog.

Apply color scaled by a property value

For a property of a category, tag, or relationship, you can select a color gradient scaled to the range of values in the data visible on the canvas.

Tags are automatically assigned separate colors only if you click Save As a Property in the Manager Tags dialog. This creates an internal graphxrtags property whose values can be used to scale the color.

Scale coloring is independent of coloring for individual values: you can set both, and your choices persist until you change them or log out.

To apply color scaled by a property value:

  1. Go to the Legend and click Property, for a property of a category, or RelProperty, for a property of a relationship.

    When you display both selector menus, the Property menu appears above the RelProperty menu.
  2. Click in the Property ( or RelProperty) dropdown menu to select the Category (or Relationship), open its property submenu, and select a property name. The list shows the label (category or relationship) and the property name.

    A list of all the properties of any category (or relationship) is available at the top of the menu. However, it’s safest to choose the property name from the list for a specific Category or Relationship because the same property name can be used for different entities.
  3. Click the Scale tab below the property menu, and choose a color scale from additional dropdown menu.

    03 02 09 PropScaleSelect

In the example above:

  • Visible nodes of the Photo category are colored according to their Rating property values using the_YlGnNBu_ scale, a gradient with a lowest value a pale yellow, and the highest a dark blue.

  • The TAKEN_BY edges are colored individually according to their Rating property values.

Apply an icon to nodes

You can apply an icon to nodes of any category, property, or tag. The icon for a property value or tag can differ from its category icon.

Icons must initially be applied using the Icon tab in the style setting dialog. You can search for an icon by name or general type (i.e. person, or camera), or use the dropdown menu for icon sheets with specific themes.

To apply an icon:

  1. In the Legend, click the Category, Property, or Tag tab.

  2. Locate the item in the list and click the brush icon at the right to display the style setting dialog.

  3. Click the Icon tab to display the icon selector. You can:

    • Search by name (e.g. “_camera_”), to display only icon images tagged as such.

      03 02 10 SearchIcon
    • Use the dropdown menu to display groups of similar icons.

      03 02 11 SearchSelIcon
  4. Click to select an icon.

    The icon appears in the list bubble, and is applied to all the nodes of the category, property value, or tag. Your current color choice and mode settings persist.

    Icons are rendered with the default Background Transparent icon mode. To change it for all nodes, go to Project -> Settings, and under Advanced Settings, scroll down to the Icon Mode menu.
  5. Either click another list item to set another icon, or click X at the top right to close the dialog.

Apply an avatar to nodes of a category

You can set the URL property of a category used to display an image on its nodes. The avatar image and an icon badge appears when you zoom in to a fixed virtual distance from the node. When you zoom out from that point, the category color and icon is displayed instead.

To apply an avatar to nodes of a category:

  1. In the Legend, click Category.

  2. Locate the category in the list and click the brush icon to display the style setting dialog.

  3. Click the Avatar tab.

  4. Use the dropdown menu to select the property that includes your image URLs. Supported image formats are jpg, jpeg, png, gif, bmp.

    03 02 12 AvatarPhotos
    To apply avatars to any node with a suitable URL property value, go to the Settings panel, and under Advanced Settings click the Auto Avatar checkbox. Be aware that this can slow down navigation on the canvas because of extra image rendering.

Apply captions to nodes or edges

You can select one or more properties of a category or relationship whose values will be used as captions on its nodes or edges.

03 02 13 CaptionsIntro

How captions are displayed

Captions are automatically oriented to nodes according to the current Node Position setting, which defaults to the Right of a node.

Captions on edges are centered below the edge. If you have also set the Show Relationship Name checkbox in the Settings panel, the relationship name is centered above the edge.

The caption for each property with a single property value is displayed on a separate line.

03 02 14 CaptionsSingleValue
Often a property will have just one value, but multiple property values are also supported in GraphXR, and can be displayed in captions. Multiple values separated by a non-breaking space in the property value field are displayed on separate lines; otherwise the values appear on one line.
03 02 15 CaptionsMultiValue

In the example above, the actorName property includes three names, the first two separated by a comma, and the third by a non-breaking space such that the caption is displayed in two lines.

Select captions

You can add or dismiss captions at any time using the style setting dialog.

To select captions:

  1. In the Legend, click the brush or line icon next to a category or relationship to open its style setting dialog.

  2. Click the Caption tab .

  3. In the Caption tab’s dropdown menu, select one or more properties to be applied as captions on the nodes (or edges).

    Captions for each property are displayed on separate lines in the order the property appears on the style setting list. For example the list seasonEpisode, episodeTitle, and millionViewers applies captions to Episode nodes as shown below:

    03 02 16 CaptionsSeasEpiTitle
  4. To change the ordering at any time, in the Caption list, simply click and drag an item up or down the list.

    Using the style setting dialog immediately updates the Caption checkboxes in its entity list in the Projects panel’s Category or Relationship subpanels. You can also click the entity label icon to open the style setting dialog from the panel.
    03 02 17 CaptionsProjectsCat

Adjust Caption display

In Projects > Settings, the Advanced Settings dropdown includes several options to set project-wide display of captions. You may need to adjust these to make captions more readable:

03 02 18 CaptionSettings
  • Auto Caption checkbox, which automatically applies a default caption property (caption>label>title>name) if the user hasn’t selected one for that category.

  • Alternate Caption Rendering checkbox, which displays captions using an alternate rendering that may be more legible than the default rendering at very small text sizes. However, the number of captions which can be rendered at a time is limited.

  • Caption Size Scale slider, to adjust the text size of captions for the project.

  • Node Caption Position dropdown menu, to adjust the position of captions on nodes. Position options are Right, Top (left-aligned or centered), Bottom (left-aligned or centered), and Vertical.