Crash Course in Data: Data Types, Graphical Marks, and Visual Encoding Channels

For graphics see

Data Types, Graphical Marks, and Visual Encoding Channels

A visualization represents data using a collection of graphical marks such as bars, lines, and point symbols. The attributes of a mark — such as its position, shape, size, or color — serve as channels in which we can encode underlying data values.

With a basic framework of data types, marks, and encoding channels, we can concisely create a wide variety of visualizations. In this notebook, we explore each of these elements and show how to use them to create custom statistical graphics.

import {vl} from “@vega/vega-lite-api-v5”

import {fromColumns, printTable} from “@uwdata/data-utilities”

Global Development Data

We will visualize global health and population measures for countries of the world, recorded over the years 1955 to 2005. The data was collected by the Gapminder Foundation and shared in Hans Rosling’s popular TED talk.

(If you haven’t seen the talk, we encourage you to watch it!)

Let’s first load the dataset from the vega-datasets collection into a JavaScript array.

data = Array(693) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

How big is the data?

693 rows, 6 columns!

For each country and year (in 5-year intervals), we have measures of fertility in terms of the number of children per woman (fertility), life expectancy in years (life_expect), and total population (pop).

We also see a cluster field with an integer code. What might this represent? We'll try and solve this mystery as we visualize the data!

Let’s also create a smaller data array, filtered down to values for the year 2000 only:

data2000 = Array(63) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

Data Types

A data type is a classification of data that defines the type of values it can hold, such as numeric, character, Boolean, etc. It also defines the operations that can be performed on the data and the way it is stored in memory. Common data types include:

1. Integer
2. Floating point
3. Character
4. String
5. Boolean
6. Date/Time
7. Array
8. Tuples
9. Dictionary
10. Object-oriented data types (classes)

Data type examples:

1. Integer: Whole numbers such as -2, 0, 1, 100, etc.
2. Floating point: Numbers with decimal points such as -2.3, 0.0, 1.67, etc.
3. Character: A single letter, number, or symbol such as ‘a’, ‘5’, ‘$’, etc.
4. String: A sequence of characters, such as “Hello World” or “123456”.
5. Boolean: A binary value that can be either true or false.
6. Date/Time: A combination of date and time, such as “2023–01–30 12:30:15”.
7. Array: An ordered collection of elements of the same data type, such as [1, 2, 3, 4, 5].
8. Tuples: An ordered, immutable collection of elements of different data types, such as (1, “Hello”, 2.3).
9. Dictionary: An unordered collection of key-value pairs, where each key is unique, such as {‘name’: ‘John’, ‘age’: 30}.
10. Object-oriented data types (classes): Custom data types defined using class construct in object-oriented programming, such as a Student class with attributes such as name, age, and courses.

The first ingredient in effective visualization is the input data. Data values can represent different forms of measurement. What kinds of comparisons do those measurements support? And what kinds of visual encodings then support those comparisons?

We will start by looking at the basic data types that Vega-Lite uses to inform visual encoding choices. These data types determine the kinds of comparisons we can make, and thereby guide our visualization design decisions.

Nominal (N)

Nominal data — also called categorical data — consist of category names.

With nominal data we can compare the equality of values: is value A the same or different than value B? (A = B), supporting statements like “A is equal to B” or “A is not equal to B”. In the dataset above, the country field is nominal.

When visualizing nominal data we should readily perceive if values are the same or different: position, color hue (blue, red, green, etc.), and shape are all reasonable options. In contrast, using a size channel to encode nominal data might mislead us, suggesting rank-order or magnitude differences among values that do not exist!

Ordinal (O)

Ordinal data consist of values that have a specific ordering.

With ordinal data we can compare the rank-ordering of values: does value A come before or after value B? (A < B), supporting statements like “A is less than B” or “A is greater than B”. In the dataset above, we can treat the year field as ordinal.

When visualizing ordinal data, we should perceive a sense of rank-order. Position, size, or color value (brightness) might be appropriate, whereas color hue (which is not perceptually ordered) would be less appropriate.

Quantitative (Q)

With quantitative data we can measure numerical differences among values. There are multiple sub-types of quantitative data:

