Super Shades

A data visualization of Marvel Supers and their costume colors

About

Super Shades is a data visualization project that I created to show the primary and secondary costume colors of some of the most popular Marvel super heroes and super villains.

All the supers are located in one big parent bubble. While there are a couple of the most popular primary color bubbles. The smaller individual bubbles are the color of the secondary color of that supers costume. You can tell heros apart from villains based on the border color of the individual bubbles. The user can move around the graph by clicking various bubbles and you will focus on the respective bubble.

Tech stack

Super Shades is a purely JavaScript project that uses the d3 library to provide the workspace and zoomable circle packing graph.

Features

  • A dynamic interface that will zoom to the clicked target
  • Coming soon: more info on the super provided by Marvel's API