Show me the data visualization?!

Data Visualization is something Pathfinder grapples with regularly in our medical and healthcare software development projects.  Often times, you know you have great data, data that could help your customers really improve the way they work.  But, this data is largely locked away in database tables or at best behind fairly cryptic charts.   The challenge is often simple enough, present this great data in a way that is interactive, easy to grasp and provides quick value for a regular site user.

Understanding the challenge is always the first step in the process of creating data visualization that delivers good outcomes.   Characteristics such as interactivity, ease of use, and value to reader are a good start, but you should strive to delve deeper to unlock and visually represent the core notion, insight, result, narrative and emotional response.

As in any exploration of data, you’ll want to have a good grasp of where to find and manipulate graphs, charts, and other visualization templates or frameworks.  A good library to explore for data vizualization is D3.  D3 is a JavaScript library originally created by the team at the New York Times for their online data visualization use, and is now available publicly.  D3 has tools that allows manipulation of documents, charts and the like, based on the data they contain. It’s also designed with modern native web standards in mind, like CSS3 and HTML5.   

Let’s say, for example, you wish to effectively show how revenues and expenses compare and relate.   D3 has a number of the graph styles in its library including standard things like pie charts and bar graphs to increasingly more popular spoke and bubble graphics.  Many of these may work well enough, but to effectively show the notion of wins and losses in a market space you might conclude that pie charts or bar graphs don’t convey the message you’re looking for in one view or don’t do much for interactivity.  The spoke and bubble type graphic may not get the information across in a way that is clearly understood.

If you keep searching you might find a graphic like a Sankey diagram.  It can show very quickly with linking variable sized bars where different players lost or gained sales over a period of time.   

Diagram: Breakdown of iTunes’ economy in context with the entire Apple revenue model.

sankey income resized 600

Once you address your primary challenge you’ll likely also wish to append useful, if not critical, decision making data like geographic breakdown of the wins or losses in this example.   If geographic data is required, utilizing the Google maps API is a great tool to model the geographic data points for each transaction if you drilled in from the Sankey diagram.   

Did you find this useful?   What would you like to have learned?

#dataviz #d3js #sankeydiagram @PathSoft

Leave a Reply


captcha *