Learning Responsive Data Visualization: Create stunning data visualizations that look awesome on every device and screen resolutions

Media Queries were introduced in CSS3 as a more flexible extension of Media Types. They allow the developer to apply conditional CSS styles only when a statement (a so-called query) matches a certain CSS property (so-called Media Features) and a Media Type. A typical Media Query has the following structure:

@media [Media Type [and|not|only]] (Media Feature) {
   ...
}

Here is a small selection of properties that can be used as Media Features:

In Responsive Design, we are mostly interested in querying the min-width or max-width property to apply different styles to devices that have different widths.

Let's see an example where we can apply a different background color depending on the minimal width of the browser window:

div {
  background-color: blue;
}
@media screen and (min-width: 992px) {
  div {
    background-color: red;
  }
}

In the preceding example, all the div elements in the page have the background color red as long as the browser window's width is larger or equal to, 992 px (see the following figure):

Browser window width larger than 992px

Once the window width is smaller than 992 px, the background color of the div elements jumps to blue (see the following figure):

Browser window with width smaller than 992px

As we can see in the following figure, Media Queries are supported across all major browsers and Internet Explorer starting from version 9:

Cross-browser compatibility Media Queries from http://caniuse.com/#feat=css-mediaqueries

In Responsive Design, we call a state when a certain layout and Media Query is active, and we call a breakpoint the transition from one state to another.

Let's look at an example. First, we define some screen dimensions for the following devices:

Create a CSS snippet using Media Queries for these device dimensions:

/* phones, default no query */
/* tablets */
@media (min-width: 768px) { ... }
/* desktops */
@media (min-width: 992px) { ...}
/* large devices */
@media (min-width: 1200px) { ... }

In the preceding code, we defined four states with three breakpoints between these states where each state corresponds to a typical screen dimension and device type.

We can also see these breakpoints by reducing the size of a browser window while looking at a responsive web page; we observe how the design breaks at a certain width of the browser window. In the following figure, the breakpoint is visualized as a dashed line, showing the moment when one state breaks into a new one:

Breakpoint in Responsive Design

We can observe the same effect when we look at the Google Plus web page in the following figure. In the first two figures, the size of browser window changes, but the three-column layout stays the same. In the third image, the design breaks into a new layout with only two columns:

Breakpoints of the Google Plus page

Across mobile and desktop devices, there exists a vast variety of different pixel densities and screen resolutions. Displays with much higher resolution would render pages much smaller than displays with a lower resolution; this immediately leads to readability problems. To prevent this effect and fit bigger pages into smaller screens, a virtual window—the so-called viewport (the visible area of a web page)—was introduced. This allowed websites to render in the correct pixel resolution and scale to the full device width for maximal accessibility; however, developers had no control over this device-specific setting. Later, in HTML5, the viewport meta tag was introduced in order to give developers full control over these viewport settings.

Today, a mobile-optimized application usually defines the following viewport tag in the head section of the web page to render the website normally and scale the content to the width of the device:

<meta name="viewport" content="width=device-width, initial-scale=1">

When dealing with Responsive Design, it is always a good idea to use relative units to describe the element's dimensions based on its parent element. Thus, when the parent container changes the size, all children elements adapt their sizes accordingly.

The most popular unit for relative dimensions is %, which defines the dimension based on a certain percent of the next absolute positioned parent element.

However, there are more useful units to describe relative dimensions; for example, the following two are based on the font-size:

These units have a big advantage; they are affected by the changes of the font-size setting in the browser. A simple example can be the adaption of the paddings when the user increases the font size of the browser.

Responsive applications should look and feel great (or work at all) on a huge number of devices with a huge number of different screen sizes and resolutions; they usually run on mobile devices as well as big TV screens. Thus, in the beginning of a project, every developer has to choose an approach to design the responsive application to master this transition; in general, we distinguish between the following methods:

In the desktop first method, we design for desktop devices and mouse input first, then we adjust and scale the design down for mobile devices and touch interactions. This often results in a web application with a reduced functionality for mobile devices due to a much smaller screen dimension and the lack of touch support.

In the mobile first method, we design for mobile devices and touch interactions first, and then we adjust and scale the design up for bigger devices and mouse interactions. This approach makes sure that mobile devices support a complete set of features, which can even be used on desktop clients.

