Sunday, February 21, 2016

Data Visualization with d3 Javascript: The Internet’s Secret

Data Driven Documents or the D3.js v2.0 came out in the year 2011. It is a JavaScript library with great potential to aid dynamic and interactive data visualizations in web browsers. It makes use of the widely implemented CSS, SVG and HTML5 standards to manipulate the documents in a web browser using JS. But ever since its inception, there has been little to no justifiable lime light for such a revolutionary JavaScript library. However, despite the lack of mainstream lime light, it has prospered. You might have seen a multitude of modern and awwward winning Data visualization sites that sport powerful graphics and reactive data members. There is about a 60% probability that one of them came bundled with a d3.js library. 




“D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.” 
~the D3.js website ~ 

D3.js enables a developer to attach their data to Document Object Model (DOM) elements. Later; HTML, CSS3, and/or SVG can be used to showcase this data. D3.js data-driven transformations and transitions can provide a level of interactivity to the statistics. 
Shape 
Explanation: It is a sequences sunburst data visualizations projection made by Kerry Rodden; a quantitative user experience researcher at Google. 
http://bl.ocks.org/kerryrodden/raw/7090426/ 

Shape 
A little back story for D3.js 

In 2009 Mike Bostock; (a Ph.D student), Professor Jeff Heer (Ph.D, founder of Prefuse and Flare) and Vadim Ogievetsky (M.S Student) at the Stanford Visualization group compiled Protovis, a JavaScript library that could generate SVG graphics from data. 
In 2011, work on Protovis was stopped, with an aim to completely re-imagine the Data Visualization tool. Bostock, Heer and Ogievetsky, developed and released D3.js, a more expressive framework that focuses on web standards and simultaneously, provides improved performance as compared to previous libraries. 

Currently, work on the open source project; D3.js is being sponsored by The New York Times. 
Shape 
But it was not the only (or even the first) JavaScript DOM Library, why did it succeed when a lot others failed? 
(i.e Protovis was the first stride in this direction, Manyeyes looked pretty but lacked graphics manipulation, while others like PrefuseQuadrigram and Flare were also quite good but all three of them needed plug-ins to work) 
Shape 
D3 supplies components for most data visualization related tasks, including: 
  • Data Loading :Load CSV, JSON etc. in the browser 
  • Layouts:Laying out sophisticated data structures such as networks and trees 

Choose & Implement 
It’s easy to create effective d3.js systems by simply choosing the right mix of components. Scale functions are quite useful even when they are implemented as a standalone component. 
Shape 
Shape 
Note: Need some professional Web Design  help? 
Not yet. . ? Check out our post on AMP (Accelerated Mobile Pages). and Future of SEO - Technical SEO
Shape 
Shape 

 Why D3.js is the Next Big Thing! 

  • First of all and a fact worth mentioning again; is that d3.js is open for everyone, all examples by contributors and the founding members are open source, either for educational or commercial use until or unless stated otherwise. 
  • D3.js is completely based on JavaScript and uses a functional style that lets developers reuse code and add the appropriate functions as required in their particular project. 
  • D3.js allows the developers to build the visualization framework that conveys their data more effectively. Graphic/ Data Visualization experts and Data scientist can find numerous uses for the D3.js library. 

The simple answer to the above question lies in the fact that D3.JS “works on the web”. Data Visualizations only work if people actually get to see them. It does not need a plug-in, is light weight and integrates seamlessly with the existing web technologies to manipulate any part of the Document Object Model (DOM). This gives D3.JS a substantial advantage over simple SVG or canvas only based libraries like Raphael.js, Processing.js etc. 



The release of d3.js is tailored to cater to the next generation of browsers and documents that are created using open standards rather than isolated plug-ins. d3 is a way to harness these new features to add interactivity to rather dull data sets. 
However, shiny new features that work on new browsers to show awesome transitions aren’t the sole reason behind the innovative potential of D3.js. A complete documentation, a proactive community, detailed examples and dedicated contributors such as Mike BostockKerry RodenJustin Palmer and Joel Rodriguez as well as countless others. These are the life blood of this successful JavaScript library for Data Visualization. 

Check out the full blog post on Data Driven Documents for examples, implementation details and the download link for the d3js library. Do leave a comment in the comments section for Pyxel where we believe in quality without compromise. 


Want Something Great like this on Your Business Website or want a new startup website for your Business? Request a Free Quote  to a Professional Web Design Company