bespoke-vis

This plugin allows including visjs elements in bespoke presentations.

• There are 4 types of visualizations:

  timeline

  a timeline of events

  network

  a graph

  lines

  a lines chart

  bars

  a vertical bars chart

• There are 2 ways of including such an element:
  1. Loading the data from a JSON file (slides 2-3)
  2. Loading the data from the HTML markup (slides 4-5)
• See how to use bespoke-vis in both ways in the next slides

Loading data from a JSON file

• Source code:

  <div data-vis="timeline" data-vis-url="data.json"><div>

• Result:

Loading data from a JSON file

The JSON file (data.json)

{
  "groups": [
    { "id": 1, "content": "Group 1" },
    { "id": 2, "content": "Group 2" }
  ],
  "items": [
     { "group": 1, "content": "Item G1.1", "start": "2020-01-01", "type": "point" },
     { "group": 1, "content": "Item G1.2", "start": "2021-01-01", "type": "point" },
     { "group": 2, "content": "Item G2.1", "start": "2022-01-01", "type": "point" }
   ],
   "options": {
     "width": "100%",
     "height": "250px",
     "min": "2019-01-01",
     "max": "2023-01-01",
     "zoomMin": 2592000000,
     "zoomMax": 788400000000
   }
 }

• Properties:

  options

  [optional] a set of configurations from visjs

  groups

  [optional] any grouping of the items (may be mandatory)

  items

  [mandatory] an array of items to display

Loading data in the markup

• Source code:

  <div data-vis="timeline">
    {
      "options": {
        "height": "200px",
        "width": "700px"
      },
      "items": [
        { "content": "OpenGL 1.0", "start": "1992-01-01" },
        { "content": "OpenGL 2.0", "start": "2004-01-01" },
        { "content": "OpenGL 3.0", "start": "2008-01-01" }
      ]
    }
  <div>

• Result:
  { "options": { "height": "200px", "width": "700px" }, "items": [ { "content": "OpenGL 1.0", "start": "1992-01-01" }, { "content": "OpenGL 2.0", "start": "2004-01-01" }, { "content": "OpenGL 3.0", "start": "2008-01-01" } ] }