Demo: Map with labels

Originally Designed for a FireFox Greasemonkey Script. Adapted for limited Safari/Chrome support.

The problem: Given a scatter plot with labels, how can you display the labels with as little overlap as possible?

My solution: Treat the labels as like-charged ions that are attached to their points by springs. Then calculate iterations of how they would move using Coulomb's Law and Hooke's Law. Actually calculating the positions of least energy is not only computationaly excessive, but the iterative approach produces "good enough" results.

{ "1" : {"name":"cluster M1","position":"96:71","me":true}, "2" : {"name":"cluster M2","position":"96:71","me":true}, "3" : {"name":"cluster W","position":"97:71","me":true}, "4" : {"name":"solo Wine","position":"90:81","me":true}, "5" : {"name":"capital","position":"88:73","me":true}, "6" : {"name":"sulfur","position":"71:71","me":true}, "7" : {"name":"crystal","position":"54:61","me":true}, "8" : {"name":"far marble","position":"53:56","me":true}, "9" : {"name":"new marble","position":"43:68","me":true}, "10" : {"name":"Ariel","position":"54:56"}, "11" : {"name":"Aruba","position":"53:61"}, "12" : {"name":"Bonaire","position":"50:57"}, "13" : {"name":"Scon","position":"81:69"}, "14" : {"name":"Zeelandia","position":"49:57"}, "15" : {"name":"Batavia","position":"49:58"}, "16" : {"name":"Sint Maarten","position":"49:57"}, "17" : {"name":"Curacaco","position":"50:58"}, "18" : {"name":"Haven","position":"55:52"}, "19" : {"name":"Esperacchius","position":"40:60"}, "20" : {"name":"Vintia - null","position":"34:76"}, "21" : {"name":"Jaynestown","position":"58:66"}, "22" : {"name":"Yxilthir","position":"81:68"}, "23" : {"name":"Craymult","position":"81:68"}, "24" : {"name":"Toranoga","position":"80:68"}, "25" : {"name":"Aghinhyve","position":"77:68"}, "26" : {"name":"Whitefall","position":"64:66"}, "27" : {"name":"Zongora Heshmir","position":"72:62"} }

Reload Map

toggle

Final Notes: The map isn't perfect or as efficient as I would like, and I certainly could make it perform better and look better (It looks worse in Safari/Chrome for one thing). I have some interest in developing this further and maybe even making it as nice as Protovis, but I'm not using this code enough right now and I don't have the free time.