Update app.py

app.py

@@ -1,470 +1,477 @@
 import marimo
 
-__generated_with = "0.9.2"
-app = marimo.App()
+__generated_with = "0.12.0"
+app = marimo.App(width="medium")
 
 
 @app.cell
-def __():
+def _():
     import marimo as mo
-
-    mo.md("# Welcome to marimo! 🌊🍃")
-    return (mo,)
+    import pandas as pd
+    from svg import SVG, G, Circle, Path, Title, Rect, Line, Polygon, Text
+    import numpy as np
+    from collections import Counter
+    return (
+        Circle,
+        Counter,
+        G,
+        Line,
+        Path,
+        Polygon,
+        Rect,
+        SVG,
+        Text,
+        Title,
+        mo,
+        np,
+        pd,
+    )
 
 
 @app.cell
-def __(mo):
-    slider = mo.ui.slider(1, 22)
-    return (slider,)
+def _(pd):
+    #Data import
+
+    stage_data= pd.read_csv("C:/Users/paolo/Desktop/data visualisation project/stage_data.csv")
+    tdf_stages= pd.read_csv("C:/Users/paolo/Desktop/data visualisation project/tdf_stages.csv")
+    tdf_winners= pd.read_csv("C:/Users/paolo/Desktop/data visualisation project/tdf_winners.csv")
+    return stage_data, tdf_stages, tdf_winners
 
 
 @app.cell
-def __(mo, slider):
-    mo.md(
-        f"""
-        marimo is a **reactive** Python notebook.
+def _(mo, pd, tdf_stages):
+    #Text blocks to insert the initial and final date used to filter the database 
 
-        This means that unlike traditional notebooks, marimo notebooks **run
-        automatically** when you modify them or
-        interact with UI elements, like this slider: {slider}.
+    tdf_stages['Date'] = pd.to_datetime(tdf_stages['Date'], errors='coerce')
 
-        {"##" + "🍃" * slider.value}
-        """
+    start_date_input = mo.ui.text(
+        label="Initial Date (YYYY-MM-DD)",
+        value=tdf_stages["Date"].min().strftime("%Y-%m-%d")
     )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: disabling automatic execution": mo.md(
-                rf"""
-            marimo lets you disable automatic execution: just go into the
-            notebook settings and set
-
-            "Runtime > On Cell Change" to "lazy".
-
-            When the runtime is lazy, after running a cell, marimo marks its
-            descendants as stale instead of automatically running them. The
-            lazy runtime puts you in control over when cells are run, while
-            still giving guarantees about the notebook state.
-            """
-            )
-        }
+    end_date_input = mo.ui.text(
+        label="Final date (YYYY-MM-DD)",
+        value=tdf_stages["Date"].max().strftime("%Y-%m-%d")
     )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        Tip: This is a tutorial notebook. You can create your own notebooks
-        by entering `marimo edit` at the command line.
-        """
-    ).callout()
-    return
-
+    return end_date_input, start_date_input
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 1. Reactive execution
 
-        A marimo notebook is made up of small blocks of Python code called
-        cells.
-
-        marimo reads your cells and models the dependencies among them: whenever
-        a cell that defines a global variable  is run, marimo
-        **automatically runs** all cells that reference that variable.
+@app.cell
+def _(end_date_input, mo, start_date_input):
+    #show the text blocks in the output 
 
-        Reactivity keeps your program state and outputs in sync with your code,
-        making for a dynamic programming environment that prevents bugs before they
-        happen.
-        """
+    mo.hstack(
+        [start_date_input, end_date_input], justify="start"
     )
     return
 
 
-@app.cell(hide_code=True)
-def __(changed, mo):
-    (
-        mo.md(
-            f"""
-            **✨ Nice!** The value of `changed` is now {changed}.
-
-            When you updated the value of the variable `changed`, marimo
-            **reacted** by running this cell automatically, because this cell
-            references the global variable `changed`.
-
-            Reactivity ensures that your notebook state is always
-            consistent, which is crucial for doing good science; it's also what
-            enables marimo notebooks to double as tools and  apps.
-            """
-        )
-        if changed
-        else mo.md(
-            """
-            **🌊 See it in action.** In the next cell, change the value of the
-            variable  `changed` to `True`, then click the run button.
-            """
-        )
-    )
-    return
+@app.cell
+def _(mo):
+    #Slider to select the circles radius 
+
+    radius =mo.ui.slider(start=1, stop=10, step=1, value=5, label="radius")
+    return (radius,)
 
 
 @app.cell
