Building Responsive Data Visualization for the Web

Chapter 05 Enhancing with JavaScript

As we reach the last layer of the progressive enhancement tower, it’s important to remember how far you can get without reading this chapter. Fluid grids, media queries, and flexible images are the core of responsive web design. JavaScript is how you will bridge the gap from web design to complex responsive data visualization.

Using JavaScript

Your website is a building. The markup is the rebar and cement. CSS is the drywall and furniture. JavaScript is the electricity. Electricity is amazing and important and makes a whole lot work, but if you’re not careful, you can start a big fire with it.

JavaScript is a dynamic programming language. That means it executes its behaviors when the code is being executed on the client (runtime), rather than when it is being compiled.

In a static programming language, such as Java or Objective-C, the type of a variable must be declared explicitly in the code, like this:

String myString = "Hello world";

In a dynamic programming language, such as JavaScript, the variable does not need a type, as the language will figure it out at runtime. Here is an example:

var myString = 'Hello world';

Moreover, in a static programming language, once a variable is set as a type, it remains that type. Trying to do the following will result in a compile type warning:

String myString = "Hello world";  
myString = 1; // Compile type warning

In a dynamic programming language, you are free to change an object’s type for ...