Tutorial: Making interactive CPMs in the browser with Artistoo

6. Quantitative outputs and plotting

The great thing about JavaScript is that there are a lot of other frameworks already which you can combine with Artistoo. In the previous example, you saw how to use the HTML Canvas. But we can also use an entirely unrelated framework like Plotly for JavaScript.

Please open 6-stats-and-graphs.html in a text editor and your browser. Have a look at the browser first; you'll see not only the simulation, but also a dynamical graph of the cell speed over time.

Now have a look at the code in the text editor. It resembles the previous example, with a few additions:

  • Some global variables for the plotly graph (step_speeds, time_vec, plot_history, trace, data, layout)
  • a new function updateGraph() which (predictably) animates this plot and is called every step()
  • at the top of the HTML code, there is an extra <script> tag loading the plotly library code
  • the HTML body contains separate <div>s for the simulation and for the graph
  • the setup() function has slightly changed to link the CPM Canvas to the right <div>

Exercise
Can you figure out how to graph the cell's current size (in number of pixels) instead of its speed over time?

(Hint: have a look at PixelsByCell and see how you could use it instead of CentroidsWithTorusCorrection to modify updateGraph() to do what you need.)

You can compare your answer to 6-stats-and-graphs-answer.html.

When you are done, click "Next" to learn how you can define your own CPM "constraints".