Information Visualization – NOTES 20150918

Notes from the reading: Murray, Scott. 2013. Technology Fundamentals. In Interactive Data Visualization. Retrieved from http://chimera.labs.oreilly.com/books/1230000000345/ch03.html. 

Technology Fundamentals

The Web

Clients contact servers with requests, and servers respond with data.

There are lots of different server software packages, but Apache is the most common.

Web pages can be identified by:

  • URL (Uniform Resource Locator). Complete URLs consist of four parts:
    • An indication of the communication protocol, such as HTTP or HTTPS
    • HTTP: Hypertext Transfer Protocol
    • S: Secure
    • The domain name of the resource, such as com
    • The port number, indicating over which port the connection to the server should be attempted
    • Any additional locating information, such as the path of the requested file, or any query parameters
  • or URI (Uniform Resource Identifier).

HTML

HTML is a tool for specifying semantic structure, or attaching hierarchy, relationships, and meaning to content.

Adding Structure with Elements

Marking up

  • adding tags to create elements. <> </>
  • semantic: h1, p, ul…

Attributes

Attributes to elements. For example, <a>:

  • href
  • property
  • class (similar both in CSS and Javascript)
  • id (similar both in CSS and Javascript). One id cannot appear more than once per page

Comments à /*…. */ or <!– Your comment here –>

DOM: Document Object Model

It refers to the hierarchical structure of HTML, it’s needed to make sense of a page’s content. Our code must navigate its hierarchy to apply styles and actions to its elements.

<html>

<body>

<h1>Breaking News</h1>

<p></p>

</body>

</html>

Rendering and the Box Model

Rendering is the process by which browsers, after parsing the HTML and generating the DOM, apply visual rules to the DOM contents and draw those pixels to the screen.

To a browser, everything is a box (with width, height and positions in space)

CSS

Cascading Style Sheets are used to style the visual presentation of DOM elements.

selector {

property: value;

property: value;

property: value;

}

Or

selectorA, selectorB {

property: value;

}

Selectors

Selectors: p, a, li…

D3 uses CSS-style selectors:

  • Type selectors h1, p, em, div, strong,
  • Descendant selectors: h1 em,
  • Class selectors: .label, .caption…
    • Target elements with multiple classes: .axis.x, .axis.y
      • .axis: it’s applied to .axis.x and .axis.y
      • .axis.x: it’s applied to axis.x only
    • ID selectors: match the single element with a given ID. #header, #nav
      • Selectors get progressively more useful as you combine them in different ways to target specific elements.
        • .div.sidebar
        • #button.on

Properties and Values

They form the styles: margin, padding, etc.

Ways to apply CSS style

  • Embed the CSS in your HTML (in the head)
  • Reference an external stylesheet from the HTML.
    • Save it in a plain-text file with a .css suffix, then use a link element in the document head to reference the external CSS file, like so:

<html>

<head>

<link rel=”stylesheet” href=”style.css”>

</head>

  • Attach inline styles.
    • A third method is to attach style rules inline directly to elements in the HTML.
    • This system is messy and hard to read

JavaScript

JavaScript is the scripting language that can make pages dynamic by manipulating the DOM after a page has already loaded in the browser.

Variables

Variables are containers for data. A simple variable holds one value:

var number = 5;

The equals sign is an assignment operator because it takes the value on the right (5) and assigns it to the variable on the left (number).

A variable is a datum, the smallest building block of data. The variable is the foundation of all other data structures, which are simply different configurations of variables

Variables can be:

  • Numeric values
  • Strings of text (always enclosed by quotation marks)
  • Boolean (True or false)

var thisMakesSenseSoFar = true;

Also note that in JavaScript, statements are concluded with a semicolon.

Types of variables

Arrays

An array is a sequence of values, conveniently stored in a single variable à simple sets of value

[ ] à array

var numbers = [ 5, 10, 15, 20, 25 ];

To retrieve information: numbers[0] //Returns 5

Array positions begin in 0

numbers[0] //Returns 5

numbers[1] //Returns 10

numbers[2] //Returns 15

numbers[3] //Returns 20

numbers[4] //Returns 25

Arrays can contain any type of data:

  • Percentages
  • Names
  • Different types of values can be stored within the same array (no recommended)

var percentages = [ 0.55, 0.32, 0.91 ];

var names = [ “Ernie”, “Bert”, “Oscar” ];

Objects

For complex datasets, put your data into an object.

var fruit = {

kind: “grape”,

color: “red”,

quantity: 12,

tasty: true

};

Reference each value with dot notation:

fruit.kind     //Returns “grape”

Objects and Arrays

You can combine these two structures to create different combinations:

  • Arrays of objects
  • Objects of arrays
  • Objects of objects
Arrays of objects

[ ] à array

{} à object

var fruits = [

{

kind: “grape”,

color: “red”,

quantity: 12,

tasty: true

},

{

kind: “kiwi”,

color: “brown”,

quantity: 98,

tasty: true

},

{

kind: “banana”,

color: “yellow”,

quantity: 0,

tasty: true

}

];

fruits[0].kind     == “grape”

fruits[1].kind     == “kiwi”

JSON. JavaScript Object Notation

