Data Visualizations with Javascript and D3

Data Visualizations with Javascript and D3


Why create a table when you can create a graph!

Exactly. So many GUIs, both Thick and web-based, use tables to represent data. Much like looking at a spreadsheet. Very hard for an end user or analyst to detect patterns, trends, anomalies from looking at rows and columns on a spreadsheet. People are visual. Writing was introduced around 2600 B.C. are visual creatures. Most of us process information based on what we see. 65 percent of us are visual learners, according to the Social Science Research Network.

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.

Data is king. We all want data and want to be able to analyze what we are collecting. For many years, I have created graphical user interfaces for end-user operators and data analysts. Overwhelmingly these users ask for visuals to represent their data and to provide any alert type information. Even providing InfoGraphics to represent the data with both stats and graphs is very powerful.

How do you visualize your data? Well, I am a big fan of open-source technologies. Let me clarify, those open-source technologies that have community support by means of forums, testimonials and real-world use. I originally used the Highcharts Javascript package to represent data via charts with x and y axis displaying many series on the graph to show related data per the subjects. Highcharts was great and free and provided alot of nice visuals that I loved working with and users loved seeing. Well, they started charging a license fee a few years back. So we abandoned using it. We like free stuff. 

With the browsers maturing and rendering at much faster rates, the ability to draw your data write on the browsers canvas via SVG (Scalable Vector Graphics). SVG is officially supported by all main web browsers, including Internet Explorer. Yes, IE. In my search for a replacement Javascript visual library, I came across the wonderful D3 (Data-Driven Documents) library. This library was able to take your data sets and display them on the browser via a variety of visuals from maps, Sankey, force-directed and series type charts. As well as, many many more.


D3 is very forgiving with the format of the data you provide. But I do my best to format the data set the way the D3 visuals request it via their examples. It is not that difficult once you get the hang of it and understand what the data format represents and how the D3 widget reads it and displays it. The cool part is that these D3 visuals are interactive. If you mouse-over a map, you can create events to highlight the state or county and provide detailed information by means of a balloon or other info panel. But this is just the basics. You can update your D3 visuals as data is received via asynchronous web sockets or simple pulling of data from the server side. I prefer serving the data from the server side to the clients via web sockets. This provides for a much richer and cleaner user experience.

Wisdom is the application of knowledge. Ok, so I can write about D3, but have I ever used it and deployed an application to the users? Well, Yes. Here are some of the applications I created using the D3 library:

  • Spectrum Analyzer - providing sample data via Web Sockets.

  • Map - Interactive Mercator map to replace deprecated Google Earth Plugin. Plot and edit Waypoints with meta info per waypoint. Redraw on map with pan and zoom.

  • Force-directed graph - show data entity relationships. Helps to find info visually that is missed or that should be targeted.

  • Series graphs showing many series on a graph to depict pattern of life and trend analysis.

As a Principal Software Engineer generalists, I look for the most efficient way to complete a task. One that is useful and maintainable. I found that using the D3 javascript library for my data visualizations has increased the quality of my deliverables and improved the user experience as well. with the plethera of D3 examples availavble, there is no limit to what you can do to enrich the data visualization needs of your client.