1. Washington DC 2013
Visualizing MongoDB Objects
in Concept and Practice
https://github.com/cvitter/ikanow.mongodc2013.presentation

2. Introduction
• Do you have a MongoDB database full of BSON
documents crying out for visual analysis?

3. Agenda
• Visualizing Objects vs. Records
• Getting Your Data from MongoDB
• JSON 101
• Free & Open Source Visualization Libraries
– Google Maps JavaScript API
– D3.js
• Other Visualization Libraries You Should Know
• Questions?

4. Objects vs. Records
• Document oriented data stores support dynamic and
complex schemas vs. the simple, static structures in
RDBMs, e.g.:

5. Is There Really a Difference?
• Yes and No
• Yes
• Obviously, document oriented formats are different from
record oriented formats;
• Few common visualizations tools designed for
traditional record based formats support document
based formats
• No
• The basic visualizations are the same even if the data
format feeding them are different

6. Getting your Data from MongoDB
• mongoexport
Export data from MongoDB as JSON or CSV
> mongoexport --db dbname --collection collectionname
--out file.json!
• MongoDB’s Simple REST Interface
• Read only access to data
• Start your server with the --rest option
• Simple queries:
http://127.0.0.1:28017/databaseName/collectionName/!
• Other options:
• DrowsyDromedary, MongoDB Rest, etc.

7. JSON 101
• JSON (JavaScript Object Notation) documents
are built using two types of common data structures:
• Name/value pairs (objects) and;
{ “string” : value }!
• Ordered lists of values (arrays).
{ “string” : [value, value, value] }!
• JSON is a subset of the object literal notation
of JavaScript so:
var jsonObj = {"numbers" : [1, 2, 3] };!
var numberOne = jsonObj.numbers[0];!
var numberTwo = jsonObj.numbers[1];!
• Converting the string representation of JSON is as easy as:
var jsonObj = JSON.parse("{"numbers":[1,2,3]}");!

8. A Word About the Sample Code
• All of the code used in this presentation is available online
via GitHub at:
https://github.com/cvitter/ikanow.mongodc2013.presentation
"
• The project includes code from the following Open Source
Projects:
• Bootstrap: http://twitter.github.com/bootstrap/!
• JQuery: http://jquery.com/!
• D3.js: http://d3js.org/
!
• The data samples used are simple JSON files read in using
JQuery’a .ajax method

9. Google Maps JavaScript API
• Requirements:
• Get an API Key (its free*)
• Have an Internet Connection
• Build a simple example that:
1. Creates a place holder DIV for the map object
2. Loads the map script
3. Initializes the map
4. Draws markers on the map
* Up to 25,000 map loads per day for commercial applications.

10. Creating the Map
• Use a DIV to create a placeholder for the map:
<div id="map_canvas" style="height:450px; width:870px;"></div>!
• Load the map script:
function loadScript() {!
var script = document.createElement("script");!
script.type = "text/javascript";!
script.src = "http://maps.googleapis.com/maps/api/js?
!key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";!
document.body.appendChild(script);!
}!
• Initialize the map:
var mapOptions = {!
!zoom: 11,!
!center: new google.maps.LatLng( 38.8964, -77.0262 ),!
!mapTypeId: google.maps.MapTypeId.ROADMAP!
};!
map = new google.maps.Map(document.getElementById('map_canvas'), !
! !mapOptions);!

11. Drawing Markers on the Map
• Sample documents:
{...},!
{!
!search_field: "adams morgan",!
!country: "United States",!
!country_code: "US",!
!region: "District of Columbia",!
!latitude: "38.9213889",!
!longitude: "-77.0425000”}!
},!
{...},!
• Add markers to the map:
for (var i=0; i < locations.length; i++) {! ! ! !!
!var marker = new google.maps.Marker({!
! !map: map, !!
! !position: new google.maps.LatLng(!
! ! !locations[i].latitude , locations[i].longitude ),!
! !title: convertToTitleCase(locations[i].search_field)!
!});!
}!

12. The Finished Product

