Skills learned in Lab 1 Web GUI framework HTML tags and attributes <div> elements Intro to CSS layout <input> element Adding functionality with JavaScript How to understand a code skeleton

Lab 1

Skills Learned in Lab 2 Javascript variables Javascript functions Javascript scopes

Lab 2

Questions about Lab 1 and 2 skills?

This Lab Using CSS to Layout your webpage Using JavaScript to modify CSS Visualization Drawing data with SVG

Why Layouts? Where am I? Where can I go? What is here?

Ex: The original Candy Crush

Consistence with: The F-shaped pattern (from Lecture 5) An eye-tracking study by Nielsen (2006c) found that people often read Web pages in an F-shaped pattern: People first look horizontally, usually across the upper part of the content area. (The F's top bar.) Next, people move down the page and then look across in a second horizontal movement that typically covers a shorter space than the previous movement. (The F's lower bar.) Finally, people scan the contents' left side in a vertical movement. Scan speeds are quite variable, sometimes slow and systematic, other times quite fast. (The F's stem.)

Wrapper غلاف

(Revision ) =>The class selector (for all elements) Lab material by Dr. Mai Elshehaly

Steps for defining a grid area: Select the wrapper container Style it as a grid display area Define the gap between grid elements grid-template-columns grid-template-areas. Other styles like color and background-color color is referring to the text color in that element. background-color refers to the background color

Assigning content to grid areas With the grid-area property I can assign each of these areas a name. 

Other styles

border-radius Property

border-radius Property

padding Property padding:10px 5px 15px 20px; padding:10px 5px 15px; top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px padding:10px 5px 15px; right and left padding are 5px padding:10px 5px; top and bottom padding are 10px padding:10px; all four paddings are 10px

padding Property

font-size Property % => Sets the font-size to a percent of  the parent element's font size

Exercise (5 minutes) Add a footer area for your page Style your content area to have a minimum height 400px Observe what happens to the side bar

Consider this scenario Jade is an expert Candy Crusher. He has played the game so many times and now has a good strategy of how to win the game in a short amount of time. His strategy relies on knowing the number of similar squares that exist on the game board and whether there are any adjacency patterns between the colors. He believes that if the original game board was augmented with visualizations that reveal this information, he can score very high. He also believes that knowing which level of the game he is currently playing and how many levels remain can help him make better use of his winning strategy.

Requirements R1: Display Candy Crush game R2: Provide a visualization of the number of occurrences of each color on the board R3: Provide a visualization of the co-occurrences between colors R4: Enable navigation between game levels and show current level in context كم مره حصل اللون الاخضر و الظهور المشترك بين الالون

Prototyping Activity (15 minutes) How would you layout your screen? Sketch on paper the different components (5 minutes) Now use CSS grid layout to create and layout the containers of your sketched components (10 minutes)

One Possibility

See the code in this file to generate the same layout https://www.dropbox.com/s/cpj73c2yjahfrdv/index.html?dl=0

Change on the previous code (1)

Change on the previous code (2)

Change on the previous code (3)

Add the Candy Crush game in the game content area Copy your styles to mainLayout.css file in your Candy Crush framework Add the styled div’s: “ box header” “box sidebar” “box content” (this one contains the “container” div from the original Candy Crush file) “box footer1” (this will contain visualization 1) “box footer2” (this will contain visualization 2)

mainLayout.css

Index.html

Your page should now look like this https://www.dropbox.com/s/jcbd06od1nsv7ku/index.html?dl=0

Second Round

Data Visualization Perceivable  reduce memory load Likeable  facilitate computational offloading Trustable  rapid sense making about massive amounts of data Cool Example: http://metrocosm.com/global-immigration-map/

How to add visualizations?

Introduction to SVG and D3.js

What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated

Simple example: draw a circle

What is D3? D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. 

To include D3.js in your code If you are online, link directly to the latest release: Or copy the folder D3 in your folder and use the line <script src="https://d3js.org/d3.v4.min.js"></script> <script src=“./D3/d3.min.js"></script>

Draw a circle using D3.js

Revision => The Document Object Model (DOM) DOM is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. JavaScript allows web pages to perform tasks such as: reading elements from the DOM, add elements to the DOM, manipulate or move elements of the DOM, react to events (e.g. mouse clicks), determine the user’s screen size, date and time, etc.

Revision =>DOM [Example 1] <html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>

Revision => DOM [Example 2]

D3 selection Purpose: obtain a handle of DOM element(s) to manipulate them in Javascript. In this example, we used d3.select(“body”) to get a handle of the HTML document’s <body> Once this handle is returned, method cascading allows us to call append immediately on the returned handle The result of the call is a document containing the same tags as on slide 25, except that we increased the height and width of the SVG from 100x100 to 200x200 This increase has no effect on the displayed circle because the SVG is just a white container that we cannot see, we only see the circle which has a radius of 40 in both cases.

Binding data D3 stands for “Data-Driven Documents” Drawing shapes without data is useless In data visualization, we draw shapes to represent data Let’s do this!

Binding data

What happened here? svgContainer.selectAll(“circle”) will return an empty selection because no circle elements have been added yet. Then we add .data(circleData) and then .enter() which will create new elements for the selection and bind them to the circleData array. Now from this point, every piece of code on this selection will be executed 3 times (because the number of elements in circleData is 3) once for each element of circleData. We use the data to calculate the size and coordinates of each circle.

Change fill color for each circle

Exercise Use D3.js to draw co-occurrences between colors on a Candy Crush board

Board

colors Color 1: red Color 2: purple Color 3: orange Color 4: blue

color pair (red, purple) => (1,2) ; #adjacent r = 2 (red,red) => (1,1); #adjacent r = 2 (purple,red) => (2,1); #adjacent r = 1 (purple, purple) => (2,2); #adjacent r = 1 (orange,blue) => (3,4) #adjacent r = 1 (red, orange) => (1,3); #adjacent r = 1 (red, blue) => (1,4); #adjacent r = 1 (blue,red) => (4,1); #adjacent r = 1

Color can represent the pairs of color as (orange,blue) => (3,4) #adjacent r = 1 Stroke is the pair1 Fill is the pair 2

Idea Draw a circle for each pair of colors The position of the circle (cx, cy) represents the color pair (color1, color2) The size of the circle (r) represents the number of times these two colors were adjacent on the board What can the color represent?

First, create dummy data for our drawing (you can use the real data from the board as a home exercise) Each number represents a color: 1 = ‘red’ 2 = ‘yellow’ 3 = ‘green’ 4 = ‘orange’ 5 = ‘blue’ 6 = ‘purple’ The data array contains connections [5,3]  means blue and green are connected (adjacent) [4,2]  means orange and yellow are connected (adjacent) Etc.

Define a white drawing area:

Define a group of visual elements that will start at pixel (10, 10)

Add a circle for each data element How are cx and cy determined?

D3 scales Linear scales in D3 perform a mapping from a domain of values (e.g. the data values) to a range of values (e.g. the screen pixel locations) domain range

Defining the x and y scales

Recall: Using the x and y scales

Current outcome should look like this

Exercise Add axes for x and y and label them with color names Use the color of x for stroke of the circle and the color of y for the fill Use real adjacency data from the game board Use circle size to represent the number of times an adjacency occurs