DSCI lecture 2

Survey of visualization techniques, introduction to Web technologies

Dr. Luciano Nocera

Outline

• Data
• Visualization Techniques
• Introduction to WEB Technologies

Data is plural

(from the latin what is given)

A given piece of data is called a datum

Categorical Data

Qualified Categorical Data

Numerical Data

Data Models

Visualization reference model

Outline

• Data
• Visualization Techniques
• Introduction to WEB Technologies

Common visualizations techniques

1. Charts
2. Graphs and Trees
3. Clouds
4. Temporal
5. Geospatial and Mapping

1. Charts: dots

Scatterplot

2+ variables in Cartesian coordinates

Bubble chart

3 continuous variables: bubble center (2) and radius (1)

1. Charts: bars

Bar chart

Bar length proportional to continuous variable

Lollipop chart

Line length proportional to continuous variable and data point

1. Charts: bar layouts

Coxcomb Chart

Same angle, radius encodes value, colors different categories. Stacked bar chart with radial layout.

Marimekko chart

Bar chart where the width encodes relative size. Also called Mekko chart.

Waterfall chart

Cumulative effects of sequence of positive and negative variations

1. Charts: pies

Pie chart

Exploded pie chart. Pie charts, are a stacked bar charts in polar coordinates. Angle encodes proportion.

Donut chart

Pie Chart with centre area cut out. Angle encodes proportion.

1. Charts: lines

Line Chart

Trends on continuous variables, e.g., time-series

Sparkline

Trends on small window size [Tufte 2004]

1. Charts: line layouts

Slopegraph

Shows data values, trends [Tufte 1983]

Parallel Coordinates

Multivariate data.

Radar Chart

Multivariate data. Also named web, spider, star, cobweb, polar, or Kiviat.

1. Charts: area

Area Chart

Show cumulative or proportions and trends

Streamgraph

Type of stacked area graph which is displaced around a central axis, resulting in a flowing, organic shape

2. Graphs and Trees: hierarchies

Dendrogram

From Greek dendro tree and gramma drawing.

Reingold–Tilford Tree

Hierarchical data as linked tree

2. Graphs and Trees: hierarchies

Treemap

Hierarchical data as nested rectangles. Area proportional to value.

Sunburst

Hierarchical data as rings. Center is root node. Angles are equal or proportional to value.

2. Graphs and Trees: flowcharts

Alluvial diagram

Shows relations between multivariate data. Named after alluvial fans formed by soil deposited by streaming water.

Sankey Diagram

Magnitude of flow between nodes in a network

2. Graphs and Trees: networks

Network Graph

Relationships (lines) between entities (nodes)

2. Graphs and Trees: matrix

Heat map

Matrix values as colors

Chord Diagram

Shows directed relationships among a group of entities in a matrix

3. Clouds

Word Cloud

Bubble Cloud

Circle Packing

Bubble cloud technique with hierarchical information as enclosing circles

4. Temporal

Time series plot

Values ordered in time as a line chart

Gantt Chart

Schedule with tasks layed out on time axis

Timeline

Events layed out on time axis

5. Geospatial and Mapping: thematic maps (1)

Choropleth

Areas are shaded or patterned in proportion to variable

Proportional Symbol Map

Scaled symbols show data for areas/locations. Also called Graduated Symbol Map.

Dot Map

Can be used to locate each occurrence of a phenomenon. One-to-one or one-to-many.

5. Geospatial and Mapping: thematic maps (2)

Cartogram

Area used to display value. Distortion used to show continuous variables

Isopleth

Use contours to show continuous variables. Also called Isarithmic.

5. Geospatial and Mapping: other named

Topographic

Detailed quantitative representation of land relief using contour lines

Nautical

Charts of maritime/coastal area

Image based

Using satellite or aerial imagery

Outline

• Data
• Visualization Techniques
• Introduction to WEB Technologies

The Web

• URLs (Uniform Resource Locator) used to query servers
• HTTP (Hyper Text Transfer Protocol) used to transfer

Client	Server
Browsers render: HTML, CSS, SVG Execute Javascript	Servers (e.g., node, nginx, Apache) serve: Static and dynamic HTML pages Content: text, CSV, images,...

Asynchronous JavaScript & HTML (AJAX)

Web languages

1. HTML
2. CSS
3. Javascript

1. HTML

• HTML stands for Hyper-Text Markup Language
• Defines the page semantics or meaning
• Whitespace and line breaks disregarded
• HTML document as a tree of HTML elements
  
• Elements specified as tags with attributes:

  <tag attribute="value"></tag>

• Two attributes used to identify elements:
  • class: class of elements, multiple classes per element

    
    								<tag class="definition blue"></tag>
    								

  • id: uniquely identify an element, only one id per document

    
    								<tag id="tag0"></tag>
    								

1. HTML $ > $ basic elements