Both methods are equally correct, accepted, and popular nowadays. The only exception is that mobile first became a buzzword due to an increase of mobile devices accessing the web during the previous years. Throughout the book, we will choose a mobile first approach and design for mobile devices and touch support. However, we will, of course, extend the visualizations to support mouse input and bigger screens. That's what the responsive design is all about.

Make sure you have the Bower package manager installed; this can be done by running the following command from the terminal:

npm install -g bower

Throughout this book, we will make use of only the CSS components of Bootstrap and thus we only need to include the bootstrap.css file to our project. There are multiple ways of doing so:

I strongly recommend using the bower package manager to manage your frontend dependencies (or similar ones, such as npm or component). However, in the examples of this book, we will link Bootstrap directly from MaxCDN for simplicity reasons; therefore, all examples in the source of the book require an active Internet connection.

The ultimate resource for Bootstrap is the documentation that can be found at http://getbootstrap.com/getting-started/. Here, you will also find examples and templates using the Bootstrap framework.

For more detailed information and examples, I recommend reading the Unraveling Bootstrap 3.3 book by Istvan Novak.

A popular component to organize elements in an application or visualization is a grid layout. For responsive design in particular, we are mostly interested in grid layouts that adapt their columns to the screen resolution of the client. In the following figure, there's an example of a responsive grid layout with three columns per row on a desktop device and one column per row on a mobile device:

Simple Responsive grid, left: desktop, right: mobile

We then distinguish two different types of responsive grids that adapt the number of columns to the screen resolution of the client:

Grid types—left: grid with fixed width, right: fluid grid

It's actually quite simple to build a grid system yourself; let's first take a look at how to create a fluid grid layout, and afterwards, we will better understand how we can use Bootstrap components to get things done quickly and properly.

If we think about a grid as a (flexible) table layout, we need two basic components: rows and columns. A popular approach is to use the 12-column grid where we divide the width of a row into 12 columns and define column combinations that sum up to the full width of 12. The following figure illustrates some of these combinations: 12 columns of width 1, 6 columns of width 2, 4 columns of width 3, and so on. Also other combinations that sum up to 12 are allowed, such as 2, 6 and 4 or 1, 10 and 1 and many more.

Grid layout with 12 columns

Let's start and build the .row class that spans to the full width of the parent element:

.row {
  position: relative;
  width: 100%;
}

Next, we want to create column classes .col-1, .col-2, .…, and .col-12 that define the width of the column in the percent relative to the width of the row. We define a text wrap with the float attribute and add padding for the cells. The float attribute indicates that the block element should not appear in the original flow but "float" on the left side. By doing so, we align the elements in the same line instead of placing them into the normal text flow:

[class*="col-"] {
  float: left;
  padding: 1em;
}
.col-1 {
  width: 8.33333333%;
}
.col-2 {
  width: 16.66666667%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33333333%;
}
.col-5 {
  width: 41.66666667%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33333333%;
}
.col-8 {
  width: 66.66666667%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33333333%;
}
.col-11 {
  width: 91.66666667%;
}
.col-12 {
  width: 100%;
}

In the preceding code, we see that we can use the wildcard attribute selector called [class*="col-"] to select all the columns at once (all the classes that contain the col- letters). The widths have to be defined as per column type.

The only problem in the previous example is that, by default (box-sizing: content-box), the padding size of the columns adds up with the width property to determine the computed width of the element. The total width of all elements plus the padding sizes would give a number bigger than 100% of the parent element. Using the box-sizing: border-box property, we can disable this behavior and the computed width of the element equals the width property:

