The document discusses data visualization and JavaScript libraries for creating visualizations. It provides an overview of data visualization, what opportunities the web provides, and discusses social data. It then covers two JavaScript libraries - Processing.js and Raphael. Key differences between the libraries are explained. Finally, case studies demonstrating each library are described along with examples of code. References are also included.

2. About data visualization
 Datavisualization is the science of
visual representation of data.

3. 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.

4. About data visualization
 The effectiveness in conveying ideas
is achieved by combining both
aesthetics and functionality.

5. What the Web brings into data visualization
 Generation and storage of massive
and growing amounts of data.

6. 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

7. 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

8. 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

9. Social data
 A bigpart of the content available
on the web is created by the users.

10. 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.

11. 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.

12. Using JavaScript libraries for
data visualization
 Anyoneaccessing the Web has a browser
and every browser supports JavaScript.

13. 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.

14. 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.

15. Using JavaScript libraries for
data visualization
 16 Javascript Libraries for Visualizations
 We have chosen to focus on
Processing.js and Raphaël

16. 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

17. Raphaël
 JavaScript library that simplifies work
with vector graphics on the web.
 Uses SVG and VML
 Extension for charts: gRaphaël

18. Processing.js and Raphaël - Comparison
 Drawing
 Canvas vs. SVG
 Raster vs. Vectorial

19. Processing.js and Raphaël - Comparison
 Drawing
 Canvas vs. SVG
 Raster vs. Vectorial
 Coding
 Java + JavaScript vs. only JavaScript

20. 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

21. 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.

22. 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

23. Case studies
 Social data to use - what Twitter
provides through its API

24. 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.

25. 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.

26. 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

27. Case study for Processing.js
Application demo | Source code
What the chart looks like for various entries

28. 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 );

29. Case study for Raphaël
Application demo | Source code
What the chart looks like for various entries

30. Case study for Raphaël
Application demo | Source code
paper = Raphael("canvas", 900, 400);
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");

31. 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.

32. 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

33. Authors
 CristinaŞerban, I3B2
 Adrian Dumitru Popovici, I3B1
{cristina.serban, popovici.adrian}info.uaic.ro
Faculty of Computer Science,
Univeristy Alexandru Ioan Cuza of Iaşi