13. Creating Heat Maps
• Requires the Visualization Library:
script.src = "http://maps.googleapis.com/maps/api/js?
!key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&libraries=visualiza-on
&callback=initialize";!
• Create the Heat Map Data and Layer:
var heatMapData = new Array();!
for (var i=0; i < locations.length; i++) {!
var newRecord = {location: new
!google.maps.LatLng( locations[i].geoindex.lat ,
! !locations[i].geoindex.lon), weight: 1};!
heatMapData.push(newRecord);!
}!
! !!
var heatmap = new google.maps.visualization.HeatmapLayer({!
data: heatMapData,!
dissipating: true,!
radius: 10,!
map: map!
});!

14. The Finished Product

15. D3.js
• D3.js (d3js.org) is:
“a JavaScript library for manipulating documents based on
data”
• Convert data into visualizations in the following formats:
HTML, CSS, SVG
• Download the library or include it via:
<script src="http://d3js.org/d3.v3.min.js"></script>!

16. The (Very) Basics
• Select the DIV to write the SVG image to:
var chart = d3.select("#d3_canvas").append("svg")!
.attr("class", "chart")!
!.attr("width", chartWidth)!
!.attr("height", chartHeight);!
• Draw the bars (rectangles):
chart.selectAll("rect")!
.data(inputData)!
!.enter().append("rect")!
!.attr("y", function(d, i) {return i * (lineHeight + 3); })!
!.attr("width", function(d, i)
! !{ return chartWidth * (d.chance_of_rain * 0.01); })!
!.attr("height", function(d) return lineHeight; });!

17. Adding Rules
• Making things scale on the chart:
var x = d3.scale.linear()!
!.domain([0, 100])!
!.range([0, chartWidth]);!
• Drawing the rules:
chart.selectAll("line")!
.data(x.ticks(10))!
!.enter().append("line")!
!.attr("x1", x)!
!.attr("x2", x)!
!.attr("y1", 0)!
!.attr("y2", chartHeight)!
!.style("stroke", "#ccc");!

18. Adding Text
• Labeling the X and Y axes:
chart.selectAll(".rule")!
!.data(x.ticks(10))!
!.enter().append("text")!
!.attr("class", "rule")!
!.attr("x", x)!
!.attr("y", 0)!
!.attr("dy", -3)!
!.attr("text-anchor", "middle")!
!.text(String);!
!
chart.selectAll("text")!
!.data(inputData)!
!.enter().append("text")!
!.attr("x", 0)!
!.attr("y", function(d, i) {
! !return i * (lineHeight + 3) + (lineHeight / 2); })!
!.attr("dx", -3) // padding-right!
!.attr("dy", ".35em") // vertical-align: middle!
!.attr("text-anchor", "end") // text-align: right!
!.text(function(d) { return d.date; });!

19. The Finished Product

20. Treemaps, Bubble Charts, and More
• D3.js can accept an array of values, objects, or a function
that returns an array of values
• Some of the D3.js visualizations allow you to pass data in a
wide variety of formats, others expect a specific format
• The Treemap and Bubble Chart samples use a really
simple JSON tree structure representing multi-level parent
child relationships

21. Treemap

22. Treemaps Layout
• D3.js features different layout packs that help you build
complex charts including .treemap
• In this example the layout pack is creating a properly sized
div for each node in our JSON file as opposed to creating
an SVG image
var treemap = d3.layout.treemap()!
!.size([width, height])!
!.sticky(true)!
!.value(function(d) { return d.size; });!
!
var node = div.datum(data).selectAll(".node")!
!.data(treemap.nodes)!
!.enter().append("div")!
!.attr("class", "node")!
!.call(position)!
!.style("background", function(d) {
! !return d.children ? color(d.name) : null; })!
.text(function(d) { return d.children ? null : d.name; });!

23. Bubble Chart

24. Other D3js.org Examples

25. More Cool Visualization Libraries
• NVD3 (nvd3.org)
Re-usable charts and chart components for d3.js
• Raphael JS (raphaeljs.com)
JavaScript library designed to simplify working with vector graphics and
build data visualizations
• TimelineJS (timeline.verite.co)
“Beautifully crafted timelines that are easy, and intuitive to use.”

26. Reminder: Get the Example Code
• All of the sample code used in this presentation is available
online via GitHub at:
https://github.com/cvitter/
ikanow.mongodc2013.presentation

27. Thank You!
Craig
Vi4er
www.ikanow.com
developer.ikanow.com
cvi,er@ikanow.com
@IkanowDev
github.com/ikanow/Infinit.e