The Basics of Design

Data visualizations should be easy to interpret and look credible. To do this there are several factors that be kept in focus, called Edward Tufte's Six Design Principals of Graphical Integrity[1]:

These are guidelines rather than hard rules. Some argue 'chart junk' (unnecessary visual elements that do not contribute to the information presented) is not always a bad thing. Sometimes grabbing the attention of the reader is important. When critiquing a visualization address the following questions:

The Design Toolkit

The three types of data are quantitative (numerical), categorical, and ordinal (ranking). There are many different ways of representing each type of data but some require more brainpower to figure out than others.

image.png

ColorBrewer is an excellent tools for choosing color schemes for scales.

Sketches

Sketchs are quick and easy drafts that let you test how things should look before getting into the coding. It allows us to communicate design ideas while exploring the data. Here are three general guidelines:

It's easy to get stuck only thinking in terms of pie charts, histograms, bar charts, and line graphs. Try new things and be creative!

Bootstrap Grid System

Structuring pages for responsive visualization is much easier using the bootstrap grid system. To set it up every element needs to be surrounded by a div container. Bootstrap sizes divs according to their class, ex. 'row' creates rows on the page.

image.png

image.png

A page is always 12 columns across. Within a row we might put multiple class tags so the columns add up to different values on mobile vs desktop. Using col-xx-offset creates invisible spaces which offset columns.

[1] Edward Tufte is a Statistician and Professor at Yale University. The six design principals come from his book The Visual Display of Quantitative Information.


Revision #3
Created 24 June 2023 12:37:57 by Elkip
Updated 24 June 2023 13:48:21 by Elkip