0
About data visualization Datavisualization 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 pa...
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...
What the Web brings into data visualization Generation   and storage of massive  and growing amounts of data. A means to...
What the Web brings into data visualization Generation   and storage of massive  and growing amounts of data. A means to...
Social data A bigpart 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 ...
Social data A big part of the content available  on the web is created by the users. This represents the largest amount ...
Using JavaScript libraries fordata visualization Anyoneaccessing the Web has a browser and every browser supports JavaScr...
Using JavaScript libraries for data visualization Anyone    accessing the Web has a browser  and every browser supports J...
Using JavaScript libraries for data visualization Anyone    accessing the Web has a browser  and every browser supports J...
Using JavaScript libraries fordata visualization 16 Javascript Libraries for Visualizations We have chosen to focus on  ...
Processing.js Makes Processing code run in a webpage. Makes use of the HTML5 canvas. How    to use Processing.js   Wri...
Raphaël JavaScript  library that simplifies work  with vector graphics on the web. Uses SVG and VML Extension   for cha...
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....
Processing.js and Raphaël - Comparison Drawing   Canvas vs. SVG   Raster vs. Vectorial Coding   Java + JavaScript vs....
Processing.js and Raphaël - Comparison Functionality   Processing.js has many features inherited from    Processing. Thi...
Processing.js and Raphaël - Comparison Functionality   Processing.js has many features inherited from    Processing. Thi...
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 fr...
Case studies Social data to use - what Twitter  provides through its API Idea: a small application that takes  tweets fr...
Case studies Social data to use - what Twitter  provides through its API Idea: a small application that takes  tweets fr...
Case study for Processing.jsApplication demo | Source code            What the chart looks like for various entries
Case study for Processing.jsApplication demo | Source code//Draws weekday labelsfor(int i=0; i<days.length; i++){        t...
Case study for RaphaëlApplication demo | Source code            What the chart looks like for various entries
Case study for RaphaëlApplication demo | Source codepaper = Raphael("canvas", 900, 400);paper.text(x, y, text)/* To resize...
Conclusions Both  Processing.js and Raphaël have  their advantages and disadvantages. we have concluded that the choice ...
References1.   Educase Learning Initiative, "7 things you should know     about Data Visualization", October 20072.   Mich...
Authors    CristinaŞerban, I3B2    Adrian Dumitru Popovici, I3B1{cristina.serban, popovici.adrian}info.uaic.ro    Facult...
Social data visualization
Upcoming SlideShare
Loading in...5
×

Social data visualization

731

Published on

For more information, see our wiki: http://data-visualization.wikispaces.com/

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
731
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Social data visualization"

  1. 1. About data visualization Datavisualization is the science of visual representation of data.
  2. 2. 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.
  3. 3. About data visualization The effectiveness in conveying ideas is achieved by combining both aesthetics and functionality.
  4. 4. What the Web brings into data visualization Generation and storage of massive and growing amounts of data.
  5. 5. 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
  6. 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 Unprecedented access to data
  7. 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 Animations and user interactions
  8. 8. Social data A bigpart of the content available on the web is created by the users.
  9. 9. 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.
  10. 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. Important derivative information may surface from creative ways of exploiting this data.
  11. 11. Using JavaScript libraries fordata visualization Anyoneaccessing the Web has a browser and every browser supports JavaScript.
  12. 12. 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.
  13. 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. Therefore JavaScript libraries for data visualization would hold an incredibly big advantage over any other tool used with the same purpose.
  14. 14. Using JavaScript libraries fordata visualization 16 Javascript Libraries for Visualizations We have chosen to focus on Processing.js and Raphaël
  15. 15. 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
  16. 16. Raphaël JavaScript library that simplifies work with vector graphics on the web. Uses SVG and VML Extension for charts: gRaphaël
  17. 17. Processing.js and Raphaël - Comparison Drawing  Canvas vs. SVG  Raster vs. Vectorial
  18. 18. Processing.js and Raphaël - Comparison Drawing  Canvas vs. SVG  Raster vs. Vectorial Coding  Java + JavaScript vs. only JavaScript
  19. 19. 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
  20. 20. 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.
  21. 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. Documentation  Both frameworks have a well-documented reference with examples and drawings
  22. 22. Case studies Social data to use - what Twitter provides through its API
  23. 23. 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.
  24. 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. This chart shows how many tweets were posted in every day of the week for every user.
  25. 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. See our video demo, which shows how the two applications work
  26. 26. Case study for Processing.jsApplication demo | Source code What the chart looks like for various entries
  27. 27. Case study for Processing.jsApplication demo | Source code//Draws weekday labelsfor(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 radiusfloat rad = (stats[i]-minTweets)/(maxTweets-minTweets) * (maxRadius-minRadius) + minRadius;//Compute position and draw circleint 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 );
  28. 28. Case study for RaphaëlApplication demo | Source code What the chart looks like for various entries
  29. 29. Case study for RaphaëlApplication demo | Source codepaper = Raphael("canvas", 900, 400);paper.text(x, y, text)/* To resize the text, another call is used but is chained tothe 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");
  30. 30. 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.
  31. 31. References1. Educase Learning Initiative, "7 things you should know about Data Visualization", October 20072. Michael Friendly, "Milestones in the history of thematic cartography, statistical graphics, and data visualization", August 24, 20093. 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, 20096. Processing.js – Learning7. Processing.js Quick Start - JavaScript Developer Edition8. Pomaxs guide to Processing.js9. Raphael documentation
  32. 32. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×