Avalanche-JS Demo

A partial JavaScript adaptation of Bob Tinker's NetLogo model Bureaucrats.v6 exploring Self-Organised Criticality.

The mathematics of avalanche size and frequency follows a power law that can be simulated to a first approximation by any system that exhibits self-organized criticality (SOC). In "How Nature Works" Per Bak reports a simplified model of a sandpile that he, Chao Tang, and Curt Wiesenfeld developed that shows SOC, the so-called BTW model. Bak also mentions that Grassberger describes a representation of this model that is fanciful but equivalent to the BTW model. Imagine an N-by-N grid of office desks and a bureaucrat sitting at each. A folder is randomly assigned to one desk. The bureaucrat does nothing until four or more folders are on his desk at which time he sends one to each of his four nearest neighbors. Any bureaucrat sitting at the edge of this array throws a folder out the window if there is no desk to send it to. Sometimes, adding one folder can cause multiple redistributions of folders as one bureaucrat's actions causes neighbors to exceed three folders, which then ripples through the office. In principle, just adding one new folder might involve redistribution at every desk, sometimes multiple times.

Seth Tisue, the lead NetLogo developer has contributed both Bureaucrats-fast a simplified re-write of Bureaucrats.v6 that runs about 20 times as fast as the original and a version of the model algorithm written in straight Scala Bureaucrats.scala. The speed of the Scala version should be comparable to the speed of a native Java adaptation and is much faster than the faster NetLogo model.

Testing Oct 28 2011 show this JavaScript adaptation runs the model about the same speed as the native Scala version and about 12 times faster than Bureaucrats-fast in NetLogo 5.0RC2. When displaying the folder visualization and graphing the JavaScript adaptation is about 18 times faster (Chrome 14.0.835.186 on a Mac OS X 10.6.8 system with a 2.66 GHz Intel Core i7).

The work on this JavaScript implementation took place over a 6-day period in Oct 2011. There was a surprising number of ways I found to improve performance for the JavaScript model and views. This image shows the change in performance for a selected set of commits over this period: performance progress, Oct 14-20, 2012.

A Google Spreadsheet is available with more complete Avalanche2D-JS Benchmarks comparing the performance of the model and the model, visualization, and grapher in Scala and NetLogo and on various browsers and operating systems including Android and iOS tablets and smartphone systems.

The initial array of desks with folders consists of 100x100 cells. A yellow cell indicates two folders on the desk, a blue cell is zero, green one, and red three folders. The 100x100 model will automatically stop after 5000 model steps if you leave it running.

  • Step
  • Desk Array Size
  • Maximum Model Steps
  • Rendering
  • JavaScript Array Type

About the Graph Interface built with the JavaScript library d3.js

  • Translate/Pan: drag on the graph canvas.
  • Zoom in: double-click or swipe up with two fingers
  • Zoom out: shift-double-click or swipe down with two fingers
  • Re-scale and axis: drag on one of the X or Y axis numeric labels
  • Select data point: click on a data point to select it
  • Change data point: drag a selected data point to change it's value
  • Delete data point: select data point and press the delete or backspace key
  • Add data point: hold ALT/Option key down and click an empty area of the graph to add a data point

References

Review of: How Nature Works: The Science of Self-Organised Criticality, Per Bak, New York, NY: Copernicus Press 1996

Self organized criticality in earth systems By Stefan Hergarten, page 94

On the avalanche size distribution in the BTW model

Getting a browser that supports JavaScript Typed Arrays

On some browsers using JavaScript Typed Arrays may be faster than using regular JavaScript Arrays. Typed Arrays are available in browsers that are WebGL-enabled. Get more information about whether your browser supports WebGL here: http://get.webgl.org/.

Folder-Desk Data Array: