I created a data visualizer for a MyAnimeList user's anime list.

This visualizer explores how a person uses their anime list.

The data can be filtered out by score, type, airing status, and watch status.

Try it by clicking the link "Visualizer" on the top-right navigation bar.

Check out a video demo by clicking the link "Video Demo" on the top-right navigation bar.

Data:

I use the JSON data from the Unofficial MyAnimeList API at http://mal-api.com/.

I downloaded 3 different user anime lists as "xinil.json", "maloandroid.json", and "deedyddt.json", which is stored in my vis folder.

Visualization Screenshot

The visualization is 3d and 2d.

The 3d:

The x-axis represents the square root of the number of total episodes.

The y-axis represents the square root of the number of episodes watched.

The z-axis represents the user's score.

The 2d:

The x-axis represents the number of total episodes.

the y-axis represents the number of episodes watched

User's Guide

Go ahead and click the link "Visualizer" on the top right to try out the program. Make sure you have a browser that supports WebGL.

If you really want to, download the source by clicking on the Source link on the top-right navigation bar and open the index.html page in the source on a browser that supports WebGL.

Go ahead and open the index.html page in the source on a browser that supports WebGL.

You can try out two other data sets.

You could type in "maloandroid" or "deedyddt". These are test accounts, which show a lot of MyAnimeList misusage.

Once the data is loaded, you should see a 3d vis to the bottom left and a 2d vis to the bottom right.

3d Visualization Camera Controls:

  1. You can rotate the camera by dragging the left mouse button.
  2. You can zoom in and out the camera by dragging the middle mouse button up and down.
  3. You can translate up towards the ceiling and down to the ground by dragging the right mouse button.

2d Visualization Control:

  1. Hover over a data point to see information about the specific anime.

General Controls for both visualizations:

  1. You can filter out the anime displayed by their type: TV, OVA, Movie, Special, ONA, and Music. Click on any combination of the checkboxes.
  2. You can filter out the anime displayed by their airing status: Currently Airing, Finished Airing, and Not Yet Aired. Click on any combination of the checkboxes.
  3. You can filter out the anime displayed by their watch status: Watching, Completed, On-Hold, Dropped, and Plan To Watch. Click on any combination of the checkboxes.
  4. You can filter out anime displayed by their score from Unscored, 1-10, and All with the slider.
  5. You can display the optimal Unbiased Plane where Completed anime should be by toggling the checkbox "Show Unbiased Plane"

Original Timeline and Goals:

  1. February 3, 2012 - Grab a MyAnimeList user's anime list data
  2. February 4, 2012 - Calculate ratio of episodes watched to score
  3. February 4, 2012 - Calculate ratio episodes watched to total episodes
  4. February 10, 2012 - Graph with x-axis (# of total episodes)
  5. February 10, 2012 - Graph with y-axis (# of episodes user watched)
  6. February 10, 2012 - Graph with z-axis (user's score)
  7. February 17, 2012 - Display one anime as an individual node on 3d graph
  8. February 24, 2012 - Color code the anime node from green to red showing it's score to episodes watched score
  9. February 24, 2012 - Make color code legend for anime node. Higher ratio of episodes watched to score will be shades of red. Lower ratio will be shades of green.
  10. March 2, 2012 - Compact the nodes to be displayed reasonably
  11. March 2, 2012 - Show only specific animes by their types

Initial Improvements:

These were suggested features during the update that I implemented.

  1. Show total number of anime in user's animelist
  2. Show lowest # of total episodes
  3. Show lowest # of watched episodes
  4. Show lowest user score
  5. Show highest # of total episodes
  6. Show highest # of watched episodes
  7. Show highest user score
  8. Grab any MyAnimeList user's anime list data with a textbox and button
  9. Calculate ratio of episodes watched to total episodes
  10. Graph with x-axis (square root of the # of total episodes)
  11. Graph with y-axis (square root of the # of episodes user watched)
  12. Color code the anime node from red to blue showing it's bias ratio understood by the ratio of episodes watched to total episodes instead of green.
  13. Make color code legend for anime node. Higher biased user score will be shades of red. Lower biased score will be shades of blue.
  14. Show only specific animes by their watching status: Watching, Completed, On-Hold, Dropped, and Plan To Watch
  15. Filter anime by their scores with a slider

Extra Improvements:

These were not proposed features that I implemented

  1. Filter only specific animes by their airing status: Currently Airing, Finished Airing, and Not Yet Aired
  2. Filter only specific animes by their type: TV, OVA, Movie, Special, ONA, and Music
  3. Show unbiased plane where episodes watched to total episodes is equal to 1
  4. Visualize a 2d variant of the 3d visualization to get a better understanding of the data
  5. Show anime data when hovering over 2d data plots

Data Structures:

I store the anime and shift it's data into my sphereMesh object.

It's attributes are

  • x - x position mapped to the square root of the total number of episodes
  • y - y position mapped to the square root of the watched number of episodes
  • z - z position mapped to the score ranging from 0-10
  • type - The type of the anime
  • watched_status - The watch status of the anime
  • episodes - The total number of episodes of the anime
  • watched_episodes - The number of watched episodes of the anime
  • score - The score the user gave the anime
  • status - The airing status of the anime
  • color - The color coded value of the sphere object based on the unbiased structure

These values are remapped to the 2d visualization to run an easy filter on the 3d scene data for removal.

Program Structure:

The program is contained in index.html, proj.js, stylesheets/final.css

In index.html, the controls, 2 visualizations, and processed data are templated.

In proj.js, the whole visualization is packaged under MAL.

The MAL package then structures the Vis class.

MAL has functions that handles loading the data from the existing JSON files on the system.

This Vis class handles the 3d and 2d visualizations from setting up the controls on index.html, processing the data and updating the elements in index.html, and rendering the visualizations in the 2 scene divs in index.html.

Conclusion:

I learned a lot about doing information visualization.

Comparing 3d and 2d information visualization techniques made it understandable what the disadvantages of each were.

I wish I had more time to make more 3d and 2d information visualizations and try more JavaScript InfoVis tools.

Related Works:

  1. Nicolas Garcia Belmonte. The three.js toolkit can be available from https://github.com/mrdoob/three.js/, 2012.
  2. Nicolas Garcia Belmonte. The PhiloGL toolkit can be available from http://www.senchalabs.org/philogl/
  3. Unofficial MyAnimeList. http://mal-api.com/
  4. John Resig. jQuery library. The jQuery library is available from http://jquery.com/, 2012.
  5. Paul Bakaus. jQuery UI library. The jQuery UI library is available from http://jqueryui.com/, 2012.
  6. Mike Bostock. d3 library. The d3 library is available from http://mbostock.github.com/d3/, 2012.
  7. Nicolas Garcia Belmonte. The JavaScript Infovis Toolkit is available from http://thejit.org/, 2012.