Data Visualization

Data visualizations are often used to encode meaning from raw information, and the raw information is often data.

Mark Hansen, Director of the Brown Institute at Columbia University, views data as an action, rather than a noun. Doing so allows you to think about the process of collecting data, the ethics behind this, and new ways of visualizing it; i.e. not just finite values, but understanding the process those values were collecting and what they’re able to communicate.

Different Types of Data

Definitions from UCLA Statistical Consulting

Categorical (Nominal or Qualitative)

A categorical variable (sometimes called a nominal variable) is one that has two or more categories, but there is no intrinsic ordering to the categories.

• A binary variable: Yes or No
• Vegetables: Spinach, Kale, Broccoli
• Nail polish colors: Red, Blue, Black, Pink, Orange

Ordinal

An ordinal variable is similar to a categorical variable. The difference between the two is that there is a clear ordering of the categories. For example, suppose you have a variable, economic status, with three categories (low, medium and high). In addition to being able to classify people into these three categories, you can order the categories as low, medium and high.

Quantitative

Data that has a unique numerical value associated with it. Usually answers questions including “How much?” “How often?” “How many?”

Different Types of Marks

Marks and Channels

Unless otherwise noted, all examples from this section are from the book Visualization Analysis and Design Tamara Munzner.

Marks

“Marks are basic geometric elements that depict items or links, and channels control their appearance. The effectiveness of a channel for encoding data depends on its type: the channels that perceptually convey magnitude information are a good match for ordered data, and those that convey identity information with categorical data”

Visual Channels

Visual Channels are a way to control the appearance of marks. They have to do with how humans perceive relationships visually.

Comparing Data

Much easier to tell on a bar chart than a pie chart

Easier to see how many times “Dog” is listed when there is a visual change

CSS Strategies

Consider what tools you have in simple CSS to create these marks and visual channels.

color
font-size
font-family
background-color
border-radius
border-style
width, height
hover
animation