1. HTML $ > $ page template (index.html)

					<!DOCTYPE html>
					<html>
					  <head>
						<title>Page title</title>
					  </head>

					  <body>
						<!-- This is an HTML comment -->
						<!-- Visible HTML elements are placed in the body -->
					  </body>
					</html>
				

1. HTML $ > $ SVG

• SVG stands for Scalable Vector Graphics
• Used for 2D vector graphics, not for raster (images) or 3D

					<svg width="800" height="260" style="background-color: honeydew">
					  <circle cx="300" cy="200" r="50" fill="steelblue"/>
					  <text x="300" y="200">Apples</text>
					  <circle cx="100" cy="100" r="50" fill="orange"/>
					  <text x="100" y="100">Pears</text>
					  <rect x="500" y="50" width="200" height="100" fill="orange"/>
					  <text x="450" y="100">Oranges</text>
					</svg>
				

2. CSS

• CSS stands for Cascading Style Sheets
• Used to define the appearance of HTML elements

2. CSS $ > $ including in Web pages

Inline overrides Embedded overrides External

1. Inline

   
   						  <p style="color: blue">Inline style</p>
   						

2. Embedded

   
   						<style>
   						  p { color: blue; }
   						</style>
   						

3. External

   
   							<head>
   							  <link rel="stylesheet" type="text/css" href="style.css">
   							  <!-- p { color: blue; } placed in style.css -->
   							</head>
   						

2. CSS $ > $ selectors

2. CSS $ > $ selectors examples

					h1 {
					  color: red; }  /* all h1 */

					h1, h2 {
					  font-weight: bold; } /* all h1 and h2 */

					h1 h2 {
					  font-weight: bold; } /* all h2 inside h1 */

					p strong { /* all strong inside p */
					  color: orange;
					  font-weight: bold; }

					#chapter1 {
					  color: blue }  /* element with id chapter1 */

					.pastoral {
					  color: green }  /* all with class pastoral */
				

3. Javascript

Published in The Sentinel of Carlisle, Pennsylvania, Dec 4, 1995.

• Scripting language for Web pages
• Created by Brendan Eich
• Some resemblances with Java
• Implemented in browsers and non-browser, e.g., node
• MDN JavaScript documentation
• Web standard versions, e.g., ES5

3. Javascript $>$ uses in browsers

• User interaction
• Asynchronous communications
• Control the browser
• Alter the content

3. Javascript $>$ including in Web pages

1. Inline

   
   							<script type="text/javascript">
   							  //JavaScript code here
   							</script>
   						

2. External

   
   							<script src="script.js"></script>
   						

3. Javascript $>$ main features

• Object-oriented language
• Everything is mutable
• Dynamic typing
• Function level scope
• First-class functions

3. Javascript $>$ main features

• Object-oriented language

  
  							//denotes a comment
  							obj = {first: 'Joseph', last: 'Priestley'}; //object literal
  							obj.first  //'Joseph'
  						

• Everything is mutable
• Dynamic typing
• Function level scope
• First-class functions

3. Javascript $>$ main features

• Object-oriented language
• Everything is mutable

  
  							obj = {first: 'Joseph', last: 'Priestley'};
  							obj.first = 'Joe'  //now first is 'Joe'
  						

• Dynamic typing
• Function level scope
• First-class functions

3. Javascript $>$ main features

• Object-oriented language
• Everything is mutable
• Dynamic typing

  
  							//primitive types
  							var foo = true;       //Boolean
  							var foo = null;       //Null
  							var foo = undefined;  //Undefined
  							var foo = 2.3;        //Number
  							var foo = 'bar'       //String
  						

• Function level scope
• First-class functions

3. Javascript $>$ main features

• Object-oriented language
• Everything is mutable
• Dynamic typing
• Function level scope

  
  							var b = 5;  //global scope, i.e., at the top of the script
  							function f(a) {
  							  var b = 3;  //local scope, i.e., within the scope of the function
  							  return a + b;
  							}
  							b;  //5
  						

• First-class functions

3. Javascript $>$ main features

• Object-oriented language
• Everything is mutable
• Dynamic typing
• Function level scope
• First-class functions

  
  							//functions treated similar to any other variable
  							var pi = function() { return Math.PI; }  //assign functions to a variable
  							
  							function add(a, f) { return a + f(); }
  							add(1, pi);  //pass functions as argument
  							
  							function addPi() {
  							  return function(a) {  //return functions
  							    return a + Math.PI;
  							  }
  							}
  						

3. Javascript $ > $ hoisting

