Home Link
Visitor
Bubble Chart for Collections with More Than 99 Films
Distribution of User Collections

Distribution of numbers of records cataloged by Take11 users. Y-axis shows the number of users; x-axis shows the number of records. Bin width for the histogram is 1 record.





Click for info

Bubble Chart for User Collections

Each bubble on this chart represents the collection for one Take11 user. The area of each bubble is proportional to the number of films in the collection. This display is limited to collections containing 100 or more films.
  1. Click on a bubble to see the number of films cataloged by that user. The number is displayed at the top of the left panel.
  2. Click on a user name in the list at left to identify the corresponding bubble and to see the number of films catalog by that user.
  3. When a user name is displayed in the top left panel, click on the name to go to the Profile page for that user.
  4. To clear the top of the left panel, click anywhere within the colored block at the top of the panel.
  5. To reload the bubble chart with a different distribution of bubbles, click on the "Reload Bubbles" link.
  6. CAUTION: Infrequently, the calculation may fail to find a distribution in which no two bubbles overlap. When this happens, an error message will appear, saying " ... please try to reload again." If this occurs, click "OK" in the message block, then either (a) reload the page, or (b) click on the "Reload Bubbles" link.

How This Works

The bubble distribution is computed using a hard-disk Monte Carlo algorithm that randomly throws different diameter disks onto a surface in such a way that no two disks overlap. The resulting disks are drawn, colored, and shaded using the HTML5-compliant Canvas tag.

Credits

  1. This bubble chart is inspired by those appearing on the IBM site ManyEyes.
  2. In Firefox, Chrome, and Safari, radial gradients on the bubbles were created following a Mozilla developer's tutorial for coding images using Canvas.
  3. IE6, IE7, and IE8 do not support the HTML5 Canvas tag; for those browsers, we use the ExplorerCanvas translator and the Canvas-Text library.