The only difference here is that our property names are now surrounded by double quotation marks “”, making them string values.

{

“kind”: “grape”,

“color”: “red”,

“quantity”: 12,

“tasty”: true

}

GeoJSON

GeoJSON is a formalized syntax of JSON objects, optimized for storing geodata.

GeoJSON can store:

  • points in geographical space (typically as longitude/latitude coordinates)
  • shapes (such as lines and polygons)
  • and other spatial features.
Mathematical Operators

You can add, subtract, multiply, and divide values using the following operators, respectively:

+   //Add

–   //Subtract

*   //Multiply

/   //Divide

Comparison Operators

You can compare values against each other using the following operators:

== //Equal to

!= //Not equal to

<   //Less than

>   //Greater than

<= //Less than or equal to

>= //Greater than or equal to

Control Structures

When your code needs to make a decision or repeat something: if or for

  • if() only
    • comparison operators to determine if a statement is true or false:

if (someValue < anotherValue) {

console.log (“”)

}

  • for() now
    • loops to repeatedly execute the same code

for (initialization; test; update) {

//Code to run each time through the loop

}

  • The most common application of a for loop is to increase some variable by 1 each time through the loop. (( i++ à i=i+1))

for (var i = 0; i < 5; i++) {

console.log(i); //Prints value to console

}

The preceding for loop prints the following to the console:

0

1

2

3

4

An array organizes lots of data values in one convenient place. Then for() can quickly “loop” through every value in an array and perform some action with it.

var numbers = [ 8, 100, 22, 98, 99, 45 ];

for (var i = 0; i < numbers.length; i++) {

console.log(numbers[i]); //Print value to console

}

length is a property of every array. In this case, numbers contains six values, so numbers.length resolves to 6, and the loop runs six times.

Functions

Functions are chunks of code that do things.

Functions are special because they can take arguments or parameters as input, and then return values as output.

calculateGratuity à name

function (bill) à function

var calculateGratuity = function(bill) {

return bill * 0.2;

};

calculateGratuity(38);

console.log(tip); //Prints 7.6 to the console

There are also anonymous functions that, unlike calculateGratuity, don’t have names. Anonymous functions are used all the time with D3.

Referencing Scripts
  • Scripts can be included directly in HTML, between two script tags, as in:

<body>

alert(“Hello, world!”);

</body>

  • or stored in a separate file with a .js suffix, an then referenced in the HTML
Variable hoisting

JavaScript code is usually, but not always, executed in linear, top-to-bottom order.

Function-level scope

Variable scope helps us identify which variables are accessible in which contexts.

Many languages use block-level scope, in which variables exist only within the current “block” of code, usually indicated by curly braces. With block-level scope, our i would exist only within the context of the for loop, for example, so any attempts to read the value of i or change i outside of the loop would fail. This is nice because you could establish other variables from within your loop and know that they wouldn’t conflict with variables that exist elsewhere.

In JavaScript, however, variables are scoped at the function level, meaning they are accessible anywhere within the function (not block) in which they reside.

There are two easy:

  • Declare variables only within other functions. This is not usually feasible, but the function-level scope will prevent local variables from conflicting with others.
  • Declare a single global object, and attach all of your would-be global variables to that object. For example:

var Vis = {}; //Declare empty global object

Vis.zebras = “still pretty amazing”;

Vis.monkeys = “too funny LOL”;

Vis.fish = “you know, not bad”;

SVG

D3 is most useful when used to generate and manipulate visuals as Scalable Vector Graphics (SVG). Using SVG is more reliable, visually consistent, and faster.

The SVG Element

<element></element> <!– Uses closing tag –>

<element/>         <!– Self-closing tag –>

Before you can draw anything, you must create an SVG element. Pixels are the default measurement units.

<svg width=”500″ height=”50″>

</svg>

Simple Shapes

There are a number of visual elements that you can include between those svg tags:

  • Rect: draws a rectangle
    • X: upper left corner
    • Y: width and height to specify dimension
  • Circle: draws a circle
    • Cx, cy: center in x
    • Cy: center in y
    • R: radius
  • Ellipse: draws a ellipse
    • Cx, cy: center
    • Rx: radius in X
    • Ry: radius in y
  • Line: draws a line
    • X1, y1: coordinates of one end
    • X2, y2: coordinates of the other end
    • Stroke color needed!
  • Text: renders text
    • X: left edge
    • Y: baseline (line where letters appear to rest)
    • It will inherit css styles unless specified

When any visual element runs up against the edge of the SVG, it will be clipped

  • Path: for drawing anything more complex than the preceding shapes (like country outlines for geomaps)

Styling SVG Elements

  • Default style: black with no stroke
  • Fill: color value
  • Stroke
  • Stroke-width: measurement in px
  • Opacity: from 0.0 to 1.0
  • Text: font-family and font-size

They can be added directly in the code or through a CSS class:

  • Multiple elements
  • Easier to read
  • Faster to change

Layering and Drawing Order

The first to render (at the bottom) is the one that appears last (like in a canvas)

Transparency

  • RGB with alpha
  • Set an opacity value

<circle cx=”25″ cy=”25″ r=”20″ fill=”rgba(128, 0, 128, 1.0)”/>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s