In this assignment, you will write code to build a visualization for a weather simulation of Hurricane Isabel. Your main focus will be on designing color spaces to see different features in this multivariate dataset. You will build on the skeleton code we provide so that you can focus on designing color maps.

Please click here to create your repository

Objectives

This assignment is designed to get comfortable with color spaces and interpolators in d3. Specific objectives include:

  • Practicing how to use d3 scales for defining the mapping between data value and various color values
  • Learning how to define and use d3 colors in multiple color spaces.
  • Putting theoretical notions of color into practice, such as the opponent color model
  • Understanding the advantages and disadvantages of various color spaces for visualizing data.

Description

Your task for this assignment is to generate multiple visualizations of the Hurricane Isabel data, measured through atmospheric values. Specifically, the dataset measurements of temperature and pressure value for a \(50\times50\) 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 repository we provide under the global variable data, as an array of objects:

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

Note that 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: Visualizing Temperature

From the skeleton code we provide in a05.js, you should implement both colorT1() and colorT2(). Both color maps should portray temperature. For colorT1 you should design a color map based on using d3.scaleLinear() after assigning a color of your choice for both the minimum and maximum temperature value. The only constraints are that:

  • it changes luminance monotonically along the scale, and
  • it avoids the most common type of color deficiency among the population.

For colorT2, you should modify the color map that you used in colorT1 so that it is perceptually uniform. Hint: at the very least, this requires switching the way in which you interpolate colors, and if you set this up right it may only require one additional line of code to create the new color scale. Interpolation can have a big effect on how intermediate colors are produced by scales, see this demo that compares Lab and HCL color spaces.

Part 2: Visualizing Pressure

From the skeleton code we provide, you should implement the function colorP3() to produce a visualization of the pressure field. Remember that the pressure field has both positive and negative values. Your pressure color map should be a diverging color map, and thus it should:

  • map zero to a neutral color (i.e., a color with very low saturation) although depending on the opponent pair you pick there might be reasonable alternatives.
  • map non-zero values such that values of the same magnitude but different sign they are opponent to each other in Lab space (hint: this means you have to be careful with how you design your scale bounds)
  • map values such that pressures moving away from zero change at the same rate.

Part 3: Bivariate Color Maps

Finally, you should implement the function colorPT4() such that you give a bivariate color map that portrays both temperature and pressure in the fourth plot.

Your color map 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 #1: There’s only one way to do it after you’ve decided on pressure. Hint #2: You will most likely have to design scales that map each color channel separately.

Additional Hints

  • It might be helpful to use a color picker when selecting colors. I recommend this Lab color picker.
  • You can use scales to choose colors directly, but remember to set the scale’s interpolator functions correctly. You can also use scales to choose individual values for the function calls in d3.hcl and d3.lab.

Submission

You should use git to submit all source code files. The expectation is that your code will be graded by cloning your repo and then executing it within a modern browser (Chrome, Firefox, etc.)

Please provide a README.md file that provides a text description of how to run your program and any parameters that you used. Also document any idiosyncrasies, behaviors, or bugs of note that you want us to be aware of.

To summarize, my expectation is that your repo will contain:

  1. A README.md file
  2. A index.html file
  3. An a05.js file
  4. All other Javascript files necessary to run the code (including data.js and d3.js plus any others you require)
  5. Any .css files containing style information

Grading

Deductions

Reason Value
Bugs or syntax errors -10 each bug at grader's discretion to fix


Point Breakdown of Features

Requirement Value
Consistent modular coding style 5
External documentation (README.md) following the template provided in the base repository 5
Header documentation, Internal documentation (Block for functions and Inline descriptive comments). Wherever applicable / for all files 10
Expected output / behavior for your chart based on the assignment specification, including

Implementing temperature color map, colorT120
Modifying colorT1 to produce a perceptually uniform colorT215
Implementing the diverging color map for pressure, colorP320
Implementing the bivariate color map, colorPT4, to visualize pressure and temperature 25

 80
Total 100


Cumulative Relationship to Final Grade

Worth 5% of your final grade

Extra Credit

Implementing features above and beyond the specification may result in extra credit, please document these in your README.md. In addition, here is a concrete suggestion to try consider:

Implement Color Legends (worth up to 25% extra credit)

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.

Color legends for part 1 and 2 are only worth 15% total (5% each). A color legend for the bivariate color map in part 3 is worth as much as 10% extra credit.

Hint: You should 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 univariate plots should not take more than 50-100 lines of code in total if you approach it by making use of tools we’ve discussed in class.