[class*="col-"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Finally, we need to clear the text-wrapping property of the columns after each row. We can do this by adding a clearfix pseudo element after each .row class:

.row:after {
  content: " ";
  display: block;
  clear: both;
}

This is already a nice implementation of a basic grid system. Let's test this layout and create an HTML page with the following content:

<div class="row">
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
  <div class="col-1">.col-1</div>
</div>
<div class="row">
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
  <div class="col-2">.col-2</div>
</div>
<div class="row">
  <div class="col-3">.col-3</div>
  <div class="col-3">.col-3</div>
  <div class="col-3">.col-3</div>
  <div class="col-3">.col-3</div>
</div>
<div class="row">
  <div class="col-4">.col-4</div>
  <div class="col-4">.col-4</div>
  <div class="col-4">.col-4</div>
</div>
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
<div class="row">
  <div class="col-12">.col-12</div>
</div>

If we add a little bit of coloring (the complete example can be found in the code files of the book) and open the HTML page in the browser, we get a layout similar to the following figure:

Browser output of simple grid layout

Let's take a look at the responsive grid system provided by Bootstrap, which looks very similar to the one that we have just created. Bootstrap defines Media Queries for four device types (the so-called grid tiers) and their corresponding typical viewport widths (in pixel) for the responsive breakpoints:

The grid requires three different components:

Let's take a look at some code. First, we need to include the Bootstrap CSS to the header of the web page:

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>Simple Grid System</title>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Now, we can add the grid layout according to the previous example, but this time, we need to wrap it in a fluid container:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-1">.col-lg-1</div>
    <div class="col-lg-1">.col-lg-1</div>
    ...
  </div>
  <div class="row">
    ...
  </div>
</div>

If we open the web page and look at the output of the web browser, we see an example similar to the following figure:

Browser output of grid layout with Bootstrap

We remark that the preceding figure looks very similar to the grid layout that we created in the beginning of this section. The only small difference in the code was the .container element to wrap the rows and the usage of the .col-lg-* classes. However, Bootstrap's grid is responsive, and the columns are arranged according to the breakpoints and the browser width. If we reduce the size of the browser window smaller than 1200px, we see that the grid jumps into a different layout. We can see this effect in the following figure:

Browser output of grid layout with window size smaller than 1200px

The reason for this is that the browser window is no longer in the state of a very large device (greater than 1200px) and has jumped to a smaller state. Therefore, the col-lg-* columns are not applied anymore, and they appear in the full width of the row. We can now start to define certain column combinations to create a flexible responsive grid:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-6 col-sm-12"></div>
    <div class="col-lg-3 col-md-6 col-sm-12"></div>
    <div class="col-lg-3 col-md-6 col-sm-12"></div>
    <div class="col-lg-3 col-md-6 col-sm-12"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Bootstrap also provides very handy and responsive utility classes to hide elements on certain browser widths. The classes are named according to the Media Query breakpoints:

Hiding an element on a phone in portrait mode is as simple as adding a class to the element; let's take a look at the following example:

<ul class="nav">
  <li><a href="#menu">Menu</a></li>
  <li class="hidden-xs"><a href="#link">Link</a></li>
</ul>

The classes for showing elements on certain browser widths come for each breakpoint in three different variations depending on the CSS display property of the element:

For these three blocks, all the breakpoint classes are available:

Displaying an element only on a specific device width is also very simple:

<ul class="nav">
  <li><a href="#menu">Menu</a></li>
  <li class="visible-xs-block"><a href="#link">Link</a></li>
</ul>

Bootstrap's stylesheet is written in LESS and we can make use of the predefined breakpoints and Media Queries easily.

Make sure you have the LESS compiler installed; this can be done by running the following command from the terminal:

npm install -g less

First, we create a style.less file and import Bootstrap's variables.less file at the beginning of the file. This enables us to reuse Bootstrap's declarations for colors, dimensions, and configurations throughout this file:

/* style.less */
@import "bower_components/bootstrap/less/variables.less";

Now, we can use Bootstrap's Media Query breakpoints in our LESS file. Let's add some device-specific padding to all the div containers:

/* Extra small devices */
/* No media query since this is the default in Bootstrap */
div {
  padding: 4em;
}

/* Small devices */
@media (min-width: @screen-sm-min) {
  div {
    padding: 8em;
  }
}

/* Medium devices */
@media (min-width: @screen-md-min) {
  div {
    padding: 16em;
  }
}

/* Large devices */
@media (min-width: @screen-lg-min) {
  div {
    padding: 24em;
  }
}

Now, we use the LESS compiler to compile the stylesheet with CSS by running the following command in the terminal:

lessc style.less style.css

The resulting CSS looks similar to this:

/* Extra small devices */
/* No media query since this is the default in Bootstrap */
div {
  padding: 4em;
}
/* Small devices */
@media (min-width: 768px) {
  div {
    padding: 8em;
  }
}
/* Medium devices */
@media (min-width: 992px) {
  div {
    padding: 16em;
  }
}
/* Large devices */
@media (min-width: 1200px) {
  div {
    padding: 24em;
  }
}

Perfect! This means that we can now use the predefined breakpoints in our LESS styles.

Sometimes, it is also necessary to limit your styles to a narrow set of devices. Therefore, one can also use the max-width Media Queries in LESS. Again, the following code snippet is taken from the Bootstrap documentation at http://getbootstrap.com/css/#grid-media-queries:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

This can be useful when we want to define styles for a single device type rather than all the devices with a screen width greater than or equal to the defined one.

Canvas is a JavaScript API used to create Raster Graphics (often called Pixel Graphics) in the browser. As we can see in the following figure, it is supported in all major browsers and Internet Explorer starting from version 9:

Cross-browser compatibility Canvas from http://caniuse.com/#feat=canvas

A Pixel Graphic is an image that contains all the information about the color of each pixel of the image for a certain resolution. Let's assume we have an image with 8 x 8 pixels where each of these 64 pixels contains the information about its color; we draw a circle in this image:

<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var centerX = 10, centerY = 10, radius = 10;  
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = "red";
  ctx.fill();
</script>

In the following figure, one can see how the so-called rasterization process defines which pixels of this image gets colored (pixels in the blue region) for the circle shape and which pixels stays transparent (pixels in the white region):

Rasterization of a 8 x 8 pixel circle shape

If we display this image with a high resolution (see the following figure at the left), we see a small circle with crisp edges. On the other hand, if we zoom into the image, we see a very pixelated 8 x 8 pixel image (see the following figure on the right); this effect is the direct cause of the resolution-dependent rasterization process:

Pixel graphic, left: high resolution, right: zoomed

This effect makes it really difficult to use Pixel Graphics for Responsive Design; we have to always generate and reload our visualization for the current resolution and screen size.

Another drawback is that the final image is composed of pixels, which make it very difficult to attach event listeners, such as mouseover or click events, to certain components of the image. The reason for this is that there are no shapes or components encoded in the image but only color values for each pixel.

WebGL is a JavaScript API based on OpenGL ES 2 to create hardware-accelerated 3D Pixel Graphics in the browser. This technology is very powerful and allows access to the client's GPUs via so-called Shaders; the final visualization is exposed in the browser via the Canvas element. However, browser support is not very good, as we can see in the following figure; mobile devices support the API only partially and Internet Explorer only from version 11.

Cross-browser compatibility WebGL from http://caniuse.com/#feat=webgl

Due to WebGL's use of the Canvas element, it doesn't solve any of the limitations of Pixel Graphics that we discussed in the Canvas section. Thus, we will look at a different type of image representation next.

SVG is an XML specification used to create and compose Vector Graphics. Thanks to HTML5, these graphics can simply be embedded into an HTML page, rendered and displayed perfectly sharp by the browser in every screen resolution. As we can see in the following figure, cross-browser compatibility is very good across all the major browsers and Internet Explorer starting from version 9:

Cross-browser compatibility SVG from http://caniuse.com/#feat=svg

Vector Graphics are images where all the information about the image is encoded as numerical expressions of geometric shapes (such as rectangles, circles, ellipses, paths, and texts) of the elements of the image. The browser always uses this information to draw and render the graphic in the best resolution possible. In the following figure, we can see a Vector Graphic of a circle with a high resolution, whereas on the right, we see a zoom of the image. It's easy to see that the zoomed image is displayed with perfectly crisp edges; this effect of lossless scaling results from the resolution-dependent rendering of the browser.

Vector Graphic, left: high resolution, right: zoomed

More advantages result from the fact that the visualization's elements are simply embedded in the HTML page. Now, we can easily attach native JavaScript event listeners, such as the mouseover or click events, on every component of the graphic and use CSS to style them together with the rest of the application.

Another great benefit is that we can simply look into the Developer Console of the web browser, play around, and debug the visualization. We can click on each element of the image to see its attached event handlers, and we can modify the CSS styling in real time. Anyone who has ever dealt with OpenGL or WebGL debugging will agree that this is a comfort that you can't miss while developing visualizations for the web.

Now, we already have many arguments in favor of using SVG for responsive cross-browser visualizations:

There are multiple ways to include D3.js to your project:

I strongly recommend using the package manager called bower to manage your frontend dependencies. However, in the examples of the book, we will link D3.js directly from cdnjs for simplicity reasons; therefore, all the examples in the source of the book require an active Internet connection.

The ultimate resource for D3.js is the WIKI page of the GitHub project, which can be found at https://github.com/mbostock/d3/wiki. Here, you will also find examples and a detailed description of the API.

Another great resource for examples is Mike Bostock's page at http://bl.ocks.org/mbostock and his blog at http://bost.ocks.org/mike/.

For more detailed information and examples, I recommend reading the Mastering D3.js book by Pablo Navarro Castillo.