Book Image

Social Data Visualization with HTML5 and JavaScript

By : Simon Timms
Book Image

Social Data Visualization with HTML5 and JavaScript

By: Simon Timms

Overview of this book

<p>The increasing adoption of HTML5 opens up a new world of JavaScript-powered visualizations. By harnessing the power of scalable vector graphics (SVGs), you can present even complex data to your users in an easy-to-understand format and improve the user experience by freeing users from the burden of tabular data.</p> <p>Social Data Visualization with HTML5 and JavaScript teaches you how to leverage HTML5 techniques through JavaScript to build visualizations. It also helps to clear up how the often complicated OAuth protocol works to help you unlock a universe of social media data from sites like Twitter, Facebook, and Google+.</p> <p>Social Data Visualization with HTML5 and JavaScript provides you with an introduction to creating an accessible view into the massive amounts of data available in social networks. Developers with some JavaScript experience and a desire to move past creating boring charts and tables will find this book a perfect fit. You will learn how to make use of powerful JavaScript libraries to become not just a programmer, but a data artist.</p> <p>By using OAuth, which is helpfully demystified in one of the book’s chapters, you will be able to unlock the universe of social media data. Through visualizations, you will also tease out trends and relationships which would normally be lost in the noise.</p>
Table of Contents (15 chapters)

Retrieving data


Before we go about retrieving data we should probably decide what data we wish to visualize. The amount of data which is available about the logged in user is not all that great (at least it isn't for me but I hardly use Facebook). That leaves us with looking at our friends. I found devices my friends use to access Facebook to be quite interesting. Are they more Android users or iOS? This information is available as part of the friends' collection. To retrieve this information we can use the FB.api() method:

FB.api('/me?fields=friends.fields(devices)', function(response){
  for(i = 0; len = response.friends.data.length; i< len; i++){
    var friend = response.friends.data[i];
    if(friend.devices)
      for(j = 0; j< friend.devices.length; j++)
    if(friend.devices[j].hardware != "iPad")
      operatingSystems[friend.devices[j].os]++;
  }
});

Into the api() method we pass a URL to be retrieved. In this case, we request the special URL /me which refers to the currently...