Tutorial 3

Graphs & Diagrams

Types of Graphs & Diagrams

There are 4 types of Vizualizations:

  1. Mind-Map and Org-Chart are the simple ones. They draw a hierarchy of nodes. Their nodes can only contain text.
  2. Devices (iPhone, iPad, Browser and MacBook) allow to put a frame around a content. This content can contain a subset of Markdown.
  3. Charts (grid & sequence) are dynamic diagrams. They can have a variable number of "blocks". Like devices, each block can contain Markdown.
  4. Graphs (line-chart, spline-chart, area-chart, bar-chart, donut-chart, pie-chart) can be used to visualize series of data.
2

Mind-Map & Org-Chart

Org chart

Big Boss Boss 1 Boss 2 Employee
4

Mind mapping

Root Idea child idea Another child ideaRoot Idea Child idea 1 Child Idea 2 Sub idea child 1 Sub Idea child 2 Sub Child idea Sub child idea 2 sub sub idea
5

Graphs

General Information

  • We call a series a consistent set of data
  • We call data-point a value of a series.
  • Each series has a name and a set of value.
  • They are both separated by a colon :
  • Each value is separated by a coma , Example : Budget: 120, 130, 140\u2028
7

Line Graph

012311.522.533.54Serie 1Serie 2
8

Spline Graph

012311.522.533.54Serie 1Serie 2
9

Area Graph

012300.511.522.533.54Serie 1Serie 2
10

Bar Graph

012300.511.522.533.54Serie 1Serie 2
11

Donut Graph

011.21.41.61.822.22.410.3%20.6%23.7%20.6%10.3%14.4%abcdef
12

Pie Graph

011.21.41.61.822.22.410.3%20.6%23.7%20.6%10.3%14.4%abcdef
13

Axis 1/2

  • For the Y axis, scale and values are defined automatically based on the minimal and maximal values of your data.
  • For the X axis, you can also let Slideas to calculate them automatically. However in the majority of cases, you will need to provide your own values.
  • Note: Providing custom X axis value only make sense for graph types supporting multiple values per series.
14

Axis 2/2

You can set your own values for a graph by declaring an additional series having x as name: Example:

201520162017120125130135140145150Budget

X axis can have different type:

  • By default it will use the numeric values provided
  • You can also have categories : x,categories: category one, category two
  • Or use the x axis as a timeline with x,timeline:2020-01-01, 2020-02-01
  • For the timeline, you can use an optional format: x,timeline,%Y-%m:2016-01-01, 2016-02-01
15

Devices 📱

iPhone

17

iPad

Blocks are fun

and can contain Markdown

18

MacBook

19

Browser

Not really a physical device but...

🦄

20

(Dynamic) Charts

Grid

With

  • List item 1
  • ... and Item 2

some bold

simple content...

22

Sequence

Step 1

Step 2

Step 3

Step 4

23