For interval data we can measure the distance (interval) between points: what is the distance to value A from value B? (A — B), supporting statements such as “A is 12 units away from B”.

For ratio data the zero point is meaningful, so we can also measure proportions or scale factors: value A is what proportion of value B? (A / B), supporting statements such as “A is 10% of B” or “B is 7 times larger than A”.

In the dataset above, year is a quantitative interval field (the value of year "zero" is subjective), whereas fertility and life_expect are quantitative ratio fields (zero is meaningful for calculating proportions). Vega-Lite represents quantitative data, but does not make a distinction between interval and ratio types.

Quantitative values can be visualized using position, size, or color value, among other channels. An axis with a zero baseline is essential for proportional comparisons of ratio values, but can be safely omitted for interval comparisons.

Temporal (T)

Temporal values measure time points or intervals. This type is a special case of quantitative values (timestamps) with rich semantics and conventions (i.e., the Gregorian calendar).

Example temporal values include date strings such as “2019-01-04” and “Jan 04 2019”, as well as standardized date-times such as the ISO date-time format: “2019-01-04T17:50:35.643Z”. There are no temporal values in our global development dataset above, as the year field is encoded as an integer.

The temporal type in Vega-Lite supports reasoning about time units (year, month, day, hour, etc.), and provides methods for requesting specific time intervals. For more details about temporal data in Vega-Lite, see the TimeUnit documentation.

Summary

These data types are not mutually exclusive, but rather form a hierarchy: ordinal data support nominal (equality) comparisons, while quantitative data support ordinal (rank-order) comparisons.

Moreover, these data types do not provide a fixed categorization. For example, just because a data field is represented using a number doesn’t mean we have to treat it as a quantitative type! We might interpret a set of ages (10 years old, 20 years old, etc.) as nominal (underage or overage), ordinal (grouped by year), or quantitative (calculate average age).

Now let’s examine how to visualize these data types using encoding channels.

Encoding Channels

Visual encoding channels are methods used to represent data in visual forms, such as graphs or charts. The following are common visual encoding channels:

1. Position: Data values are represented by the position of graphical marks on the x and y axes.
2. Length: Data values are represented by the length of graphical marks, such as bar charts and histograms.
3. Angle: Data values are represented by the angle of graphical marks, such as pie charts.
4. Area: Data values are represented by the area of graphical marks, such as stacked area graphs.
5. Color: Data values are represented by the color of graphical marks, such as heatmaps.
6. Shape: Data values are represented by the shape of graphical marks, such as using different shapes for different categories in a scatter plot.
7. Opacity: Data values are represented by the opacity of graphical marks, such as using transparent bars to show the relative magnitude of values.
8. Label: Data values are represented by the labelling of graphical marks, such as adding values to the bars in a bar chart.
9. Texture: Data values are represented by the texture of graphical marks, such as using dotted lines to represent a trend.
10. Value order: Data values are represented by the order of graphical marks, such as sorting bars in a bar chart in descending order of values.

Visual Encoding Channels examples:

1. Position: A scatter plot showing the relationship between height and weight of individuals, where each dot represents an individual and its position on the x-axis represents its height and its position on the y-axis represents its weight.
2. Length: A bar chart showing the sales of different products, where each bar represents a product and its length represents its sales.
3. Angle: A pie chart showing the proportion of expenses in different categories in a household budget, where each segment represents a category and its angle represents its proportion.
4. Area: A stacked area graph showing the contribution of different energy sources to total energy consumption, where each area represents an energy source and its area represents its contribution.
5. Color: A heatmap showing the relationship between temperature and humidity, where each cell represents a temperature-humidity combination and its color represents the frequency of occurrences.
6. Shape: A scatter plot showing the relationship between two variables, where each dot represents a data point and its shape represents its category.
7. Opacity: A bar chart showing the relative magnitude of values, where the bars are transparent and their opacity represents their values.
8. Label: A bar chart showing the sales of different products, where each bar is labeled with its value.
9. Texture: A line graph showing the trend of a variable over time, where the line is dotted to represent a trend.
10. Value order: A bar chart showing the sales of different products, where the bars are sorted in descending order of values to show the relative magnitudes.

