This is a quick guide on the different style options available when configuring a view.


The style panel is reached by clicking the settings cog icon:



For both elements and connections you have the option to apply styles to all elements or connections or specify a custom rule to apply the style to specific elements or connections using the pattern builder.


Elements

Node

  • Color: The color of the node on the screen. The color style will be added by default to all element types with either a random color based on a default color scheme or the element type’s color from the the Model. Color can be selected via color picker, hex code, or RGB values. Lookup ‡ values must be one of the latter two.
  • Size: Size of the node, default of 8. Lookup values must be a number type.
  • Shape: Shape of the node, default is "circle". Options include: circle, cross, diamond, rectangle, square, star, triangle, wye. Lookup values must be a text type and match one of those options, case sensitive.
  • Icon: Displays an icon on the node. Icon must be a link to an image, e.g. "https://exaptive-city-content.s3.amazonaws.com/icons/regular/chart-bar.svg".
  • Opacity: How opaque or transparent the node is, default is 1. Must be a number type and a value from 0 to 1. 0 is completely transparent, 1 is completely opaque.
  • Charge *: How strongly a node repels nodes around it. Must be a number.
  • Gravity Center X */Gravity Center Y *: A point on the canvas towards which all nodes are pulled. Must be a number type. †
  • Gravity Strength *: How strongly towards the above Gravity Center a node is pulled. Must be a number.

Border

  • Border Color: Color of the border around a node. Same input/options as the Node Color above. A Border Size (below) must be set before it will be visible.
  • Border Size: Size of the border around a node. Must be a number.

Position

  • X/Y: Absolute position for nodes, overwrites physics/charge/gravity. Must be a number. †
  • Disable Drag: Prevents a node from being moved by dragging. Input is a checkbox, lookup must be a True/False type.
  • Radial Distance: Pushes nodes out away from the center towards the specified distance. Physics can pull them further in our out. Must be a number.

Text

  • Size: How large the label's font is, default is 6. Must be a number.
  • Color: Label's font color. Same input/options as the Node Color above.
  • Label Align: Where, relative to the node, the label appears, default is "bottom". Options include: bottom, center, left, right, top. 
  • Show Label: Whether to show or hide the label, default is shown. Input is a checkbox, lookup must be a True/False type.


Connections

Edge

  • Size: Width of the edge, default is 1. Must be a number.
  • Opacity: How opaque or transparent the edge is, default is 0.4. Must be a number type and a value from 0 to 1. 0 is completely transparent, 1 is completely opaque.
  • Strength *: Force with which the connection "pulls" the nodes together. Must be a number.
  • Distance: Set a length for the connection instead of allowing it to be determined by the physics. Must be a number.
  • Color: Line/arrow color. Same input/options as the Node Color above.

Text

  • Size: Label font size, default is 4. Must be a number.
  • Show Label: Whether to show or hide the label, default is shown. Input is a checkbox, lookup must be a True/False type.
  • Color: Label's font color. Same input/options as the Node Color above.


* Physics options (advanced) can require a lot of experimentation to get the view to look the way you would like


† Canvas positioning will scale, by default, such that the screen will include all nodes, centered to the best of its ability, preserving only relative positions. To fully control the positions you need to set the X and/or Y Axis scaling (advanced), found in the View Settings icon near the bottom right of the view


‡ All styles can be set as "fixed" or "lookup". Fixed style mean that the value is defined in the style rule itself and the same for every element or connection to which it is applied. For example, in the screenshot below, Lorem's "Color" is set to "fixed" and defined as a light blue. All Lorem elements will be this color. Lookup styles are based on a property value. In this example if there was a color code property on the Lorem elements, we could use lookup to set each elements' color to that property.