We recently came across the book Super Graphic: A Visual Guide to the Comic Book Universe. Author Tim Leong makes creative visualizations using data related to comics. And one of the charts was so clever, we wanted to make it in ZingChart, adding some interactive features.

thumbnail of comic book fortunes chart
View the full interactive data visualization at: https://www.zingchart.com/demos/fictional-fortunes-chart/

This chart tracks the net worth of wealthy comic book characters based on rankings generated by Forbes magazine every year.

Super Data Visualization

Super Graphic book cover

Super Graphic is really fun to flip through and browse. Here is how Amazon explains the book:

“The comic book universe is adventurous, mystifying, and filled with heroes, villains, and cosplaying Comic-Con attendees. This book by one of Wired magazine's art directors traverses the graphic world through a collection of pie charts, bar graphs, timelines, scatter plots, and more."

We really recommend you check out the book for some chart making inspiration!

 zingchart likes comics - they are visual storytelling

Here at ZingChart we like comics: they are a form of visual storytelling, as is data visualization! We decided to make one of Leong’s creative comic book data visualizations come to life with some interactive features. Below are the details of how we did it.

Visualizing Comic Book Character Income

A few key points about the chart:

  • There is no data for 2009, because Forbes Magazine did not release any rankings that year
  • There are chart annotations for three of the characters, which can be viewed by clicking on the corresponding character image in the legend
  • We added the Forbes data for 2013 for the characters present in Leong's chart

Adding Interactive Features

In addition to adding more data, we made the chart interactive as well:

  • Interactive legend can toggle the annotations for a certain character on and off
  • Annotations are now only visible when you want them to be
  • Tooltips appear when you hover over a node and give you a precise net worth number

JavaScript Chart Tips

To toggle the annotations on and off when the user clicks on a legend item, we used the ZingChart API events "legendmarkerclick" and "legenditemclick" and the API methods "addnote" and "removenote." We added an ID to each series that needed an annotation and used a switch statement inside of the object event listeners to toggle the annotations on and off. It’s worth noting that legend items (text) and legend markers are different objects in ZingChart and require different listeners. The code for the legenditemclick is below.

var richieNote = 0;  
var scroogeNote = 0;  
var flintNote = 0;  

zingchart.legend_item_click = function(p) {  
    switch(p.plotid){  
        case "richie":  
            if(richieNote === 0){  
               zingchart.exec('zc', 'addnote', {  
                    id : 'note1',  
                    type : 'node',  
                    text : 'Sharp decline due to poor...',  
                    plotindex : 0,  
                    nodeindex : 1,  
                    style:{  
                        "background-color":"white",  
                        "color":"black",  
                        "font-weight":"bold",  
                        "padding":5,  
                        "callout":1,  
                        "wrap-text":true,  
                        "width":"150px",  
                        "callout-position":"bottom",  
                        "offset-y":-40  
                    }  
                });  
                zingchart.exec('zc', 'addnote', {  
                    id : 'note2',  
                    type : 'node',  
                    text : 'Richie Rich gifts Occupy...',  
                    plotindex : 0,  
                    nodeindex : 6,  
                    style:{  
                        "background-color":"white",  
                        "color":"black",  
                        "font-weight":"bold",  
                        "padding":5,  
                        "callout":1,  
                        "width":"150px",  
                        "callout-position":"bottom",  
                        "wrap-text":true,  
                        "offset-y":"-110px"  
                        }  
                });  
            richieNote = 1;   
            } else {  
                zingchart.exec('zc', 'removenote', {  
                id : ['note1','note2']  
            });  
                richieNote = 0;  
            }   
            break;  

        case "flint":  
            if(flintNote === 0){  
               zingchart.exec('zc', 'addnote', {  
                    id : 'note3',  
                    type : 'xy',  
                    text : "Scrooge McDuck and his archrival...",  
                    x: 720,  
                    y: 250,  
                    style:{  
                        "background-color":"white",  
                        "color":"black",  
                        "font-weight":"bold",  
                        "padding":5,  
                        "callout":1,  
                        "callout-position":"top",  
                        "wrap-text":true,  
                        "width":"250px",  
                        "callout-height":"5px"  
                    }  
                });  
            flintNote = 1;   
            } else {  
                zingchart.exec('zc', 'removenote', {  
                id : 'note3'  
            });  
                flintNote = 0;  
            }   
            break;  

        case "scrooge":  
            if(scroogeNote === 0){  
               zingchart.exec('zc', 'addnote', {  
                    id : 'note4',  
                    type : 'node',  
                    text : 'Scrooge recovers his fortune...',  
                    plotindex : 2,  
                    nodeindex : 7,  
                    style:{  
                        "background-color":"#fff",  
                        "color":"black",  
                        "font-weight":"bold",  
                        "padding":5,  
                        "callout":1,  
                        "callout-width":"5px",  
                        "callout-height":"1px",  
                        "callout-position":"top",  
                        "wrap-text":true,  
                        "width":"150px",  
                        "offset-y":"55px"  
                    }  
                });  
            scroogeNote = 1;   
            } else {  
                zingchart.exec('zc', 'removenote', {  
                id : 'note4'  
            });  
                scroogeNote = 0;  
            }   
            break;  
    }  
};  

