Revert "Rewrite intro tutorial text and generate rst for advanced tut…

…orial (#1650)" (#1652) This reverts commit 3b5749a.
projectmesa · Apr 25, 2023 · 2adb81e · 2adb81e
1 parent 3b5749a
commit 2adb81e
Show file tree

Hide file tree

Showing 3 changed files with 500 additions and 557 deletions.
diff --git a/docs/tutorials/adv_tutorial.rst b/docs/tutorials/adv_tutorial.rst
@@ -17,10 +17,9 @@ create a new visualization element.
 
 **Note for Jupyter users: Due to conflicts with the tornado server Mesa
 uses and Jupyter, the interactive browser of your model will load but
-likely not work. This will require you to use run the code from .py
+likely not work. This will require you to run the code from .py
 files. The Mesa development team is working to develop a** `Jupyter
-compatible
-interface <https://github.com/projectmesa/mesa/issues/1363>`__.*\*
+compatible interface <https://github.com/projectmesa/mesa/issues/1363>`_.
 
 First, a quick explanation of how Mesa’s interactive visualization
 works. Visualization is done in a browser window, using JavaScript to
@@ -36,6 +35,7 @@ server and turns a model state into JSON data; and a JavaScript side,
 which takes that JSON data and draws it in the browser window. Mesa
 comes with a few modules built in, and let you add your own as well.
 
+
 Grid Visualization
 ^^^^^^^^^^^^^^^^^^
 
@@ -328,9 +328,9 @@ the class itself:
 
 .. code:: javascript
 
-   const HistogramModule = function(bins, canvas_width, canvas_height) {
-       // The actual code will go here.
-   };
+    const HistogramModule = function(bins, canvas_width, canvas_height) {
+        // The actual code will go here.
+    };
 
 Note that our object is instantiated with three arguments: the number of
 integer bins, and the width and height (in pixels) the chart will take
@@ -339,26 +339,27 @@ up in the visualization window.
 When the visualization object is instantiated, the first thing it needs
 to do is prepare to draw on the current page. To do so, it adds a
 `canvas <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API>`__
-tag to the page. It also gets the canvas’ context, which is required for
-doing anything with it.
+tag to the page. It also gets the canvas' context, which is required for doing
+anything with it.
 
 .. code:: javascript
 
-   const HistogramModule = function(bins, canvas_width, canvas_height) {
-     // Create the canvas object:
-       const canvas = document.createElement("canvas");
-       Object.assign(canvas, {
-         width: canvas_width,
-         height: canvas_height,
-         style: "border:1px dotted",
-       });
-     // Append it to #elements:
-     const elements = document.getElementById("elements");
-     elements.appendChild(canvas);
-
-     // Create the context and the drawing controller:
-     const context = canvas.getContext("2d");
-   };
+    const HistogramModule = function(bins, canvas_width, canvas_height) {
+      // Create the canvas object:
+        const canvas = document.createElement("canvas");
+        Object.assign(canvas, {
+          width: canvas_width,
+          height: canvas_height,
+          style: "border:1px dotted",
+        });
+      // Append it to #elements:
+      const elements = document.getElementById("elements");
+      elements.appendChild(canvas);
+
+      // Create the context and the drawing controller:
+      const context = canvas.getContext("2d");
+    };
+
 
 Look at the Charts.js `bar chart
 documentation <http://www.chartjs.org/docs/#bar-chart-introduction>`__.
@@ -372,49 +373,49 @@ created, we can create the chart object.
 
 .. code:: javascript
 
-   const HistogramModule = function(bins, canvas_width, canvas_height) {
-     // Create the canvas object:
-       const canvas = document.createElement("canvas");
-       Object.assign(canvas, {
-         width: canvas_width,
-         height: canvas_height,
-         style: "border:1px dotted",
-       });
-     // Append it to #elements:
-     const elements = document.getElementById("elements");
-     elements.appendChild(canvas);
-
-     // Create the context and the drawing controller:
-     const context = canvas.getContext("2d");
-
-     // Prep the chart properties and series:
-     const datasets = [{
-       label: "Data",
-       fillColor: "rgba(151,187,205,0.5)",
-       strokeColor: "rgba(151,187,205,0.8)",
-       highlightFill: "rgba(151,187,205,0.75)",
-       highlightStroke: "rgba(151,187,205,1)",
-       data: []
-     }];
-
-     // Add a zero value for each bin
-     for (var i in bins)
-       datasets[0].data.push(0);
-
-     const data = {
-       labels: bins,
-       datasets: datasets
-     };
-
-     const options = {
-       scaleBeginsAtZero: true
-     };
-
-     // Create the chart object
-     const chart = new Chart(context, {type: 'bar', data: data, options: options});
-
-     // Now what?
-   };
+    const HistogramModule = function(bins, canvas_width, canvas_height) {
+      // Create the canvas object:
+        const canvas = document.createElement("canvas");
+        Object.assign(canvas, {
+          width: canvas_width,
+          height: canvas_height,
+          style: "border:1px dotted",
+        });
+      // Append it to #elements:
+      const elements = document.getElementById("elements");
+      elements.appendChild(canvas);
+
+      // Create the context and the drawing controller:
+      const context = canvas.getContext("2d");
+
+      // Prep the chart properties and series:
+      const datasets = [{
+        label: "Data",
+        fillColor: "rgba(151,187,205,0.5)",
+        strokeColor: "rgba(151,187,205,0.8)",
+        highlightFill: "rgba(151,187,205,0.75)",
+        highlightStroke: "rgba(151,187,205,1)",
+        data: []
+      }];
+
+      // Add a zero value for each bin
+      for (var i in bins)
+        datasets[0].data.push(0);
+
+      const data = {
+        labels: bins,
+        datasets: datasets
+      };
+
+      const options = {
+        scaleBeginsAtZero: true
+      };
+
+      // Create the chart object
+      const chart = new Chart(context, {type: 'bar', data: data, options: options});
+
+      // Now what?
+    };
 
 There are two methods every client-side visualization class must
 implement to be able to work: ``render(data)`` to render the incoming
@@ -432,19 +433,18 @@ With that in mind, we can add these two methods to the class:
 
 .. code:: javascript
 
-   const HistogramModule = function(bins, canvas_width, canvas_height) {
-     // ...Everything from above...
-     this.render = function(data) {
-       datasets[0].data = data;
-       chart.update();
-     };
-
-     this.reset = function() {
-       chart.destroy();
-       chart = new Chart(context, {type: 'bar', data: data, options: options});
-     };
-   };
-
+    const HistogramModule = function(bins, canvas_width, canvas_height) {
+      // ...Everything from above...
+      this.render = function(data) {
+        datasets[0].data = data;
+        chart.update();
+      };
+
+      this.reset = function() {
+        chart.destroy();
+        chart = new Chart(context, {type: 'bar', data: data, options: options});
+      };
+    };
 Note the ``this``. before the method names. This makes them public and
 ensures that they are accessible outside of the object itself. All the
 other variables inside the class are only accessible inside the object