At the heart of Vega-Lite is the use of encodings that bind data fields (with a given data type) to available encoding channels of a chosen mark type. In this notebook we’ll examine the following encoding channels:

• x: Horizontal (x-axis) position of the mark.
• y: Vertical (y-axis) position of the mark.
• size: Size of the mark. May correspond to area or length, depending on the mark type.
• color: Mark color, specified as a legal CSS color.
• opacity: Mark opacity, ranging from 0 (fully transparent) to 1 (fully opaque).
• shape: Plotting symbol shape for point marks.
• tooltip: Tooltip text to display upon mouse hover over the mark.
• order: Mark ordering, determines line/area point order and drawing order.
• column: Facet the data into horizontally-aligned subplots.
• row: Facet the data into vertically-aligned subplots.

For a complete list of available channels, see the Vega-Lite encoding documentation.

X

The x encoding channel sets a mark's horizontal position (x-coordinate). In addition, default choices of axis and title are made automatically. In the chart below, the choice of a quantitative data type results in a continuous linear axis scale:

Y

The y encoding channel sets a mark's vertical position (y-coordinate). Here we've added the cluster field using an ordinal (O) data type. The result is a discrete axis that includes a sized band, with a default step size, for each unique value:

What happens to the chart above if you swap the O and Q field types?

If we instead add the life_expec field as a quantitative (Q) variable, the result is a scatter plot with linear scales for both axes:

By default, axes for linear quantitative scales include zero to ensure a proper baseline for comparing ratio-valued data. In some cases, however, a zero baseline may be meaningless or you may want to focus on interval comparisons. To disable automatic inclusion of zero, configure the encoding scale attribute:

Now the axis scales no longer include zero by default. Some padding still remains, as the axis domain end points are automatically snapped to nice numbers like multiples of 5 or 10.

What happens if you also add nice:false to the scale properties above?

Size

The size encoding channel sets a mark's size or extent. The meaning of the channel can vary based on the mark type.

For point marks, the size channel maps to the pixel area of the plotting symbol, such that the diameter of the point matches the square root of the size value.

Let’s augment our scatter plot by encoding population (pop) on the size channel. As a result, the chart now also includes a legend for interpreting the size values.

In some cases we might be unsatisfied with the default size range. To provide a customised span of sizes, set the range parameter of the scale attribute to an array indicating the smallest and largest sizes. Here we update the size encoding to range from 0 pixels (for zero values) to 1,000 pixels (for the maximum value in the scale domain):

Color and Opacity

The color encoding channel sets a mark's color. The style of color encoding is highly dependent on the data type: nominal data will default to a multi-hued qualitative color scheme, whereas ordinal and quantitative data will use perceptually ordered color gradients.

Here, we encode the cluster field using the color channel and a nominal (N) data type, resulting in a distinct hue for each cluster value. Can you start to guess what the cluster field might indicate?

If you prefer filled shapes, pass {filled: true} to the markPoint method:

By default, Vega-Lite uses a bit of transparency to help combat over-plotting. We are free to further adjust the opacity, either by passing a default value to the mark* method, or using a dedicated encoding channel.

Here we demonstrate how to provide a constant value to an encoding channel instead of binding a data field:

Shape

The shape encoding channel sets the geometric shape used by point marks. Unlike the other channels we have seen so far, the shape channel can not be used by other mark types. The shape encoding channel should only be used with nominal data, as perceptual rank-order and magnitude comparisons are not supported.

Let’s encode the cluster field using shape as well as color. Using multiple channels for the same underlying data field is known as a redundant encoding. The resulting chart combines both color and shape information into a single symbol legend:

Tooltips & Ordering

By this point, you might feel a bit frustrated: we’ve built up a chart, but we still don’t know what countries the visualized points correspond to! Let’s add interactive tooltips to enable exploration.

The tooltip encoding channel determines tooltip text to show when a user moves the mouse cursor over a mark. Let's add a tooltip encoding for the country field, then investigate which countries are being represented.

