The Project

Data

Our detailed reinterpretation of the data structures lead to roughly 38 million rows of data in our database. While this is not necessarily a large amount compared to a corporate database, attempting to insert, interpret, and analyze these 38 million rows on a home PC proved a more difficult task. After quite an amount of both code and database tuning and optimization we managed to get the total insertion time down to roughly 45 minutes for all 99,997 matches. The image shown illustrates the general structure of the database.

Using the X and Y position for kills, we were able to generate a heatmap for these kills in the open-source program, gnuplot. This image was then overlaid and scaled onto the Summoner's Rift minimap image to show where kills occured the most over the course of this event. The main challenge here was determining a suitable coloring for the heatmap, but that was a simple fix that just took trial and error of colors. For the final image we applied a few post-processing effects including level adjustments and small blurring.

Site

The site uses Highcharts for all graph displays except the curved bars around the champion portrait. JQuery UI was used to make some nice sliders on the first page and the loading coin animation. There were a few large hurdles to cross when developing the site. The first was having an asynchronous loader for every image + another loader for each champion portrait in the champ select window. The second and third challenges were creating the curved bars on the Champ page and creating the unrolling parchment on the Other Stats page.

Browsers naturally load images asynchronously, so that part was easy. The hard part was determining what to load and what media the user needs to see immediately. Once the page loads the DOM elements (HTML), CSS, JavaScript, and coin images (front and back), the page shows the spinning coin animation. While those are being downloaded, the large background image is too, but the site waits until all elements (JSON files, images, audio) on the current page are loaded before the page is allowed to show. This gives the users a nice flow between pages while still showing that data is being loaded if they are on a slow connection. The second part of this challenge involved loading all 126 champion portraits from Riot's Data Dragon service. An asynchronous looping function (shown in image) was created to start loading images as soon as the client wasn't busy loading anything else, and it would stop when another page with more content was needing to be loaded. The "function" parameter added a <span> element to the champ select window and loaded the source image in that <span>. The "callback" function resolved a jQuery Deferred object that lets the non-asynchronous JavaScript know that the images were finished loading. This allows the page to display and sets a flag to not call the looping function anymore.

The second challenge was creating the curved bars that show champion pick, ban, and untouched rate as well as the win rate with/without the new Black Market items in this game mode. The bars are contained in two canvas elements (one on each side of the main portrait) that update ~30FPS. Each bar first saves the current context state then creates a curved clip area so all future canvas drawings are contained to that curved area. Next, the canvas calculates the height needed for each wave-bar and draws a small sine-wave (with small offsets) for each bar to simulate water movement. Then the canvas context is restored to its saved, unclipped state so it can draw the outlines and data on hover.

The last challenge was on the Other Stats page: the parchment unroll animation. This animation is drawn solely with DOM elements (i.e. no canvas/drawing functions) along with CSS overlays and a few jQuery movement animations. Basically, another parchment texture is laid over the main texture, but this one has a parent that hides all overflow. This parent has two siblings that control the shadows and highlights on the map to add a cylindrical effect to the parchment. As soon as the page is loaded and displayed, the overlaid parchment and its parent move to the right while the main parent element shrinks its width and an <audio> element plays the parchment sound. There you go, magic gone.

The Team

The team that processed the data and created the site is composed of Jon Stirling and Matthew Clark. They're pretty cool.