Hoisting refers to the moving of variable declarations at the top of their scope when the script is parsed

							var a;  //declare
							a = 2;  //initialize
							var b;  //declare
							b = 5;  //initialize

							//function expression: declare & initialize
							var add = function (a, b) {
							  return a + b;
							  };  //; at the end!
							  
							//function declaration
							function func(a) {  
							  var b = 3;  //declare & initialize
							  var c = a + b;  //declare & initialize
							  return c;
							}
						

							var a;  //hoisted
							var b;  //hoisted
							var add;  //hoisted
							
							function func(a) {  //hoisted
							  var b;  //hoisted
							  var c;  //hoisted
							  b = 3;
							  c = a + b;
							  return c;
							}
  
							a = 2;
							b = 5;
							add = function (a, b) {
							  return a + b;
							};

						

3. Javascript $>$ closure

A closure is the combination of a function and the lexical
environment within which that function was declared.

					function exampleClosure(arg1, arg2) {  //closure example
					  var localVar = 2;
					  function exampleReturned(innerArg) {  //inner function (declaration)
					    return ((arg1 + arg2) / (localVar + innerArg));
					  }
					  return exampleReturned;  //reference to inner function
					}

					var globalVar = exampleClosure(2, 4);

					console.log(globalVar);  //[Function: exampleReturned]

					globalVar(4);  //1 = ((2 + 4) / (2 + 4))
				

Javascript ES6 to know

      //...
      const { NEIGHBORHOOD_MAP } = require('../lib/utils/xtown-api');
      let neighborhoodIds = [];
      printNewsCmd.neighborhoods.forEach(d => {
       let ids = NEIGHBORHOOD_MAP.get(d).id;
       if (!ids) {
        console.log(danger('ERROR'));
        console.log(danger('No such neighborhood id "' + info + '"'));
        exit(0);
       }
       ids = Array.isArray(ids) ? ids : [ids];
       neighborhoodIds = neighborhoodIds.concat(ids);
      });
      neighborhoodIds = [...new Set(neighborhoodIds)];  //remove duplicates
    
      const { printNews } = require('../lib/utils/printer');
      printNews({
       print_settings: {
        neighborhoods: neighborhoodIds,
        image: {
         dir: FOUNDRY_CONFIG.print_defaults.news.image.dir,
         format: printNewsCmd.imageFormat,
         width: +printNewsCmd.imageWidth,
         height: +printNewsCmd.imageHeight
        },
        user: user,
       },
       news: fs.readJSONSync(newsFile)
      }).then(result => {
       console.log(info('PRINT:'));
       console.log(info(' id:'), important(result.print.id));
       console.log(info(' path:'), important(result.print_settings.path));
       console.log(info(' file:'), important(result.print.file));
       console.log(info('PRINTS:'));
       result.print_settings.neighborhoods.forEach(d => {
        console.log(info(' ' + d + ':'));
        console.log(info('  file:'), important(result.print_settings.path + d + '/index.html'));
        console.log(info('  url:'), important(FOUNDRY_CONFIG.prints_url + result.print.id + '/' + d + '/index.html'));
       });
       if (printNewsCmd.verbose) {
        console.log(info('\ntrace'));
        console.dir(result, CONSOLE_DIR_OPTIONS);
       }
      }).catch(err => {
       console.log(danger('ERROR'));
       console.dir(err, CONSOLE_DIR_OPTIONS);
      });
      //...
     

Javascript ES6 to know (continued)

/**
 * print news
 * @param {Object} context print context
 * @returns {Object} printed object
 */
const printNews = context => {
  return new Promise((resolve, reject) => {
    const { FOUNDRY_CONFIG } = require('../config');

    const { v4: uuidv4 } = require('uuid');
    context.print = {
      id: uuidv4(),
      news_id: context.news.id,
      created: {
        user: context.print_settings.user,
        timestamp: Date.now(),
      },
      errors: []
    };

    context.print_settings = context.print_settings ? context.print_settings : FOUNDRY_CONFIG.print_defaults.news;
    context.print_settings.path = context.print_settings.path ? context.print_settings.path : FOUNDRY_CONFIG.prints_path;
    context.print_settings.path += context.print.id + '/';  //prints folder

    const { NEIGHBORHOOD_MAP } = require('./xtown-api');
    let neighborhoods = [];
    context.print_settings.neighborhoods.forEach(d => {
      let ids = NEIGHBORHOOD_MAP.get(d).id;
      if (!ids) {
        reject(err);
        return;
      }
      ids = Array.isArray(ids) ? ids : [ids];
      neighborhoods = neighborhoods.concat(ids);
    });
    context.print_settings.neighborhoods = [...new Set(neighborhoods)];  //remove duplicates

    fs.ensureDirSync(context.print_settings.path);
    const newsFile = context.print_settings.path + context.print.id + FOUNDRY_CONFIG.json_ext;
    fs.writeJSONSync(newsFile, {...context.print, neighborhoods: context.print_settings.neighborhoods});
    context.print.file = newsFile;

    printNewsFiles(context).then(results => {
      resolve(context);
    }).catch(e => reject(e));
  });
}