introduction to interactive data visualization for the web

What is the difference between the Internet and the World Wide Web?

SERVER

What is the IP Address of google.com?

GET http://www.google.com

server web

216.58.210.196

Why Data Visualization?

introduction to interactive data visualization for the web

The IP of google.com is 216.58.210.196

Maurizio Tesconi

March, 3 - 2015

Internet

Why Interactive?

• Variety of perspectives on the same information.
• Representing multidimensional datasets fairly in static images is notoriously difficult.
• Interactive visualizations can empower people to explore the data for themselves

how web applications work

FORM

<element attribute="value">content</element>

<ul>

<li>item1</li>

<li>item2</li>

<li>item3</li>

</ul>

• item1
• item2
• item3

ex:

<a href="http://www.google.com">Link a Google</a>

<form action = "get_data.php" method = "GET">

<input type="text"/>

<input type="password"/>

<input name="check" value="c1" type="checkbox"/>

<input name="check" value="c2" type="checkbox"/>

<input name="rad" value="r1" type="radio"/>

<input name="rad" value="r2" type="radio"/>

<input type="file"/>

<select name="select1">

<option selected="selected" value="1">s1</option>

<option value="2">s2</option>

</select>

<textarea name = "textarea"></textarea>

<input type = "submit" value="Invia" />

</form>

Well Formed

Valid

DTD = Document Type Definition

XML-Schema

<table>

<tr>

<td>A</td>

<td>B</td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

http://www.site.com/index.html#header

<div id = "header">

<div class = "section"> ... </div>

<div class = "section important"> ... </div>

<div class = "section" id = "section3" > ... </div>

</div>

<div>

<h1> .... <h6>

<p>

<table>

<ul>

<hr>

<pre>

...

ID's are unique

ID's have special browser functionality

You can use the same class on multiple elements

You can use multiple classes on the same element

Elements can have BOTH

<a>

<b>

</a>

</b>

<c d=i />

<d>

<e>

</d>

<a>

<b>c</b>

<d>e</d>

<f>

<g h="i"></g>

<g/>

<g>m</g>

</f>

</a>

UNIFORM RESOURCE LOCATOR

<span>

<a href="{URL}"></a>

<img src="{URL}" />

<em>

<strong>

...

absolute

vs

relative

css/main.css

Markup

• javascript framework
• cross-browser
• easy to program
• DOM manipulation
• Ajax support

JavaScript is the most popular programming language in the world.

Nome:

Cognome:

Indirizzo:

HyperText

• Mocha -> LiveScript -> JavaScript
• client-side scripts to interact with the user
• communicate asynchronously
• alter the document content that is displayed

Language

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Javascript

Vannevar Bush

CSS BOX MODEL

<link type="text/css" rel="stylesheet" href ="/style/main.css" />

Cascading Style Sheet

July, 1945

STYLE

+

STRUCTURE

CONTENT

+

CSS Positioning

lorem ipsum

=

lorem ipsum

<span id="span1">prova</span><span id="span2">box</span><span id="span3">model</span>

#span3 { margin: 5px;}

#span1 { padding: 5px;}

#span2 { border-width: 5px;}

CSS Float

span {

border: 1px solid black;

}

CLIENT