Forked and authored by Daniel Ribaudo.

The data visualized comes from this gist: Video Game Sales

Within this dataset, there is a listing of video game sales per country. Each video game listed is labelled with a genre, year, publisher, and platform.

Functionality:

Each chart is sales for each genre of video game plotted against time. The first chart is global sales, the second is North America, third is Japan, fourth is the EU, and finally all other sales.

The key visually maps colors to each genre. Hovering over text within the key highlights the corresponding lines/circles by making them much thicker. Clicking on the next hides/shows the lines/circles corresponding to that genre.

On the technical side, the data aggregation is only done once, allowing points/graphs to be rendered much more quickly after the initial calculation. The code is split into several javascript modules.

Titles are at the top of each graph to show what sales they correspond to within the data.

The width of polylines in the line graph and circles within the line graph all scale with the current viewbox of each SVG. As the user zooms in, the lines get smaller to make values more easy to distinguish. I did this through selecting the svgs, saving each one, selecting all shapes, and finally comparing the polyline parent against the original svg selected to get the index.

The user may scroll to zoom in and out of the graphs (all updated together). Clicking and draging moves the window that the user is viewing of the whole graphs. Scrolling was improved by making it scale with current zoom. Higher zoom causes a slower scroll, so that the speed feels consistent throughout. There is a reset button that resets the scroll of all of the small multiples.

Instead of scaling the viewboxes of the axes, they are redrawn with an updated domain to match the section of the graph being shown. Originally, changing their viewport was not useful because the text became very large, and the ticks were not updated to match the granularity of the zoom.

White boxes exist underneath the axes to prevent the line graph from overlapping them as the user panned the viewing window.

New Additions:

Clicking the title of a graph hides the graph. This action spawns a new button that is clickable within the table. Clicking this button un-hides the graph.