1. CS 990: Topics in Scientific Visualization
Dr. Mai Elshehaly

2. Assignment 1
Goal: To design a glyph/visualization that should take no more than 100x100 pixels to represent a week’s worth of data for mini challenge 1
Sample questions to detect patterns of life:
What are the daily peak hours in the park?
What days of the week have the most traffic?
What weeks have the most traffic?
What types of vehicles are most common?
Do weekdays’ patterns differ from those of weekends?
Does traffic tend to peak at specific locations in the park?

3. Sample of Submitted Answers

4. Sample of Submitted Answers

5. Sample of Submitted Answers

6. Data attributes:
Week days
Times of day
Avg. number of cars in a week
Weekends versus weekdays
Spatial distribution of traffic
Visual attributes:
* 2D Heatmap inside each square
Height of hexagon
Width of hexagon
Color/texture inside hexagon
Line thickness of hexagon
Suggested mapping:
2D heatmap  x-axis: weekdays, y-axis: times of day (or vice versa)
Height of hexagon  avg. number of cars per week
Width of hexagon  inverse of the percentage of cars per week that visit during weekends (i.e. weeks on which the majority of cars visited during weekends will have a thinner hexa to show how skewed the distribution is)
Color/texture inside hexa  colored bubbles with size representing the avg. number of cars captured by each sensor during that week.

7. Let’s draw a glyph!

8. Steps Setup your project Constructor  will read data
drawHexa() function for a dummy hexagon
Draw rectangles around the hexagon
createWeekly() creates a weekly data structure
drawWeeklyHexa() function to draw a hexagon for each week
drawWeeklyGlyph() function to draw the entire glyph for each week

9. 1. Setup your project

10. A combination of HTML, CSS, DOM and Javascript provides an infrastructure for Web GUI development

11. index.html

12. Structure

13. JS Variables
A JavaScript variable name must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). As JavaScript is case sensitive, letters include the characters A through Z (uppercase) and the characters a through z (lowercase).
New variables in JavaScript should be defined with the var keyword.
If you declare a variable without assigning a value to it, its type is undefined by default.
Remember that you should always declare a variable with the var keyword

14. Scopes You can visualize the bubbles as follows:
-GLOBAL SCOPE |
var g =0; |
function foo(a) { | |
var b = 1; | |
//code | |
function bar() { | | |
// |ScopeBar | ScopeFoo |
} | | |
// code | |
var c = 2; | |
} | |
foo(); //WORKS |
bar(); //FAILS | |

15. Scoping Rules
When resolving a variable, JavaScript starts at the innermost scope and searches outwards.
We can use functions to introduce different scopes for variables
There are certain problems to this:
If we must create a named function, we will pollute the global scope because we are creating too many function names
We have to keep calling these functions for them to execute. This can make the code harder to read

16. Immediately Invoked Function Expression (IIFE)
To solve the 2 problems above, we can create a function that executes itself immediately
Or you can omit the function name:
(function foo(){ /* code */ })();
(function(){ /* code */ })();

17. IIFE
Omitting function name avoids polluting the global namespace but it introduces some issues:
You can’t see the function name in the stack traces, debugging such code is difficult
You cannot use recursion on anonymous functions
Overusing anonymous IIFEs sometimes results in unreadable code

18. Javascript namespaces
In Javascript, we use namespaces because we want to avoid collision (i.e. two variables having the same name and defined within the same namespace)
Open source code is everywhere and collision is highly possible in javascript
Therefore, great attention must be given to namespace creation

19. Util.js

20. mc1v2.js

21. OOP = Object-Oriented Programming
In JS: Objects can be seen as mutable key-value-based collections.
In JS: arrays, functions, and RegExp are objects
In JS: numbers, strings, and Booleans are object-like constructs that are immutable but have methods.

22. Util.js

23. Prototype property
Prototypes are used as a way to define properties and functions that will be applied to instances of objects.
The prototype's properties eventually become properties of the instantiated objects.

24. mc1v2.js

25. Steps Setup your project Constructor  will read data
drawHexa() function for a dummy hexagon
Draw rectangles around the hexagon
createWeekly() creates a weekly data structure
drawWeeklyHexa() function to draw a hexagon for each week
drawWeeklyGlyph() function to draw the entire glyph for each week

26. 2. Constructor

27. The this keyword
In JavaScript, the value of this is determined by the invocation context of a function and where it is called. Let's see how this behavior needs to be carefully understood:

28. Global context bound to this

29. Constructor bound to this

30. Object bound to this

31. 2. Constructor

32. Draw a Hexagon A A x 60
A/2

33. Draw a Hexagon Let A = 64 (-A/2, -A*√3/2) (A/2, - A*√3/2) A A x (A, 0)60
(-A, 0)
(A, 0)
A/2
(A/2, A*√3/2)
(-A/2, A*√3/2)

34. 3. drawHexa() function

35. 4. Draw rectangles around the hexagon

36. Minor changes to drawHexa()

37. Append 1 rectangle above the hexagon

38. 5. createWeekly() data structure

39. 6. drawWeeklyHexa()

40. 7. drawWeeklyGlyph()

41. Day/Hour Heatmap