CS 990: Topics in Scientific Visualization Dr. Mai Elshehaly

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?

Sample of Submitted Answers

Sample of Submitted Answers

Sample of Submitted Answers

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.

Let’s draw a glyph!

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

1. Setup your project

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

index.html

Structure

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

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 | ----------------------------------------------------------|

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

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 */ })();

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

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

Util.js

mc1v2.js

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.

Util.js

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.

mc1v2.js

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

2. Constructor

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:

Global context bound to this

Constructor bound to this

Object bound to this

2. Constructor

Draw a Hexagon A A x 60 A/2

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)

3. drawHexa() function

4. Draw rectangles around the hexagon

Minor changes to drawHexa()

Append 1 rectangle above the hexagon

5. createWeekly() data structure

6. drawWeeklyHexa()

7. drawWeeklyGlyph()

Day/Hour Heatmap http://bl.ocks.org/tjdecke/5558084