Assignment 6


In this assignment, you will write code to build a visualization for a weather simulation of Hurricane Isabel.

You will build on the skeleton code we provide.


The dataset has atmospheric and temperature and pressure value for a 50x50 square grid of positions, making a total of 2500 observations of both temperature and pressure. The simulation values have been sampled at an altitude of about 15 kilometers. The dataset values are available in the skeleton code we provide under the global variable data, as an array of objects:

var data = [
    { Lat: .., Lon: .., T: (temperature), P: (pressure) },

The atmospheric temperature ranges from about -70 to -60 degrees Celsius (in the T field) , and the atmospheric pressure ranges from -500 hPa to 200 hPa (in the P field).

Part 1: Separate visualization of the individual fields (20 points each)

Implement the functions colorT1 and colorP1 to portray temperature and pressure appropriately.

Remember that the pressure field has both positive and negative values. Your pressure colormap should be diverging: it should:

Your temperature colormap can be designed however you want, as long as:

Hint: These two colormaps should take no more than 10 lines of code for both of them.

Part 2: Bivariate colormap for visualization of the fields (30 points)

Implement the function colorPT such that you give a single color that portrays both temperature and pressure.

Your colormap should again map values of zero pressure to neutral colors, and values of nonzero pressure should be opponent to each other.

Map temperature however necessary, such that as temperature changes, the colors change perceptually uniformly (hint: there’s only one way to do it after you’ve decided on pressure).

Part 3: Implement Colin Ware’s Qualitative Texton Sequence 1 (30 points)

Write the functions glyphD, and glyphStroke in order to implement the texton sequence in Figure 1a (the top half) of this paper. Your sequence should be such that positive pressure values use white glyphs, and negative values use black glyphs. Values with the same absolute pressure should map to the same glyphs.

Write colorT2 to portray temperature. This can be any colormap which respects the same constraints as the ones in Part 1, in addition to being visible under the glyphs (so, for example, if you chose a mapping from white to black in colorT1, you’ll need to use a different colormap here).

Extra credit (40 points)

Implement color legends for all of your plots. Color legends should show the range of shown values for each of plots, and should include tickmarks and text labels for some values.

For this part of the assignment, you are not allowed to use libraries specifically designed to help with producing color legends.

Hint: You can use d3 axes for part of this assignment, and you can exactly reuse your color scales if you structure your code the right way. Writing color legends for all plots should not take more than 50-100 lines of code in total if you do it right.

General Hints


All of the files below are in the template repository you’ll start with:


Thanks to Joshua Levine for providing the dataset.