How to visualize JSON documents from MongoDB
Do you have a database full of JSON objects crying out for visual analysis? This post can help you take the first steps.
Using free and Open Source libraries to visualize unstructured data sources was the topic of a recent presentation I gave at MongoDB Washington DC. The presentation covered the following topics:
Visualizing Objects vs. Visualizing Records
The primary difference between objects (like MongoDB documents) and records is that objects can consist of dynamic and highly complex schemas versus the simple, static structures found in databases and delimited file formats like CSV files. This doesn’t change the types of visualizations you would want to create from your data (bar charts, pie charts, graphs, etc.) but it does effect the types of tools you have available to visualize JSON documents.
Most of the existing visualization tools used to create visualizations from relational databases and structured records aren’t designed to support building visualizations from unstructured, or dynamically structured, data sources.
Extract your data from MongoDB for visualization
There are a host of methods that you can use to extract your data from MongoDB databases, some are built in to the platform and others are third party tools and libraries.
If you want to use the tools that come with the platform there are a couple of ways to extract data (none of which are really suited for production usage) including the mongoexport utility (http://docs.mongodb.org/manual/reference/mongoexport/) and the simple HTTP Interfaces (http://docs.mongodb.org/ecosystem/tools/http-interfaces).
For more robust applications you will want to select one of the MongoDB drivers (a list of which can be found here: http://docs.mongodb.org/ecosystem/drivers/) or one of the MongoDB REST interfaces like DrowsyDromedary or MongoDB REST for Node.js.
IKANOW’s Infinit.e platform (http://www.ikanow.com/platform/) gives access to its underlying MongoDB database using a REST based interface that returns JSON (along with XML, RSS, and other formats on demand) in response to Get or Post based queries.
Get to know JSON
JSON, or JavaScript Object Notation (json.org), is a subset of the JavaScript language (object literal notation). JSON documents consist of name value pairs and or ordered lists of values (arrays), e.g.:
{“anumber” : 1, “sometext” : “here is some text”, “anarray” : [1, 2, 3, 4, 5]}
As part of the JavaScript language JSON is a subset of the object literal notation meaning that using the example document above you can access the elements of the document within JavaScript in the following ways:
var jsonObj = {“number” : 1, “text” : “here is some text”, “numbers” : [1, 2, 3, 4, 5]};
var number = jsonObj.number;
var numberOne = jsonObj.numbers[0];
var numberTwo = jsonObj.numbers[1];
It is important to note that due to security restrictions built into JavaScript it isn’t possible to call a remote server via JavaScript. Work arounds to the cross-domain scripting restrictions can be found with JQuery and JSONP or via the use of proxy pages written using JSP or other technologies. In order to visualize JSON documents, you’ll need to pick the right tools.
A quick introduction to two visualization tools
As part of the presentation I created a collection of simple visualization examples that show how to use the Google Maps JavaScript API and D3.js visualization library to visualize data retrieved in a JSON based format. (All of this sample code is available online via GitHub at https://github.com/cvitter/ikanow.mongodc2013.presentation.)
- Google Maps JavaScript API
Google Maps is an extraordinarily popular tool for both developers and end users working with data that can be visualized best using maps. The included sample code demonstrates how to use the API to map 25 locations using simple markers as well as how to visualize large amounts of geographic data using a heat map. For more information on how to use the Google Maps JavaScript API check out the developers documentation at: https://developers.google.com/maps/documentation/javascript/ - D3.js
The D3.js JavaScript library is an Open Source library designed to make it easy to create a diverse range of date driven visualizations in formats including HTML, SVG, and CSS. There are three different sample visualizations included in the code including a basic bar chart, tree map, and bubble map. Each example is designed to demonstrate different aspects of basic D3.js functionality for consuming data (as JSON) and outputting visualizations. Complete documentation for the D3.js library is available at: http://d3js.org/
Other visualization tools
In addition to Google Maps JavaScript API and the D3.js library there are quite a few tools and libraries out there for developers. The following are just three examples of useful libraries that both useful and Open Source:
- NVD3 - nvd3.org
- Raphael JS - raphaeljs.com
- TimeLineJS - timeline.verite.co
Note: The slide deck for the presentation is available in PDF format here.
Learn More
Organizations of all sizes use IKANOW Enterprise Edition to synthesize structured and unstructured data for actionable intelligenc
About the Author: Craig Vitter, Product Evangelist
As a Professional Services Engineer, Craig explains his work as, “One part developer, one part consultant, and one part platform evangelist (not always in equal measures).” Craig has 17+ years of experience in developing, delivering and supporting complex applications. In addition, Craig holds a B.S. in Art with a concentration in Photography from James Madison University. Craig’s personal interests include camping with his family, playing ball with his all-American mutt, watching Formula 1 Racing, and power napping.
No comments