As you mouse around you may notice that you can not select some of the points. For example, the largest dark blue circle corresponds to India, which is drawn on top of a country with a smaller population, preventing the mouse from hovering over that country. To fix this problem, we can use the order encoding channel.

The order encoding channel determines the order of data points, affecting both the order in which they are drawn and, for line and area marks, the order in which they are connected to one another.

Let’s order the values in descending rank order by the population (pop), ensuring that smaller circles are drawn later than larger circles:

Now we can identify the smaller country being obscured by India: it’s Bangladesh!

We can also now figure out what the cluster field represents. Mouse over the various colored points to formulate your own explanation.

At this point we’ve added tooltips that show only a single property of the underlying data record. To show multiple values, we can provide the tooltip channel an array of encodings, one for each field we want to include:

Now we can see multiple data fields upon mouse over! We used an array of string values to indicate the fields, which serves as a convenient alternative to writing vl.tooltip().fieldN('name') for all three field entries.

Column and Row Facets

Spatial position is one of the most powerful and flexible channels for visual encoding, but what can we do if we already have assigned fields to the x and y channels? One valuable technique is to create a trellis plot, consisting of sub-plots that show a subset of the data. A trellis plot is one example of the more general technique of presenting data using small multiples of views.

The column and row encoding channels generate either a horizontal (columns) or vertical (rows) set of sub-plots, in which the data is partitioned according to the provided data field.

Here is a trellis plot that divides the data into one column per cluster value:

The plot above does not fit on screen, making it difficult to compare the sub-plots to each other! We can set the width and height properties to create a smaller set of multiples. Also, as the column headers already label the cluster values, let's remove our color legend by setting it to null. To make better use of space we can also orient our size legend to the 'bottom' of the chart.

Underneath the hood, the column and row encodings are translated into a new specification that uses the facet view composition operator. We will re-visit faceting in greater depth later on!

In the meantime, can you rewrite the chart above to facet into rows instead of columns?

A Peek Ahead: Interactive Filtering

In later modules, we’ll dive into interaction techniques for data exploration. Here is a sneak peak: binding a range slider to the year field to enable interactive scrubbing through each year of data. Don't worry if the code for the cell below is a bit confusing at this point, as we will cover interaction in detail later.

Drag the slider back and forth to see how the data values change over time!

select_year1955

Graphical Marks

Graphical marks are symbols or shapes used in data visualization to represent data points or values. Some common graphical marks include:

1. Points/Dots: Represent individual data points in a scatter plot.
2. Line: Connects multiple data points in a line graph.
3. Bar: Represents a data value as a rectangular bar in a bar chart.
4. Histogram: Represents the distribution of a dataset by dividing it into bins and plotting bars.
5. Pie: Represents the proportion of different categories in a circular shape in a pie chart.
6. Area: Represents the magnitude of data values as the area of a shape, often used in stacked area graphs.
7. Box plot: Represents the distribution of a dataset using its median, quartiles, and outliers.
8. Heatmap: Represents the values of two or more variables in a 2D matrix using color or shading.
9. Stem-and-Leaf Plot: Represents the distribution of a dataset using its individual digits.
10. Gantt chart: A bar graph that represents the schedule of tasks or events over time.

Graphical mark examples:

1. Points/Dots: Used in a scatter plot to show the relationship between two variables. For example, height and weight of individuals.
2. Line: Used in line graphs to show the change in a variable over time. For example, stock prices over a period of time.
3. Bar: Used in bar charts to compare the values of different categories. For example, sales of different products.
4. Histogram: Used to show the distribution of a dataset. For example, the distribution of exam scores.
5. Pie: Used to show the proportion of different categories in a whole. For example, the proportion of expenses in different categories in a household budget.
6. Area: Used in stacked area graphs to show the cumulative effect of different categories over time. For example, the contribution of different energy sources to total energy consumption.
7. Box plot: Used to show the distribution of a dataset by showing its median, quartiles, and outliers. For example, the distribution of heights of individuals in a population.
8. Heatmap: Used to show the values of two or more variables in a 2D matrix using color or shading. For example, the relationship between temperature and humidity.
9. Stem-and-Leaf Plot: Used to show the distribution of a dataset using its individual digits. For example, the distribution of ages of individuals in a population.
10. Gantt chart: Used to show the schedule of tasks or events over time. For example, the schedule of a construction project, showing the start and end dates of different tasks.

