Download - Social data visualization
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