Visualisation

Available in: documents and e-mails.

{{ vis                            # section type
  ref: /u/novem_demo/p/state_pop  # vis to embed
  width: 100%                     # width
  align: left                     # center
  include title: false            # no title
  include caption: true           # include existing caption
  include link: true              # include link to read more
}}

Overview

Visualisation sections let you embed live novem plots and grids directly in your content. The section is a single statement section with the keyword vis; in documents the closing {{ /vis }} tag is optional.

Options

Options to the section is supplied as yaml within the double brackets.

Reference

keyword: ref
options: shortname | local path | user path | official Novem URL

To embed a visualisation the only mandatory attribute is a reference to which visualisation to add.

All of these spellings use the same reference resolver:

• XVBzV — bare shortname
• /p/sales or p/sales — local path, with or without a leading slash
• /u/acme/p/sales or u/acme/p/sales — explicit user path
• https://novem.io/u/acme/p/sales — official Novem URL

The type segment may be p, g, m, or d for a plot, grid, mail, or document. Long local spellings such as /plots/sales are accepted too.

Shortname

The shortname is simply the shortname of the visualisation (available for all visualisations as a shortname endpoint), examples would be qNGgN or 2v1rV, referring to two of the charts on our front page.

The public URL form https://novem.io/p/<shortname> resolves to that same shortname.

Local Path

Local paths resolve against the owner of the document or mail. Both compact forms (/p/state_pop, p/state_pop) and long forms (/plots/state_pop, plots/state_pop) are accepted.

Global Path

User paths let you refer to another user's visualisation by username and name.

This matches the existing API paths to view user visualisations under /u/<USERNAME>/<TYPE>/<ID>.

The leading slash is optional, and an official URL is equivalent. These three references therefore resolve identically:

/u/novem_demo/p/state_pop
u/novem_demo/p/state_pop
https://novem.io/u/novem_demo/p/state_pop

Alignment

keyword: align
options: left | right | center
default: center

Alignment refers to the position of the plot in the context of it's layout. If the plot width is not 100%, then alignment is used to position it.

Width

keyword: width
options: 1-100%
default: 100%

Width refers to the width of the plot relative to the current layout. If you have a two column layout than a width of 100% will refer to the full width of a column.

Include Title

keyword: include title
options: true | false
default: true in documents, false in e-mails

Include the visualisation title if the visualisation has a title value set. E-mail embeds start without one, so an e-mail that wants the title has to ask for it with include title: true.

Include Caption

keyword: include caption
options: true | false
default: true

Includes the visualisation caption if the visualisation has one.

Include Link

keyword: include link
options: true | false
default: false

This option controls whether a small button with a link to the visualisation web page should be included.

Override Title

keyword: override title
options: "New title string"

This option allows you to override the title for the plot, the string has simple markdown support.

Override Caption

keyword: override caption
options: "New caption string"

This option allows you to override the caption for the plot, the string has simple markdown support.

Examples

Embed a plot with full width

{{ vis
  ref: /u/novem_demo/p/nei_rgn_perf
  width: 100%
  include title: false
  include caption: true
}}

Inline syntax

{{ vis ref: /u/novem_demo/p/nei_rgn_tb, width: 80%, align: left }}

Side by side on a landscape page (documents)

{{ page
orient: landscape
cols: 2
}}

{{ vis
  ref: /u/novem_demo/p/nei_rgn_perf
  width: 100%
}}

{{ vis
  ref: /u/novem_demo/p/nei_rgn_hier
  width: 100%
}}