Our exploration of encoding channels above exclusively uses point marks to visualize the data. However, the point mark type is only one of the many geometric shapes that can be used to visually represent data. Vega-Lite includes a number of built-in mark types, including:

• markArea() - Filled areas defined by a top-line and a baseline.
• markBar() - Rectangular bars.
• markCircle() - Scatter plot points as filled circles.
• markLine() - Connected line segments.
• markPoint() - Scatter plot points with configurable shapes.
• markRect() - Filled rectangles, useful for heatmaps.
• markRule() - Vertical or horizontal lines spanning the axis.
• markSquare() - Scatter plot points as filled squares.
• markText() - Scatter plot points represented by text.
• markTick() - Vertical or horizontal tick marks.

For a complete list, see the Vega-Lite mark documentation. Next, we will step through a number of the most commonly used mark types for statistical graphics.

Point Marks

The point mark type conveys specific points, as in scatter plots and dot plots. In addition to x and y encoding channels (to specify 2D point positions), point marks can use color, size, and shape encodings to convey additional data fields.

Below is a dot plot of fertility, with the cluster field redundantly encoded using both the y and shape channels.

In addition to encoding channels, marks can be stylized by providing values to the mark*() methods.

For example: point marks are drawn with stroked outlines by default, but can be specified to use filled shapes instead. Similarly, you can set a default size to set the total pixel area of the point mark.

Circle Marks

The circle mark type is a shorthand for point marks drawn as filled circles.

Square Marks

The square mark type is a shorthand for point marks drawn as filled squares.

Tick Marks

The tick mark type conveys a data point using a short line segment or "tick". These are particularly useful for comparing values along a single dimension with minimal overlap. A dot plot drawn with tick marks is sometimes referred to as a strip plot.

Bar Marks

The bar mark type draws a rectangle with a position, width, and height.

The plot below is a simple bar chart of the population (pop) of each country.

The bar width is set to a default size. To change the width, try setting the step property of the markBar object's width attribute, like so:

vl.markBar().width({step: 12}).

Bars can also be stacked. Let’s change the x encoding to use the cluster field, and encode country using the color channel. We'll also disable the legend (which would be very long with colors for all countries!) and use tooltips for the country name.

The examples above create bar charts from a zero baseline, and the y channel only encodes the non-zero value (or height) of the bar. However, the bar mark also allows you to specify starting and ending points to convey ranges.

The chart below uses the x (starting point) and x2 (ending point) channels to show the range of life expectancies within each regional cluster. Below we use the min and max aggregation functions to determine the end points of the range. We will discuss aggregation in greater detail in the next notebook!

Alternatively, you can use x and width to provide a starting point plus offset, such that x2 = x + width.

Line Marks

The line mark type connects plotted points with line segments, for example so that a line's slope conveys information about the rate of change.

Let’s plot a line chart of fertility per country over the years, using the full, unfiltered global development data frame. We’ll again hide the legend and use tooltips instead.

We can see interesting variations per country, but overall trends for lower numbers of children per family over time. Also note that we set a custom width of 400 pixels. Try changing (or removing) the widths and see what happens!

Let’s change some of the default mark parameters to customize the plot. We can set the strokeWidth to determine the thickness of the lines and the opacity to add some transparency. By default, the line mark uses straight line segments to connect data points. In some cases we might want to smooth the lines. We can adjust the interpolation used to connect data points by setting the interpolate mark parameter. Let's use 'monotone' interpolation to provide smooth lines that are also guaranteed not to inadvertently generate "false" minimum or maximum values as a result of the interpolation.

The line mark can also be used to create slope graphs, charts that highlight the change in value between two comparison points using line slopes.

Below let’s create a slope graph comparing the populations of each country at minimum and maximum years in our full dataset: 1955 and 2005. We’ll create a new data array filtered to those years, and use Vega-Lite to create the slope graph.

