About data visualization

Data visualization is the science of

visual representation of data.

About data visualization

Representing large amounts of disparate

information in a visual form often allows

you to see patterns that would otherwise

be buried in vast, unconnected data sets.

About data visualization

The effectiveness in conveying ideas

is achieved by combining both

aesthetics and functionality.

What the Web brings into data visualization

Generation and storage of massive

and growing amounts of data.

What the Web brings into data visualization

Generation and storage of massive

and growing amounts of data.

A means to create and share many

kinds of visualizations

What the Web brings into data visualization

Generation and storage of massive

and growing amounts of data.

A means to create and share many

kinds of visualizations

Unprecedented access to data

What the Web brings into data visualization

Generation and storage of massive

and growing amounts of data.

A means to create and share many

kinds of visualizations

Unprecedented access to data

Animations and user interactions

A big part of the content available

on the web is created by the users.

Social data

A big part of the content available

on the web is created by the users.

This represents the largest amount

of data on the Web that needs to be

processed and visualized.

Social data

A big part of the content available

on the web is created by the users.

This represents the largest amount

of data on the Web that needs to be

processed and visualized.

Important derivative information

may surface from creative ways of

exploiting this data.

Social data

Using JavaScript libraries for

data visualization

Anyone accessing the Web has a browser

and every browser supports JavaScript.

Using JavaScript libraries for

data visualization

Anyone accessing the Web has a browser

and every browser supports JavaScript.

JavaScript - very powerful tool to develop

client-side web applications, especially

those that require user interaction.

Using JavaScript libraries for

data visualization

Anyone accessing the Web has a browser

and every browser supports JavaScript.

JavaScript - very powerful tool to develop

client-side web applications, especially

those that require user interaction.

Therefore JavaScript libraries for data

visualization would hold an incredibly big

advantage over any other tool used with

the same purpose.

Using JavaScript libraries for

data visualization

16 Javascript Libraries for Visualizations

We have chosen to focus on

Processing.js and Raphaël

Processing.js

Makes Processing code run in a webpage.

Makes use of the HTML5 canvas.

How to use Processing.js Write pure Processing code

Write pure JavaScript code

Combine Processing with JavaScript

Raphaël

JavaScript library that simplifies work

with vector graphics on the web.

Uses SVG and VML

Extension for charts: gRaphaël

Processing.js and Raphaël - Comparison

Drawing Canvas vs. SVG

Raster vs. Vectorial

Processing.js and Raphaël - Comparison

Drawing Canvas vs. SVG

Raster vs. Vectorial

Coding Java + JavaScript vs. only JavaScript

Processing.js and Raphaël - Comparison

Drawing Canvas vs. SVG

Raster vs. Vectorial

Coding Java + JavaScript vs. only JavaScript

Speed if a single element is changed

○ Raphael can update only that

○ Processing must refresh the entire scene

if the window is rescaled

○ Raphael does nothing and the image maintains its quality

○ Processing must generate the entire scene again

Processing.js and Raphaël - Comparison

Functionality Processing.js has many features inherited from

Processing. This allows the user to create very

complex drawings.

Raphael has a good reference, but not that large as

Processing. Although for simple to more complex

tasks it has many features.

Processing.js and Raphaël - Comparison

Functionality Processing.js has many features inherited from

Processing. This allows the user to create very

complex drawings.

Raphael has a good reference, but not that large as

Processing. Although for simple to more complex

tasks it has many features.

Documentation Both frameworks have a well-documented

reference with examples and drawings

Case studies

Social data to use - what Twitter

provides through its API

Case studies

Social data to use - what Twitter

provides through its API

Idea: a small application that takes

tweets from various Twitter accounts

and displays them in a chart.

Case studies

Social data to use - what Twitter

provides through its API

Idea: a small application that takes

tweets from various Twitter accounts

and displays them in a chart.

This chart shows how many tweets

were posted in every day of the week

for every user.

Case studies

Social data to use - what Twitter

provides through its API

Idea: a small application that takes

tweets from various Twitter accounts

and displays them in a chart.

This chart shows how many tweets

were posted in every day of the week

for every user.

See our video demo, which shows

how the two applications work

Case study for Processing.js

Application demo | Source code

What the chart looks like for various entries

Case study for Processing.js

Application demo | Source code

//Draws weekday labels

for(int i=0; i<days.length; i++)

{

textAlign(CENTER);

text(days[i], startX + i * (maxRadius + distance * 2) +

(maxRadius + distance * 2)/2, startY - 15);

}

//Linear scaling transform of number of tweets into circle radius

float rad = (stats[i]-minTweets)/(maxTweets-minTweets) *

(maxRadius-minRadius) + minRadius;

//Compute position and draw circle

int x = startX + (maxRadius + distance * 2)/2 +

(maxRadius + distance * 2) * i;

int y = startY + (maxRadius + distance * 2)/2 +

(maxRadius + distance * 2) * index;

ellipse( x, y, rad, rad );

Case study for Raphaël

Application demo | Source code

What the chart looks like for various entries

Case study for Raphaël

Application demo | Source code

paper.text(x, y, text)

/* To resize the text, another call is used but is chained to

the previous one like this:

*/

attr = {font: "12px Helvetica", opacity: 1};

paper.text(x, y, text).attr(attr);

var circle = paper.ellipse(x, y, rad, rad);

circle.attr("fill", "#123214");

circle.attr("stroke", "#fff");

paper = Raphael("canvas", 900, 400);

Conclusions

Both Processing.js and Raphaël have

their advantages and disadvantages.

we have concluded that the choice

between the two highly depends on the

type of project you want to develop and

your previous experience with JavaScript

In the end, it all comes down to the needs

of the developer.

References 1. Educase Learning Initiative, "7 things you should know

about Data Visualization", October 2007

2. Michael Friendly, "Milestones in the history of thematic

cartography, statistical graphics, and data visualization",

August 24, 2009

3. Vitaly Friedman, "Data Visualization and Infographics", in:

Graphics, Monday Inspiration, January 14th, 2008.

4. Fernanda Viegas and Martin Wattenberg, "How To Make

Data Look Sexy", CNN.com, April 19, 2011.

5. Benjamin Wiederkehr, 16 Javascript Libraries for

Visualizations, July 29, 2009

6. Processing.js – Learning

7. Processing.js Quick Start - JavaScript Developer Edition

8. Pomax's guide to Processing.js

9. Raphael documentation

Authors

Cristina Şerban, I3B2

Adrian Dumitru Popovici, I3B1

Faculty of Computer Science,

Univeristy Alexandru Ioan Cuza of Iaşi

{cristina.serban, popovici.adrian}info.uaic.ro