Learning from print: 2

Another great visualization in the New York Times today.

Some really great paradigms that can be emulated:

  • Mixture of tabular & graphical data
  • The total is displayed right next to the label for each “row”
  • No legend off to the right or bottom. Instead each segment is identified, in context on the chart.
  • The Total Row is separated & also displayed graphically & numerically.
Advertisements

Minimal theme for HighCharts

HighCharts is a popular & flexible Javascript framework to create data visualizations. The only trouble is that the default HighChart themes have a lot of 3D, shadows, and gradient that detract from data analysis.

This post walks you through a few steps towards creating a minimal, no “Chartjunk” theme for HighCharts.

Before & After

Basic Bar

Image

Basic Line

Image

Steps towards a minimal theme

1: Include a theme file

This step allows you to create a theme file that can be fully controlled.

  • Create a copy of themes/gray.js. In this example I have named it “zuri.js”
  • Open the bar chart example: examples/bar-basic/index.html
  • Include zuri.js in the file.

Now open the file zuri.js in your favorite text editor. I use Coda.

2: Background

Remove the background color and gradient.

Replace

background:{
	linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	stops: [
		[0, 'rgb(96, 96, 96)'],
		[1, 'rgb(16, 16, 16)']
	]
}

With:

background:'#fff',

3. Bar & line colors

I decided to choose some happy colors for the theme. These are defined on the first of theme. ColourLovers is a great place to find some nice palettes for your chart.

colors: ["#1860A8","#ea7613", "#3F7C20", "#F06078", "#F0C000", "#903060", "#F09000","#55BF3B", "#DF5353", "#7798BF", "#D8DA86"],

4. Fonts

I am a Helvetica fan! There were a few places I had to replace the font family.
It might be easier to just find & replace in highcharts.js, though this has the disadvantage of being overwritten during an upgrade.

  • In zuri.js find and replace
    ‘Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif’
    with:
    Helvetica, Arial
  • Now, also add font definitions for the X & Y axis labels. Find these sections & add the following:
    labels: {
    style: {
    	color: '#333',
    	font: '12px Helvetica,Arial'
    }
  • To hide the labels altogether, find the specific axis label section & add:
    {enabled:false}
  • Similarly for the legend. Find the “legend:” section and add the following:
    itemStyle: {
    		color: '#555',
    		font: '12px Helvetica,Arial'
    	},
  • Finally, change the font for the tooltips. Find the “tooltips:” section and add the following:
    style: {
    	color: '#333',
    	font: '12px Helvetica,Arial'
    }

5. Remove shadows:

In the plotOptions section, add “shadow:false” to each of the chart types.

series:{
        	shadow: false
        }

6. Remove grid lines

In both the X & Y axis section, add or change the following setting.

gridLineWidth:1

7. Some final changes

  • Remove the rounded corners. In the Tooltips and Legend sections add borderRadius:0, and change the remove the gradient definitions from the background section.
  • Export buttons:
    Remove the gradient & make them more minimal.To do so, add a background color & make remove the border.

    exporting: {
    		buttons: {
    			exportButton: {
    				borderWidth:0,
    				backgroundColor:'#fff',
    				symbolFill: '#666'
    			},
    			printButton: {
    				borderWidth:0,
    				backgroundColor:'#fff',
    				symbolFill: '#666'
    			}
    		}
    	}

Resources

Download HighCharts

More about “Chart Junk”:

Learning from print

This weekend I poured over the visualizations in the New York Times (print copy) and for a change got around to writing about them.
The weather information is perfect: No chartjunk, many metrics compared with small multiples, and to top it success with no color!

"Success One chart, many metrics:

  • Many regions compared
    they had 4 rows and 4 columns
  • Weekly time trend
  • High & low temperatures for each region & time period
  • All time high & low for each region & time period
Legend for ease
Some really nice things they use:
Ideas to gather from the visualization:

  • A nice single legend that explains everything (if you ever need)
  • Scale is the same on all (must be the case for small multiples) – but they just align up on all – and they don’t show any numbers for anything else. Look at for example the comparison on line 2.
  • Grid lines in an odd & friendly multiple sort of way.
  • No x & y axis line
  • X axis labels shown on top of the grid

Just fabulousness (though that’s not a word). Zero training, ready to go, success for many years. What else could one want for?

Read more about successful data visualization at:

All of us could learn from their writing style, says so much and yet so approachable and easy.. “a thunderstorm or two”, if you can deal with one then don’t worry about the rest of your day!

Weekend print version for 6 bucks is totally worth it. Keep NY Times print version in business, get yourself a copy this weekend (if you haven’t already done so before)!