We just duplicated this entire switch and changed the call to “legendmarkerclick” to cover marker clicks; both calls share the toggle state variables.

JSON Details

There are a few unique aspects to this chart. Here is some insight into how you can apply these unique features to _your _ZingCharts.

How we made the Scrooge McDuck data look like it was going off the chart
The first challenge was having some lines and markers extend beyond the top of the chart.  But in charting, the y-axis needs to fit the entire dataset (go from 0-70). However, we only wanted the axis lines and guides to be visible up to 50. Accomplishing this style required a few steps:

  1. We hid the y-axis line because there is no way to “shorten” it. We also hid the x-axis guides, because these extend the entire height of the y-axis by default.
  2. We created new plots (just like the lines representing our data) and drew lines at each x-axis interval.  This was done by formatting the plots a value pairs.  We created plots at each interval extending from 0-50.
  3. We styled the plots to look like guides and removed any default interactivity ton plots (hover-state, tooltips, etc.).
  4. We added some properties to remove the plots from the legend.  We needed to hide the top few y-axis guides too.  This was easily done with tokens and rules.  Since we did not want guides to extend past 50, we added the following rule in the y-axis object:
 "guide":{  
            "rules":[  
                {  
                    "rule":"%i <= 5",                       
                    "line-color":"white",                       
                    "line-width":"1px",                       
                    "line-style":"solid",                       
                    "alpha":"1.0"                   
                },                   
                {                       
                    "rule":"%i > 5",                     
                    "line-color":"none"  
                }  
            ]  
        },  

*How we skipped a year
*
Skipping a year on the x-axis required two steps:

  1. When we set the values of the x-axis, we included each value as a string in an array.  Then, we simply created an empty string where we need to skip a year. Note: We also did not include a new plot here when building our guides.
  2. We needed our data to skip this year. If we implemented our data as an array, ZingChart would plot each data point consecutively along the x-axis at each interval. If we used null to skip the year, it would put a break in the line. The solution? Including all of our data as values pairs.  This allows you to have [interval, data point].
    *How we styled the y axis
    *
    The y-axis line was hidden, yet we needed to make some changes to the ticks and scale items (axis labels) to replicate to look of the chart. We worked with a few different objects inside of “scale-y”:{}.

  3. First we added the “item”:{} and tick:{} objects.

  4. Then we styled the tick to be large.
  5. We also used offset-x and offset-y properties to position the items just above the tick. Default positioning makes them centered and to the left.
    How we styled the legend
    We applied a variety of small tweaks to get the legend to match the one in the book, as well. You can right click on the chart and glance at the legend object to see how it was done.

More Interactive Dataviz

We had a blast making this chart. Have you seen any cool charts to which you’d like interactive features? Share the links with us in the comments section below.