New blog post on phylo vis

_posts/2024-06-10-phylo-vis.md

@@ -0,0 +1,91 @@
+---
+title: Phylogeny viewer plugin
+date: 2024-06-10
+categories: [Plugins]
+background: "/assets/backgrounds/rise_of_the_angiosperms.png"
+background_alt: "Time-calibrated phylogenetic tree for angiosperms based on 353 nuclear genes from Zuntini et al. Phylogenomics and the rise of the angiosperms. Nature 629, 843–850 (2024). https://doi.org/10.1038/s41586-024-07324-0"
+twitter_description: 'Developed an Obsidian phylogeny viewer plugin'
+---
+
+## Background
+
+If the echinopscis project is about building on Obsidian for taxonomic research, then it would be useful to have a phylogeny viewer plugin. All the pieces seem to exist, its just a case of wiring them up...
+
+## Obsidian core - code blocks
+
+First lets look at what Obsidian has in its core architecture, that we can build on.
+
+Obsidian content is written in markdown, and includes a formatting instruction called [code blocks](https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Code+blocks). These are portions of text enclosed within three backticks. 
+
+    ```
+    This text is in a code block
+    ```
+
+This is rendered as:
+
+```
+This text is in a code block
+```
+
+The original use case for code block formatted text was to display snippets of programming code - you supply the code and state what language it is in, and when the code block is rendered you get syntax highlighting which makes the code more readable.
+
+    ```python
+    print("Hello")
+    ```
+
+This is rendered as:
+
+```python
+print("Hello")
+```
+
+## More advanced code blocks - displaying diagrams
+
+Code blocks have been extended to work with text instructions that specify how a diagram should be rendered. Obsidian has core support for a markdown based diagramming language called [mermaid](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram)
+
+
+    ```mermaid
+    graph LR
+    Specimens --> Sequences
+    ```
+
+This is rendered as:
+
+```mermaid
+graph LR
+Specimens --> Sequences
+```
+
+## A phylogeny viewer
+
+We've built on these foundations to create a phylogeny viewer for Obsidian. Its a plugin that adds newick and nexus format code blocks, which are rendered with the [phylotree.js](https://phylotree.hyphy.org/) tree visualisation library.
+
+    ```newick
+    (((Thinouia_obliqua, Thinouia_mucronata), (Thinouia_restingae, Thinouia_cf._mucronata)),(((Thinouia_sp., Thinouia_myriantha),Thinouia_trifoliata),Thinouia_cazumbensis))
+    ```
+
+This is rendered as:
+
+
+![Screenshot of phylogeny visualisation](/assets/images/phylo-vis-2024/obsidian-phylo.png)
+
+### Adding interactivity
+
+As well as displaying the phylogeny, the visualisation is interactive - clicking on a leaf node will execute a search across all the pages in your vault for the name associated with the node. If you click on an intermediate node, the search includes all children under that node - giving you phylogenetic search across your taxonomic notes and specimens.
+
+### Display options
+
+You can specify the height and width of the visualisation in the first line of the code block, if required. 
+
+    ```
+    height=600,width=400
+    (((Thinouia_obliqua, Thinouia_mucronata), (Thinouia_restingae, Thinouia_cf._mucronata)),(((Thinouia_sp., Thinouia_myriantha),Thinouia_trifoliata),Thinouia_cazumbensis))
+    ```
+
+## Try it out
+
+You can install the plugin from: [github.com/echinopscis/obsidian-phylotree-plugin](https://github.com/echinopscis/obsidian-phylotree-plugin)
+
+## Thanks
+
+Thanks to the developers of phylotree.js, and to the core and third party plugin developers in the Obsidian community for their documentation resources.