-def __():
-    changed = False
-    return (changed,)
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: execution order": (
-                """
-                The order of cells on the page has no bearing on
-                the order in which cells are executed: marimo knows that a cell
-                reading a variable must run after the cell that  defines it. This
-                frees you to organize your code in the way that makes the most
-                sense for you.
-                """
-            )
-        }
-    )
-    return
+def _(Counter, end_date_input, start_date_input, tdf_stages):
+    # Group the "type" variable in four groups 
+    macro_class_mapping = {
+        'Flat cobblestone stage': 'Plain',
+        'Flat stage': 'Plain',
+        'Flat Stage': 'Plain',
+        'Half Stage': 'Other',
+        'High mountain stage': 'Mountain',
+        'Hilly stage': 'Hill',
+        'Individual time trial': 'Chrono',
+        'Intermediate stage': 'Other',
+        'Medium mountain stage': 'Mountain',
+        'Mountain stage': 'Mountain',
+        'Mountain Stage': 'Mountain',
+        'Mountain time trial': 'Chrono',
+        'Plain stage': 'Plain',
+        'Plain stage with cobblestones': 'Plain',
+        'Stage with mountain': 'Mountain',
+        'Stage with mountain(s)': 'Mountain',
+        'Team time trial': 'Chrono',
+        'Transition stage': 'Other'
+    }
 
+    tdf_stages['macro_class'] = tdf_stages['Type'].map(macro_class_mapping)
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        **Global names must be unique.** To enable reactivity, marimo imposes a
-        constraint on how names appear in cells: no two cells may define the same
-        variable.
-        """
-    )
-    return
+    # Filter the database using the data inserted in the Text Blocks 
+    start_date = start_date_input.value
+    end_date = end_date_input.value
 
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: encapsulation": (
-                """
-                By encapsulating logic in functions, classes, or Python modules,
-                you can minimize the number of global variables in your notebook.
-                """
-            )
-        }
-    )
-    return
+    filtered_df = tdf_stages[(tdf_stages['Date'] >= start_date) & (tdf_stages['Date'] <= end_date)]
 
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.accordion(
-        {
-            "Tip: private variables": (
-                """
-                Variables prefixed with an underscore are "private" to a cell, so
-                they can be defined by multiple cells.
-                """
-            )
-        }
-    )
-    return
 
+    # Find the 3 countries with most winning for each Type of stage
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 2. UI elements
+    all_macro_classes = ['Plain', 'Hill', 'Mountain', 'Chrono']
 
-        Cells can output interactive UI elements. Interacting with a UI
-        element **automatically triggers notebook execution**: when
-        you interact with a UI element, its value is sent back to Python, and
-        every cell that references that element is re-run.
+    macro_class_top3 = {}
+    for macro_class in all_macro_classes:
+        if macro_class in filtered_df['macro_class'].unique():
+            group = filtered_df[filtered_df['macro_class'] == macro_class]
+            top_countries = Counter(group['Winner_Country']).most_common(3)
+            macro_class_top3[macro_class] = [country for country, _ in top_countries]
+            while len(macro_class_top3[macro_class]) < 3:
+                macro_class_top3[macro_class].append("NA") 
+        else:
+            macro_class_top3[macro_class] =[' ', ' ', ' ']
 
-        marimo provides a library of UI elements to choose from under
-        `marimo.ui`.
-        """
+    print(macro_class_top3)
+    return (
+        all_macro_classes,
+        end_date,
+        filtered_df,
+        group,
+        macro_class,
+        macro_class_mapping,
+        macro_class_top3,
+        start_date,
+        top_countries,
     )
-    return
 
 
 @app.cell
