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