Display images with marimo

Author: eriknw

notebooks/05-casestudies/01-gameofthrones.py

@@ -44,7 +44,7 @@ def _():
 @app.cell(hide_code=True)
 def _(mo):
     mo.md(
-        r"""
+        rf"""
         ## Introduction
 
         In this chapter, we will use Game of Thrones as a case study to practice our newly learnt skills of network analysis.
@@ -55,7 +55,7 @@ def _(mo):
 
         The figure below is a precusor of what we will analyse in this chapter.
 
-        ![](images/got.png)
+        {mo.image("images/got.png")}
 
 
         The dataset is publicly available for the 5 books at https://github.com/mathbeveridge/asoiaf. This is an interaction network and were created by connecting two characters whenever their names (or nicknames) appeared within 15 words of one another in one of the books. The edge weight corresponds to the number of interactions.

notebooks/05-casestudies/02-airport.py

@@ -415,12 +415,12 @@ def _(mo):
 @app.cell(hide_code=True)
 def _(mo):
     mo.md(
-        r"""
+        rf"""
         ## Directed Graphs and PageRank
 
         The figure below explains the basic idea behind the PageRank algorithm. The "importance" of the node depends on the incoming links to the node, i.e if an "important" node A points towards a node B it will increase the PageRank score of node B, and this is run iteratively. In the given figure, even though node C is only connected to one node it is considered "important" as the connection is to node B, which is an "important" node.
 
-        ![](images/pagerank.png)
+        {mo.image("images/pagerank.png")}
         <!-- <img src='images/pagerank.png' alt='pagerank' width='500'/> -->
 
         Source: Wikipedia