-def __(mo):
-    mo.md("""**🌊 Some UI elements.** Try interacting with the below elements.""")
-    return
+def _(tdf_winners):
+    ##Scale function for flat stages 
 
+    X_MIN, X_MAX = tdf_winners["height"].min(), tdf_winners["height"].max()
+    Y_MIN, Y_MAX = tdf_winners["weight"].min(), tdf_winners["weight"].max()
 
-@app.cell
-def __(mo):
-    icon = mo.ui.dropdown(["🍃", "🌊", "✨"], value="🍃")
-    return (icon,)
 
+    SVG_X_MIN_P, SVG_X_MAX_P = 60, 150
+    SVG_Y_MIN_P, SVG_Y_MAX_P = 280, 470
 
-@app.cell
-def __(icon, mo):
-    repetitions = mo.ui.slider(1, 16, label=f"number of {icon.value}: ")
-    return (repetitions,)
 
+    def scale_x_plain(x):
+        return SVG_X_MIN_P + (x - X_MIN) / (X_MAX - X_MIN) * (SVG_X_MAX_P - SVG_X_MIN_P)
 
-@app.cell
-def __(icon, repetitions):
-    icon, repetitions
-    return
+    def scale_y_plain(y):
+        return SVG_Y_MAX_P - (y - Y_MIN) / (Y_MAX - Y_MIN) * (SVG_Y_MAX_P - SVG_Y_MIN_P)
+    return (
+        SVG_X_MAX_P,
+        SVG_X_MIN_P,
+        SVG_Y_MAX_P,
+        SVG_Y_MIN_P,
+        X_MAX,
+        X_MIN,
+        Y_MAX,
+        Y_MIN,
+        scale_x_plain,
+        scale_y_plain,
+    )
 
 
 @app.cell
-def __(icon, mo, repetitions):
-    mo.md("# " + icon.value * repetitions.value)
-    return
+def _(macro_class_top3, scale_x_plain, scale_y_plain, tdf_winners):
+    ## datapoints for plain stages 
+    Cplain=str(macro_class_top3['Plain'][0])
 
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 3. marimo is just Python
+    datapoints_plain = []
+    for i in range(106):
+        if Cplain.capitalize() in tdf_winners["birth_country"][i] :                                                        
+            datapoints_plain.append(
+            {
+            'x': scale_x_plain(tdf_winners["height"][i]),
+            'y': scale_y_plain(tdf_winners["weight"][i]),
+            'data-id': i
+        })
 
-        marimo cells parse Python (and only Python), and marimo notebooks are
-        stored as pure Python files — outputs are _not_ included. There's no
-        magical syntax.
+    print(Cplain)
+    print(datapoints_plain)
+    return Cplain, datapoints_plain, i
 
-        The Python files generated by marimo are:
 
