Visualisation

Learn how to add rich novem visuals to your 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

Novem was built to make life easier for our users.

Including a visualisation

A novem visual is included in an e-mail by creating a special markdown section in the content file. The markdown follows the novem markdown section syntax with the keyword vis, and example of which can be seen at the beginnig of this page as well as in the examples below.

Options

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

Reference 

keyword: ref
options: shortname | local path | global path

To embed a visualisation the only mandatory attribute is a reference to which visualisation to add. Currently Plots and Grids are supported.

There are three ways to reference a visualisation:

  • By shortname
  • By local path
  • By global path

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.

You’ll also notice that the vis shortname is part of the canonical URLs for all of the novem visuals. As a convenience for our users we also support supplying the URL of the plot as a shortname.

Local Path

Local path allows the the user to refer to visualisations by their api path. All user visualisations are located under the /vis/<TYPE>/<ID> path and as such we wanted to let user reuse this path to refer to their visuals. If you were logged in as our novem_demo you could refer to the plots above as follows: /plots/state_pop and /plots/unemployment_noridc (dropping the /vis prefix as it is the same for all visuals).

Global Path

Global path takes this one step further by letting you refer to other users plot with a full path. The path consist of username and the plot name.

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

So if you’re a regular novem user but want to include the demo user plots above, then you can embed them using /u/novem_demo/p/state_pop or /u/novem_demo/p/unemployment_nordic.

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

Include the visualisation title if the visualisation has a title value set.

Include Caption 

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

Includes the visualisation caption if the visualisation has one.

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

Below is a few examples on how the visualisation section can be used to add visualisations to your e-mail.

Include a table

← Overview
Callouts →