--- 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. ```graphviz 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). ```graphviz 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)). ```graphviz 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 ```sequence 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? ``` ```flow 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 ``` ```mermaid 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 ``` ```vega { "$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 # 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 ```