-        - easily versioned with git, yielding minimal diffs
-        - legible for both humans and machines
-        - formattable using your tool of choice,
-        - usable as Python  scripts, with UI  elements taking their default
-        values, and
-        - importable by other modules (more on that in the future).
-        """
+@app.cell
+def _(X_MAX, X_MIN, Y_MAX, Y_MIN):
+    ##Scale function for hilly stages 
+
+    SVG_X_MIN_C, SVG_X_MAX_C = 210, 300
+    SVG_Y_MIN_C, SVG_Y_MAX_C = 280, 470
+
+    def scale_x_hill(x):
+        return SVG_X_MIN_C + (x - X_MIN) / (X_MAX - X_MIN) * (SVG_X_MAX_C - SVG_X_MIN_C)
+
+    def scale_y_hill(y):
+        return SVG_Y_MAX_C - (y - Y_MIN) / (Y_MAX - Y_MIN) * (SVG_Y_MAX_C - SVG_Y_MIN_C)
+    return (
+        SVG_X_MAX_C,
+        SVG_X_MIN_C,
+        SVG_Y_MAX_C,
+        SVG_Y_MIN_C,
+        scale_x_hill,
+        scale_y_hill,
     )
-    return
 
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 4. Running notebooks as apps
+@app.cell
+def _(i, macro_class_top3, scale_x_hill, scale_y_hill, tdf_winners):
+    ## datapoints for hilly stages 
+    Chill=str(macro_class_top3['Hill'][0])
+
+    datapoints_hill = []
+    for j in range(106):
+        if Chill.capitalize() in tdf_winners["birth_country"][j]:           
+            datapoints_hill.append(
+            {
+            'x': scale_x_hill(tdf_winners["height"][j]),
+            'y': scale_y_hill(tdf_winners["weight"][j]),
+            'data-id': i
+        })
+    return Chill, datapoints_hill, j
 
-        marimo notebooks can double as apps. Click the app window icon in the
-        bottom-right to see this notebook in "app view."
 
-        Serve a notebook as an app with `marimo run` at the command-line.
-        Of course, you can use marimo just to level-up your
-        notebooking, without ever making apps.
-        """
+@app.cell
+def _(X_MAX, X_MIN, Y_MAX, Y_MIN):
+    ##Scale function for Mountain stages
+
+    SVG_X_MIN_M, SVG_X_MAX_M = 360, 450
+    SVG_Y_MIN_M, SVG_Y_MAX_M = 280, 470
+
+    def scale_x_Mountain(x):
+        return SVG_X_MIN_M + (x - X_MIN) / (X_MAX - X_MIN) * (SVG_X_MAX_M - SVG_X_MIN_M)
+
+    def scale_y_Mountain(y):
+        return SVG_Y_MAX_M - (y - Y_MIN) / (Y_MAX - Y_MIN) * (SVG_Y_MAX_M - SVG_Y_MIN_M)
+    return (
+        SVG_X_MAX_M,
+        SVG_X_MIN_M,
+        SVG_Y_MAX_M,
+        SVG_Y_MIN_M,
+        scale_x_Mountain,
+        scale_y_Mountain,
     )
-    return
-
-
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 5. The `marimo` command-line tool
-
-        **Creating and editing notebooks.** Use
 
-        ```
-        marimo edit
-        ```
 
-        in a terminal to start the marimo notebook server. From here
-        you can create a new notebook or edit existing ones.
+@app.cell
+def _(macro_class_top3, scale_x_Mountain, scale_y_Mountain, tdf_winners):
+    ## datapoints for Mountain stages 
 
+    CMountain=str(macro_class_top3['Mountain'][0])
 
-        **Running as apps.** Use
+    datapoints_Mountain = []
+    for k in range(106):
+        if CMountain.capitalize() in tdf_winners["birth_country"][k]:
+            datapoints_Mountain.append(
+            {
+            'x': scale_x_Mountain(tdf_winners["height"][k]),
+            'y': scale_y_Mountain(tdf_winners["weight"][k]),
+            'data-id': k
+        })
+    return CMountain, datapoints_Mountain, k
 
-        ```
-        marimo run notebook.py
-        ```
 
-        to start a webserver that serves your notebook as an app in read-only mode,
-        with code cells hidden.
+@app.cell
+def _(X_MAX, X_MIN, Y_MAX, Y_MIN):
+    ##Scale function for Chrono stages
+
+    SVG_X_MIN_CR, SVG_X_MAX_CR = 520, 600
+    SVG_Y_MIN_CR, SVG_Y_MAX_CR = 280, 470
+
+    def scale_x_Chrono(x):
+        return SVG_X_MIN_CR + (x - X_MIN) / (X_MAX - X_MIN) * (SVG_X_MAX_CR - SVG_X_MIN_CR)
+
+    def scale_y_Chrono(y):
+        return SVG_Y_MAX_CR - (y - Y_MIN) / (Y_MAX - Y_MIN) * (SVG_Y_MAX_CR - SVG_Y_MIN_CR)
+    return (
+        SVG_X_MAX_CR,
+        SVG_X_MIN_CR,
+        SVG_Y_MAX_CR,
+        SVG_Y_MIN_CR,
+        scale_x_Chrono,
+        scale_y_Chrono,
+    )
 
-        **Convert a Jupyter notebook.** Convert a Jupyter notebook to a marimo
-        notebook using `marimo convert`:
 
-        ```
-        marimo convert your_notebook.ipynb > your_app.py
-        ```
+@app.cell
+def _(macro_class_top3, scale_x_Chrono, scale_y_Chrono, tdf_winners):
+    #datapoints for Chrono stages
 
