Programming Role Compendium Data Visualization (D3.js)

[migzoo]

http://bl.ocks.org/migzoo/raw/8fe775b11d312bc9b78a/

Hello frens,

I whipped up this visual reimagining of ye olde role compendium, a resource found in pretty much every competitive tier subforum. I've always found role compendiums kind of lacking, so I wanted to try using data visualization tools to make something more aesthetically compelling and interactive.

This was done with D3.js, recycling a lot of code from Mike Bostock's Bilevel Partition example. For the actual data, I had to manually translate boltsandbombers' post into JSON, which is why I only have RU (my favorite tier) at the moment. I might translate the other tiers' role compendiums in the future, but if anyone is feeling inspired and wants to do so for me (following the format shown in the following gist), that would be dandy.
https://gist.github.com/migzoo/8fe775b11d312bc9b78a

I plan on doing similar small projects in D3 throughout the summer; I envision some sort of Competitive Pokemon Data Analytics/Visualization Suite (©migzoo 2015) which may include Speed Tiers, Viability Rankings, Cores, Usage Stats, etc. So look forward to the future. The data revolution is upon us.

-migzoo

 

[Temporelucis]

This is so cool!
I've developed a library which downloads and parses the usage statistic information from www.smogon.com/stats/most_recent/moveset, I think you might be interested.
Sorry for the ugly code, I'm an inexperienced programmer following his dream (?)

The files are used like this:

How to use?

First you need to import the libraries in this order:

<script src="yourPath/util.js" type="text/javascript"></script>
<script src="yourPath/statRequest.js" type="text/javascript"></script>
<script src="yourPath/statParser.js" type="text/javascript"></script>

READ ME
Please change the path of statRequest.js line 20 from:
this["statsWindow"].src = "../js/lib/statRequest.php?filename="+filename+"&id="+var_name;
to:
this["statsWindow"].src = "yourPath/statRequest.php?filename="+filename+"&id="+var_name;

Then in the actual javascript code we need to create a statisticsRequest object with the attributes tier and rank (i.e OU, 1825). As I wrote this I realized setting up the attributes is kinda useless. Initialize this just in case.

stats = new statisticsRequest(tier, rank);

Then we need to give the object a function to do after it downloads the statistics of the current tier and ranking.

stats.setHandleDownloadComplete("handleDownloadComplete()");

Finally we download the statistics.

stats.downloadStatistics();

After that, the function we used to handle when the download gets completed is executed and the information of the stats gets stored on: object["stats"].

NOTE
Instead of creating a new object every time you can use the function statRequest.setAttributes(tier, rank) to change the file you want to download.
Then continue normally like statRequest.downloadStatistics();

We proceed to parse the information inside the function we made to handle the download (i.e handleDownloadComplete).

We create a pokemonStatistics object with attributes object["stats"] and the name of the pokemon we are searching for in lower case (i.e stats["stats"], "charizard").

pokemonStats = new pokemonStatistics(stats["stats"], pokemonName);

Then we have to set the functions when the process is completed and (not mandatory) when it didn't find that pokemon.

pokemonStats.setHandleDone("handleDone()");
pokemonStats.setHandleNotFound("handleNotFound()");

Finally we parse the statistics.

pokemonStats.parseStatistics();

After that we can access the information inside the function we set up to handle when everything is done (i.e hanldeDone).

The information will be organized in this way:

pokemonStatistics["abilitiesArray"]["abilities"][0] = "intimidate"
pokemonStatistics["abilitiesArray"]["percentage"][0] = "98.7"
pokemonStatistics["abilitiesArray"]["abilities"][1] = "moxie"
pokemonStatistics["abilitiesArray"]["percentage"][1] = "1.2"

... You get the point
Just change the word abilitiesArray for what you're searching for:

• pokemonName. (this is a string with the pokemon name)
  
• abilitiesArray: contains "abilities", "percentage".
• itemsArray: contains "items", "percentage".
  
• spreadsArray: contains "natures", "spreads" which is an array of integers with length 6 (one for each stat), "percentage".
  
• movesArray: contains "moves", "percentage".
  
• teammatesArray: contains "teammates", "percentage".

Example: http://pastebin.com/JDhYtKnr

Since for all I know javascript can't open files from a server I used PHP to download them directly from smogon lol

Files:
Statistics Request (Javascript): http://pastebin.com/ZfsrWi1r
Statistics Request (PHP): http://pastebin.com/Ftw67sVK
Statistics Parser (Javascript): http://pastebin.com/PNY9PQvD
Util (Javascript): http://pastebin.com/rrdRzvBq

Here's the website with the code working:
http://teambuild.heliohost.org/popularset/
currently this is the only thing working

 

[Quite Quiet]

http://pastebin.com/7tW12LS8

Here's the compiled roles for NU, as promised. I also have a fix to allow Mr. Mime (and in the future Mime Jr. if needed) to not break anything, but gist's doesn't support pull reqs...

 

[Irraquated]

I put together a GitHub site. This is so people can create pull requests and etc. This site can be found here and the repository can be found here and currently has migzoo's RU Visualisation, Quite Quiet's NU Visualisation, and my PU Visualisation (Currently not finished).

PM me if you have any problems with this migzoo