Google versus Facebook

Animated Compare Chart

Facebook keeps growing in financial value, number of users and corporate publicity. It’s popularity seems to overwhelm the interest in Google. But what about the facts?

Tip: hoover your mouse over the objects and press buttons and links.
Warning: bad quality and reduced functionality in Internet Explorer (read more below).

Animation shows variety of information

This animated compare chart is the result of my first animation project. The animation shows a comparison of the corporate publicity of Google and Facebook over the period January 2008 till January 2011. The data is is taken from Google Insight and collected by manual browsing different news sites.

  1. The vertical bar represents the weekly number of searches for news on Google and Facebook.
  2. The size of the icons gives information on the difference in number of searches for news. The bigger an icon, the bigger the difference compared to it’s competitor is.
  3. The two green horizontal bars show the cumulative number of searches for news on Google and Facebook.
  4. The headlines taken from the news are links to the origin of the news item.

Raphaël Javascript can’t beat Flash support and performance

This project is the result of playing around with the Raphaël Javascript library. I wanted to experience how easy it is to create an animated data visualizations and check the performance and quality of the animation. Advantage of using Javascript is the fact the animation doesn’t require the Adobe Flash plugin. According to the Raphaël Javascript library site, it supports all major browsers: Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
I really like the way the Raphaël Javascript library simplifies work with Scalable Vector Graphics (SVG) on the web. With only limited documentation on the libraries website, I could easily create this animation. The animation runs smooth and as designed in Firefox, Safari and Chrome. The result in Internet Explorer is disappointing. Microsoft’s browser doesn’t support Scalable Vector Graphics, so the Raphaël library uses Vector Markup Language (VML). This results in very bad quality and lack of functionality.
In contrast to Internet Explorer, mobile users with iPhone or iPad can enjoy this animation using their Safari browser. Be aware loading the page on iPhone takes some time, but the anmiation runs quite well. Mobile users running Android will get a white screen: no support for Scalable Vector Graphics.

Conclusion

To compare values over time the line chart is the most common choice. Markers are used to add information to points of interest. Using the same surface, the animated compare chart gives live to the data and reveals the same and more information in an attractive way. Leave your comment and let me know your opinion.
Regarding the tooling, my conclusion is the Raphaël library is quite easy to use and helps to reduce development time of animated data visualizations. It’s one of a variety of available Javascript libraries (Protovis, ProcessingJS, etc.), but now I know it, I might use it for future projects. Big disadvantage is the lack of good support by Internet Explorer, which is still the most used browser. But the same holds for other popular Javascript libraries.

6 Responses to Google versus Facebook

  1. madden 17 says:

    Especially instructive… looking onward to visiting again

  2. Florine says:

    I am curious too find out what blog platform you happen to be utilizing?
    I’m experiencing some small security problems with myy latest site and I would like to find somethbing more secure.Do you have any recommendations?

  3. We have to bill Medicare by the patient’s name on the Medicare card, or we don’t get paid. The problem is that the patient name on their Medicare card is very often different from their legal name, driver license, or insurance card. Until all providers, including CMS, insist on legal names on the Medicare card/insurance cards, we will have continued confusion and fraud.

  4. I wass curious if you ever considered changing the layout of your site?
    Its veery well written; I love what youve got
    too say. Buut maybe yyou could a little morfe in the way of content so people could
    connect with it better. Youve got ann awful loot of teext for only having 1 or 2 images.
    Maybe you could sppace it out better?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>