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)

HTML visualizations


The final piece in the puzzle is HTML5. When I was young, a new version of HTML meant another long-winded specification from the World Wide Web consortium. The specification process for a new version of HTML would take several years and would be planned out by a committee with members from large technical organizations such as Microsoft and IBM. While there is an HTML5 specification, it is not as formal as previous iterations. The term HTML5 has come to describe a collection of future-oriented technologies that can be used to create powerful web applications.

HTML5 includes specification for diverse features such as the following:

  • Web workers (multi-threaded JavaScript)

  • Touch events for touchscreen devices

  • Micro-data formats

  • Canvas

  • Scalable Vector Graphics

  • Camera API

  • Geolocation API

  • Offline data

Through these new APIs and features, HTML5 has become a major player not just on browsers, but also on mobile devices and on the desktop. Through toolkits such as PhoneGap (http://phonegap.com/), HTML and Microsoft's WinJS JavaScript can be used as primary development languages on iPhones, Android, Windows Phone, and even Blackberry. The native APIs are bound to JavaScript equivalents opening up the camera, GPS, and filesystem to JavaScript applications. HTML5 can also be used as a development platform for Windows 8-style applications (previously known as Metro). On non-Windows platforms, desktop applications can be developed in HTML5 using a toolkit-like Adobe Air (http://www.adobe.com/products/air.html). HTML5 offers a multi-platform development environment that allows taking skills from the Web to tablet to desktop.

The offline data tools remove the dependence on having a web server to serve content to your application. Embedding data directly on the client machine instead of having to pull it down repeatedly from a server allows for applications to be truly mobile—the network is no longer crucial.

HTML5 has been hugely beneficial to visualization developers. Canvas and SVG both offer enticing functionalities. CSS3 also allows for a greater degree of flexibility around styling. Before HTML5 came onto the scene, interactive data visualizations in a browser could best be achieved using third-party tools such as Java Applets or Adobe Flash. The adoption rates for these technologies, while high, still cut off a large number of users. Even with high adoption rates, the versions of these tools being run in the wild were frequently archaic. Neither Java Applets, nor Adobe Flash is available on the increasingly popular mobile platforms. HTML5, on the other hand, is now supported in some form on the vast majority of smart phones.

One of the best features of developing a visualization in HTML is that it is possible to allow users to interact with the visualization. Famous visualizations such as the London Underground Map have been crippled by being drawn on a static piece of paper. Interactions provide a whole new level of user engagement—previously impossible. It should not surprise you if users of interactive visualizations find ways to manipulate the visualization to derive whole new conclusions.

The industry support for HTML and JavaScript technologies is impressive. All the technology giants have invested heavily in developing browsers and development tools based on HTML5 and JavaScript. The pace of change in the web development sphere is stunning. There is not a week that goes by when I fail to hear about an innovative new JavaScript library or a new take on a development platform. The ready availability of cloud-based hosting has enabled startups to flourish on the web.

When choosing a tool in which to develop visualizations, HTML provides an excellent option. Broad support, good tooling, and a well-known API ensure that developing will be a pleasure. Well, maybe not a pleasure, but at least relatively painless. HTML and JavaScript are the lingua franca for all web developers. No matter if development is being done with Ruby on Rails, ASP.NET, or even Wordpress as a backend, the frontend is always going to be written in HTML and JavaScript. This gives a big pool of developers from which talent may be pulled.