Polkadot is a Raphael plugin that lets you create beautiful plot, here’s a demo. Inspired by this Raphael demo, but I rewrote the entire thing, made it a plugin, and added the abilities to 1) support multiple dots at one data point (explode and contract on mouse hovering), 2) specify your own x- and y-axis range (like showing negative values), and 3) support arbitrarily large max/min values (your canvas size will automatically grow). When you don’t specify max and min values, they will be calculated based on values of your dataset. fin, fout, and flick are functions for mouseover, mouseout, and mouseclick events that you can use to customize these events behaviors. They take the dot object as input, giving you full control of the json and Raphael’s circle set as input. You can customize the max and min radius size, axes size, the x and y step sizes between dots, check out the source code for detail.
Quickstart:
<html> <head> <script src=“js/raphael-min.js” type=“text/javascript”></script> <script src=“js/polkadot.js” type=“text/javascript”></script> <style> body {background: #888; } </style> </head> <body> <div id=“dots”></div> <script type=“text/javascript”> var p1 = Raphael(‘dots’), dots = [{x:2,y:0,size:130},{x:1,y:1,size:300},{x:1,y:1,size:100}, {x:1, y:1, size: 30}, {x:3,y:1,size:89},{x:2,y:1,size:292}, {x:2,y:-1,size:292}, {x:1,y:2,size:129},{x:3,y:-2,size:233}, {x:-2,y:-1,size:700}]; p1.polkadot.plot(dots, {minX:-5, maxX:5, maxR: 20, fclick:function(d){alert(d.size);}}); </script> </body> </html>