-        **Tutorials.** marimo comes packaged with tutorials:
+    CChrono=str(macro_class_top3['Chrono'][0])
+    datapoints_Chrono = []
+    for z in range(106):
+        if CChrono.capitalize() in tdf_winners["birth_country"][z] :
 
-        - `dataflow`: more on marimo's automatic execution
-        - `ui`: how to use UI elements
-        - `markdown`: how to write markdown, with interpolated values and
-           LaTeX
-        - `plots`: how plotting works in marimo
-        - `sql`: how to use SQL
-        - `layout`: layout elements in marimo
-        - `fileformat`: how marimo's file format works
-        - `markdown-format`: for using `.md` files in marimo
-        - `for-jupyter-users`: if you are coming from Jupyter
+            datapoints_Chrono.append(
+            {
+            'x': scale_x_Chrono(tdf_winners["height"][z]),
+            'y': scale_y_Chrono(tdf_winners["weight"][z]),
+            'data-id': z
+        })
 
-        Start a tutorial with `marimo tutorial`; for example,
+    return CChrono, datapoints_Chrono, z
 
-        ```
-        marimo tutorial dataflow
-        ```
 
-        In addition to tutorials, we have examples in our
-        [our GitHub repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
-        """
-    )
-    return
+@app.cell
+def _(
+    Circle,
+    datapoints_Chrono,
+    datapoints_Mountain,
+    datapoints_hill,
+    datapoints_plain,
+    pd,
+    radius,
+):
+    #create circles for each stage type
+
+    circles_plain = []
+    for datapoint in datapoints_plain:
+        if not (pd.isna(datapoint["x"]) or pd.isna(datapoint["y"])):
+            circles_plain.append(
+                Circle(
+                    cx=datapoint["x"],
+                    cy=datapoint["y"],
+                    r=radius.value,
+                    fill="green",            
+                    fill_opacity=0.5,
+                    stroke_width=1,
+                    stroke="white"
+                )
+            )
 
+    circles_hill = []
+    for datapoint in datapoints_hill:
+        if not (pd.isna(datapoint["x"]) or pd.isna(datapoint["y"])):
+            circles_hill.append(
+                Circle(
+                    cx=datapoint["x"],
+                    cy=datapoint["y"],
+                    r=radius.value,
+                    fill="orange",            
+                    fill_opacity=0.5,
+                    stroke_width=1,
+                    stroke="white"
+                )
+            )
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        ## 6. The marimo editor
+    circles_mountain = []
+    for datapoint in datapoints_Mountain:
+        if not (pd.isna(datapoint["x"]) or pd.isna(datapoint["y"])):
+            circles_mountain.append(
+                Circle(
+                    cx=datapoint["x"],
+                    cy=datapoint["y"],
+                    r=radius.value,
+                    fill="brown",            
+                    fill_opacity=0.5,
+                    stroke_width=1,
+                    stroke="white"
+                )
+            )
 
-        Here are some tips to help you get started with the marimo editor.
-        """
+    circles_chrono= []
+    for datapoint in datapoints_Chrono:
+        if not (pd.isna(datapoint["x"]) or pd.isna(datapoint["y"])):
+            circles_chrono.append(
+                Circle(
+                    cx=datapoint["x"],
+                    cy=datapoint["y"],
+                    r=radius.value,
+                    fill="darkgray",            
+                    fill_opacity=0.5,
+                    stroke_width=1,
+                    stroke="white"
+                )
+            )
+    return (
+        circles_chrono,
+        circles_hill,
+        circles_mountain,
+        circles_plain,
+        datapoint,
     )
-    return
 
 
 @app.cell
-def __(mo, tips):
-    mo.accordion(tips)
-    return
-
+def _(
+    CChrono,
+    CMountain,
+    Chill,
+    Cplain,
+    Line,
+    Polygon,
+    SVG,
+    Text,
+    circles_chrono,
+    circles_hill,
+    circles_mountain,
+    circles_plain,
+    macro_class_top3,
+    mo,
+    radius,
+):
+    #complete graph 
+
+    plot = SVG(
+        width=700,
+        height=800,
+        elements= 
+        [ 
+            # Rettangoli e poligoni
+            Polygon(points=[(30, 250), (180, 250), (180, 650), (30, 650)], fill="green", stroke="black"),
+            Polygon(points=[(30, 250), (70, 220), (220, 220), (180, 250)], fill="forestgreen", stroke="black"),
+            Polygon(points=[(180, 250), (330, 250), (330, 650), (180, 650)], fill="orange", stroke="black"),
+            Polygon(points=[(180, 250), (330, 250), (370, 220), (220, 220)], fill="chocolate", stroke="black"),
+            Polygon(points=[(180, 250), (330, 250), (330, 200)], fill="goldenrod", stroke="black"),
+            Polygon(points=[(180, 250), (220, 220), (370, 170), (330, 200)], fill="gold", stroke="black"),
+            Polygon(points=[(330, 250), (480, 250), (420, 130), (330, 200)], fill="maroon", stroke="black"),
+            Polygon(points=[(330, 650), (480, 650), (480, 250), (330, 250)], fill="chocolate", stroke="black"),
+            Polygon(points=[(330, 200), (370, 170), (450, 100), (520, 220), (480, 250), (420, 130)], fill="maroon", stroke="black"),
+            Polygon(points=[(480, 250), (630, 250), (670, 220), (520, 220)], fill="gray", stroke="black"),
+            Polygon(points=[(480, 250), (630, 250), (630, 650), (480, 650)], fill="gray", stroke="black"),
+            Polygon(points=[(630, 650), (670, 630), (670, 220), (630, 250)], fill="darkgray", stroke="black"),
+
+            # Linee
+            Line(x1=30, y1=500, x2=630, y2=500, stroke="black", stroke_width=1),
+            Line(x1=630, y1=500, x2=670, y2=480, stroke="black", stroke_width=1),
+
+            Line(x1=30, y1=570, x2=630, y2=570, stroke="black", stroke_width=1),
+            Line(x1=630, y1=570, x2=670, y2=550, stroke="black", stroke_width=1),
+
+            #scritte
+            Text(x=120, y=490, text="height", font_size=20, fill="darkgreen"),
+            Text(x=40, y=270, text="weight", font_size=20, fill="darkgreen"),
+            Text(x=270, y=490, text="height", font_size=20, fill="darkorange"),
+            Text(x=190, y=270, text="weight", font_size=20, fill="darkorange"),
+            Text(x=420, y=490, text="height", font_size=20, fill="brown"),
+            Text(x=340, y=270, text="weight", font_size=20, fill="brown"),
+            Text(x=570, y=490, text="height", font_size=20, fill="darkgray"),
+            Text(x=490, y=270, text="weight", font_size=20, fill="darkgray"),
+
+            Text(x=50, y=400, text=Cplain, font_size=60, fill="darkgreen"),
+            Text(x=200, y=400, text=Chill, font_size=60, fill="darkorange"),
+            Text(x=350, y=400, text=CMountain, font_size=60, fill="brown"),
+            Text(x=500, y=400, text=CChrono, font_size=60, fill="darkgray"),
+
+            Text(x=70, y=550, text=str(macro_class_top3['Plain'][1]), font_size=40, fill="darkgreen"),
+            Text(x=220, y=550, text=str(macro_class_top3['Hill'][1]), font_size=40, fill="darkorange"),
+            Text(x=370, y=550, text=str(macro_class_top3['Mountain'][1]), font_size=40, fill="brown"),
+            Text(x=520, y=550, text=str(macro_class_top3['Chrono'][1]), font_size=40,  fill="darkgray"),
+
+            Text(x=85, y=620, text=str(macro_class_top3['Plain'][2]), font_size=20, fill="darkgreen"),
+            Text(x=235, y=620, text=str(macro_class_top3['Hill'][2]), font_size=20, fill="darkorange"),
+            Text(x=385, y=620, text=str(macro_class_top3['Mountain'][2]), font_size=20, fill="brown"),
+            Text(x=535, y=620, text=str(macro_class_top3['Chrono'][2]), font_size=20,  fill="darkgray"),
+
+        ] + circles_plain + circles_hill + circles_mountain + circles_chrono,
+    )
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md("""## Finally, a fun fact""")
-    return
 
+    mo.Html(plot.as_str())
 
-@app.cell(hide_code=True)
-def __(mo):
-    mo.md(
-        """
-        The name "marimo" is a reference to a type of algae that, under
-        the right conditions, clumps together to form a small sphere
-        called a "marimo moss ball". Made of just strands of algae, these
-        beloved assemblages are greater than the sum of their parts.
-        """
+    mo.hstack(
+        [mo.Html(plot.as_str()),  radius], justify="start"
     )
-    return
-
-
-@app.cell(hide_code=True)
-def __():
-    tips = {
-        "Saving": (
-            """
-            **Saving**
-
-            - _Name_ your app using the box at the top of the screen, or
-              with `Ctrl/Cmd+s`. You can also create a named app at the
-              command line, e.g., `marimo edit app_name.py`.
-
-            - _Save_ by clicking the save icon on the bottom right, or by
-              inputting `Ctrl/Cmd+s`. By default marimo is configured
-              to autosave.
-            """
-        ),
-        "Running": (
-            """
-            1. _Run a cell_ by clicking the play ( ▷ ) button on the top
-            right of a cell, or by inputting `Ctrl/Cmd+Enter`.
-
-            2. _Run a stale cell_  by clicking the yellow run button on the
-            right of the cell, or by inputting `Ctrl/Cmd+Enter`. A cell is
-            stale when its code has been modified but not run.
-
-            3. _Run all stale cells_ by clicking the play ( ▷ ) button on
-            the bottom right of the screen, or input `Ctrl/Cmd+Shift+r`.
-            """
-        ),
-        "Console Output": (
-            """
-            Console output (e.g., `print()` statements) is shown below a
-            cell.
-            """
-        ),
-        "Creating, Moving, and Deleting Cells": (
-            """
-            1. _Create_ a new cell above or below a given one by clicking
-                the plus button to the left of the cell, which appears on
-                mouse hover.
-
-            2. _Move_ a cell up or down by dragging on the handle to the 
-                right of the cell, which appears on mouse hover.
-
-            3. _Delete_ a cell by clicking the trash bin icon. Bring it
-                back by clicking the undo button on the bottom right of the
-                screen, or with `Ctrl/Cmd+Shift+z`.
-            """
-        ),
-        "Disabling Automatic Execution": (
-            """
-            Via the notebook settings (gear icon) or footer panel, you
-            can disable automatic execution. This is helpful when
-            working with expensive notebooks or notebooks that have
-            side-effects like database transactions.
-            """
-        ),
-        "Disabling Cells": (
-            """
-            You can disable a cell via the cell context menu.
-            marimo will never run a disabled cell or any cells that depend on it.
-            This can help prevent accidental execution of expensive computations
-            when editing a notebook.
-            """
-        ),
-        "Code Folding": (
-            """
-            You can collapse or fold the code in a cell by clicking the arrow
-            icons in the line number column to the left, or by using keyboard
-            shortcuts.
-
-            Use the command palette (`Ctrl/Cmd+k`) or a keyboard shortcut to
-            quickly fold or unfold all cells.
-            """
-        ),
-        "Code Formatting": (
-            """
-            If you have [ruff](https://github.com/astral-sh/ruff) installed,
-            you can format a cell with the keyboard shortcut `Ctrl/Cmd+b`.
-            """
-        ),
-        "Command Palette": (
-            """
-            Use `Ctrl/Cmd+k` to open the command palette.
-            """
-        ),
-        "Keyboard Shortcuts": (
-            """
-            Open the notebook menu (top-right) or input `Ctrl/Cmd+Shift+h` to
-            view a list of all keyboard shortcuts.
-            """
-        ),
-        "Configuration": (
-            """
-           Configure the editor by clicking the gears icon near the top-right
-           of the screen.
-           """
-        ),
-    }
-    return (tips,)
+    return (plot,)
 
 
 if __name__ == "__main__":
     app.run()
+