HTML5 Canvas Interactive Scatter Plot with 20,000 Nodes using KineticJS

The purpose of this lab is to demonstrate she shear number of nodes that KineticJS can handle by rendering 20,000 circles which are sensitive to mouseover events and can be drag and dropped.  This lab is also a great demonstration of event delegation, in which a single event handler attached to the stage handles the circle events.

Instructions: Mouse over the nodes to see more information and then drag and drop them around the stage

new window

Code Editor

Modified on November 7th, 2012 by Eric Rowell
comments powered by Disqus