Update viz tutorial to the new API (projectmesa#2289)

Quick update to use the new SolaraViz Update. More updates to highlight more features should go into a separate PR.
tpike3 · Sep 9, 2024 · 5c70955 · 5c70955
1 parent 8043bc0
commit 5c70955
Showing 1 changed file with 41 additions and 22 deletions.
diff --git a/docs/tutorials/visualization_tutorial.ipynb b/docs/tutorials/visualization_tutorial.ipynb
@@ -11,7 +11,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "*This version of the visualisation tutorial is updated for Mesa 3.0, and works with Mesa `3.0.0a1` and above. If you are using Mesa 2.3.x, check out the [stable version](https://mesa.readthedocs.io/en/stable/tutorials/visualization_tutorial.html) of this tutorial on Readthedocs.*\n",
+    "*This version of the visualisation tutorial is updated for Mesa 3.0, and works with Mesa `3.0.0a4` and above. If you are using Mesa 2.3.x, check out the [stable version](https://mesa.readthedocs.io/en/stable/tutorials/visualization_tutorial.html) of this tutorial on Readthedocs.*\n",
     "\n",
     "**Important:** \n",
     "- If you are just exploring Mesa and want the fastest way to execute the code we recommend executing this tutorial online in a Colab notebook. [![Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/projectmesa/mesa/blob/main/docs/tutorials/visualization_tutorial.ipynb)\n",
@@ -21,7 +21,7 @@
     "\n",
     "So far, we've built a model, run it, and analyzed some output afterwards. However, one of the advantages of agent-based models is that we can often watch them run step by step, potentially spotting unexpected patterns, behaviors or bugs, or developing new intuitions, hypotheses, or insights. Other times, watching a model run can explain it to an unfamiliar audience better than static explanations. Like many ABM frameworks, Mesa allows you to create an interactive visualization of the model. In this section we'll walk through creating a visualization using built-in components, and (for advanced users) how to create a new visualization element.\n",
     "\n",
-    "First, a quick explanation of how Mesa's interactive visualization works. The visualization is done in a browser window, using the [Solara](https://solara.dev/) framework, a pure Python, React-style web framework. Running `solara run app.py` will launch a web server, which runs the model, and displays model detail at each step via the Matplotlib plotting library. Alternatively, you can execute everything inside a Jupyter environment."
+    "First, a quick explanation of how Mesa's interactive visualization works. The visualization is done in a browser window, using the [Solara](https://solara.dev/) framework, a pure Python, React-style web framework. Running `solara run app.py` will launch a web server, which runs the model, and displays model detail at each step via the Matplotlib plotting library. Alternatively, you can execute everything inside a notebook environment and display it inline."
    ]
   },
   {
@@ -105,7 +105,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Next, we instantiate the visualization object which (by default) displays the grid containing the agents, and timeseries of of values computed by the model's data collector. In this example, we specify the Gini coefficient.\n",
+    "Next, we instantiate the visualization object which (by default) displays the grid containing the agents, and timeseries of values computed by the model's data collector. In this example, we specify the Gini coefficient.\n",
     "\n",
     "There are 3 buttons:\n",
     "- the step button, which advances the model by 1 step\n",
@@ -123,14 +123,19 @@
    },
    "outputs": [],
    "source": [
-    "from mesa.visualization import SolaraViz\n",
+    "from mesa.visualization import SolaraViz, make_plot_measure, make_space_matplotlib\n",
+    "\n",
+    "# Create initial model instance\n",
+    "model1 = BoltzmannWealthModel(50, 10, 10)\n",
+    "\n",
+    "SpaceGraph = make_space_matplotlib(agent_portrayal)\n",
+    "GiniPlot = make_plot_measure(\"Gini\")\n",
     "\n",
     "page = SolaraViz(\n",
-    "    BoltzmannWealthModel,\n",
-    "    model_params,\n",
-    "    measures=[\"Gini\"],\n",
-    "    name=\"Money Model\",\n",
-    "    agent_portrayal=agent_portrayal,\n",
+    "    model1,\n",
+    "    components=[SpaceGraph, GiniPlot],\n",
+    "    model_params=model_params,\n",
+    "    name=\"Boltzmann Wealth Model\",\n",
     ")\n",
     "# This is required to render the visualization in the Jupyter notebook\n",
     "page"
@@ -170,11 +175,10 @@
    "outputs": [],
    "source": [
     "page = SolaraViz(\n",
-    "    BoltzmannWealthModel,\n",
-    "    model_params,\n",
-    "    measures=[\"Gini\"],\n",
-    "    name=\"Money Model\",\n",
-    "    agent_portrayal=agent_portrayal,\n",
+    "    model1,\n",
+    "    components=[SpaceGraph, GiniPlot],\n",
+    "    model_params=model_params,\n",
+    "    name=\"Boltzmann Wealth Model\",\n",
     ")\n",
     "# This is required to render the visualization in the Jupyter notebook\n",
     "page"
@@ -202,8 +206,8 @@
     "import solara\n",
     "from matplotlib.figure import Figure\n",
     "\n",
-    "\n",
-    "def make_histogram(model):\n",
+    "@solara.component\n",
+    "def Histogram(model):\n",
     "    # Note: you must initialize a figure using this method instead of\n",
     "    # plt.figure(), for thread safety purpose\n",
     "    fig = Figure()\n",
@@ -219,7 +223,23 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Next, we reinitialize the visualization object, but this time with the histogram (see the measures argument)."
+    "In a notebook environment we can directly display the visualization by calling it with the model instance"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "Histogram(model1)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Next, we update our solara frontend to use this new component"
    ]
   },
   {
@@ -229,11 +249,10 @@
    "outputs": [],
    "source": [
     "page = SolaraViz(\n",
-    "    BoltzmannWealthModel,\n",
-    "    model_params,\n",
-    "    measures=[\"Gini\", make_histogram],\n",
-    "    name=\"Money Model\",\n",
-    "    agent_portrayal=agent_portrayal,\n",
+    "    model1,\n",
+    "    components=[SpaceGraph, GiniPlot, Histogram],\n",
+    "    model_params=model_params,\n",
+    "    name=\"Boltzmann Wealth Model\",\n",
     ")\n",
     "# This is required to render the visualization in the Jupyter notebook\n",
     "page"