- Part 1: Visualizing Temperature
- Part 2: Visualizing Pressure
- Part 3: Bivariate Color Maps
- Additional Hints
- Extra Credit
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 color.
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.
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 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:
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
Part 1: Visualizing Temperature
From the skeleton code we provide in
a06.js, you should implement both
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.
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
- 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.
- 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
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:
d3.v5.jsplus any others you require)
.cssfiles containing style information
|Bugs or syntax errors||-10 each bug at grader's discretion to fix|
Point Breakdown of Features
|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|
Cumulative Relationship to Final Grade
Worth 5% of your final grade
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 40% 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.
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 plots should not take more than 50-100 lines of code in total if you do it right.