---
tags: networks
---

# Vaccines concept map

## Branching out

> Using current [outline](https://docs.google.com/document/d/1SaGh7OKlC2QOs67uc8Mm_HIbHAJqAsT3DfF78uYQ1Qo/edit)

We need define node attributes on a separate line, I think.

>> Ahh yes that cleans it up! I'm trying to see if vaccines at the top or vaccines at the centre looks better as a hierarchy.

strict graph ip_map {

    "History"[URL = "https://scibeh.org"]
	
    
    "Vaccines" -- { "History" "Uptake behaiour" "Public discourse" "Narratives" "Communications" "Misinformation" "Policy problems"};
    "Public discourse" -- {"Monitoring" "Research" "Tips for engaging"}
    "Narratives" -- {"Channels" "Message design" "Sources"}
    "Channels" -- {"Social media" "Websites" "Broadcast" "Print media"}
    "Policy problems" -- {"Distribution" "Priorities" "Mandatory programmes"} 
}

> Maybe cleaner version:

`neato` and `circo` look like nice [layout algorithms](https://forum.graphviz.org/t/layout-algorithms/59) for our purpose.

We can also amend different [attributes](https://graphviz.org/doc/info/attrs.html).

graph G {
layout = circo
node [
    fontname = "helvetica"
    fontsize = 20
    ];




vaccines[label = "Vaccines"][color = crimson]

history[label = "History"][URL = "https://scibeh.org"][color = blue]

behavioral_fatigue [
    label = "behavioral fatigue\nclick on me!"
    URL = bwXpvWrcRKy7FdGdYKDyTQ
    fillcolor="red:green"
    style=filled
    color=yellow
    fontcolor = white
    fontname = "helvetica-bold"
    fontsize = 30
    shape=diamond
    penwidth = 10
    ]

vaccines -- history;
vaccines -- "Uptake behaviour";
vaccines -- "Narratives";
vaccines -- "Public discourse";
vaccines -- "Communications";
vaccines -- "Misinformation";
vaccines -- "Policy issues";
}

# Clickable nodes

You can add links to nodes! See the example below (taken from [here](https://github.com/hackmdio/codimd/issues/1312)).

digraph G {
    A[label = "Click on me!\nI'll take you to the scibeh website!"][URL="https://scibeh.org"];
    B[label = "No, click on me!\nI'll take you to the Boosting website!"][URL="https://scienceofboosting.org"];

A -> B;

}

# More stuff

See https://hackmd.io/c/codimd-documentation/%2F%40codimd%2Fextra-supported-syntax

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?

st->op->op2->cond
cond(yes)->e
cond(no)->op2

gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

https://markmap.js.org/ doesn't currently work here on hackmd, unfortunately. That would also be a great way to present things.

# markmap-lib

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap-lib)

## Related

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **inline** ~~text~~ *styles*
- multiline
  text