By default, Vega-Lite places the years close together. To space out the years along the x-axis, we can use the width step property to indicate the size (in pixels) of discrete steps along the axis. We can also adjust the scale padding property to change the amount of spacing (as a fraction of the step size) along the edges of the axis.

Try adjusting padding and step below and see how the chart changes in response.

Area Marks

The area mark type combines aspects of line and bar marks: it visualizes connections (slopes) among data points, but also shows a filled region, with one edge defaulting to a zero-valued baseline.

The chart below is an area chart of population over time for just the United States:

dataUS = Array(11) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

Similar to line marks, area marks support an interpolate parameter.

Similar to bar marks, area marks also support stacking. Here we create a new data frame with data for the three North American countries, then plot them using an area mark and a color encoding channel to stack by country.

dataNA = Array(33) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

By default, stacking is performed relative to a zero baseline. However, other stack options are available:

• center - to stack relative to a baseline in the center of the chart, creating a streamgraph visualization, and
• normalize - to normalize the summed data at each stacking point to 100%, enabling percentage comparisons.

Below we adapt the chart by setting the y encoding stack property to center. What happens if you instead set it normalize?

To disable stacking altogether, set the stack property to null. We can also add opacity as a default mark property to ensure we see the overlapping areas!

The area mark type also supports data-driven baselines, with both the upper and lower series determined by data fields. As with bar marks, we can use the x and x2 (or y and y2) channels to provide end points for the area mark.

The chart below visualizes the range of minimum and maximum fertility, per year, for North American countries:

We can see a larger range of values in 1995, from just under 4 to just under 7. By 2005, both the overall fertility values and the variability have declined, centered around 2 children per family.

All the area mark examples above use a vertically oriented area. However, Vega-Lite supports horizontal areas as well. Let's transpose the chart above, simply by swapping the x and y channels.

Summary

We’ve completed our tour of data types, encoding channels, and graphical marks! You should now be well-equipped to further explore the space of encodings, mark types, and mark parameters. For a comprehensive reference — including features we’ve skipped over here! — see the Vega-Lite marks and encoding documentation.

In the next module, we will look at the use of data transformations to create charts that summarize data or visualize new derived fields. In a later module, we’ll examine how to further customize your charts by modifying scales, axes, and legends.

Interested in learning more about visual encoding?

• The systematic study of marks, visual encodings, and backing data types was initiated by Jacques Bertin in his pioneering 1967 work Sémiologie Graphique (The Semiology of Graphics). The image above illustrates position, size, value (brightness), texture, color (hue), orientation, and shape channels, alongside Bertin’s recommendations for the data type comparisons they support.
• The framework of data types, marks, and channels also guides automated visualization design tools, starting with Mackinlay’s APT (A Presentation Tool) in 1986 and continuing in more recent systems such as Voyager and Draco.
• The identification of nominal, ordinal, interval, and ratio types dates at least as far back as S. S. Steven’s 1947 article On the theory of scales of measurement.

Quiz

1. Which data type is used to represent categorical or nominal data? Answer: The categorical data type is used to represent categorical or nominal data.
2. Which data type is used to represent continuous numerical data? Answer: The continuous numerical data type is used to represent continuous numerical data.
3. Which data type is used to represent ordinal data? Answer: The ordinal data type is used to represent ordinal data, which is data that has a natural order, such as rankings or ratings.
4. Which graphical mark is used to represent individual data points in a scatter plot? Answer: The graphical mark used to represent individual data points in a scatter plot is a point or a dot.
5. Which graphical mark is used to represent data that is ordered over time? Answer: The graphical mark used to represent data that is ordered over time is a line or a curve.
6. Which visual encoding channel is used to represent color? Answer: The visual encoding channel used to represent color is the hue channel.
7. Which visual encoding channel is used to represent size? Answer: The visual encoding channel used to represent size is the size channel.
8. Which visual encoding channel is used to represent position along a common scale? Answer: The visual encoding channel used to represent position along a common scale is the position channel.
9. Which visual encoding channel is used to represent orientation or angle? Answer: The visual encoding channel used to represent orientation or angle is the angle channel.
10. Which visual encoding channel is used to represent texture or pattern? Answer: The visual encoding channel used to represent texture or pattern is the texture channel.