Visualizing MongoDB Objects in Concept and Practice

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

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

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?

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

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

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.

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]}");!

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

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.

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);!

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)!!});! }!

The Finished Product

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! });!

The Finished Product

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>!

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; });!

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");!

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; });!

The Finished Product

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

Treemap

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; });!

Bubble Chart

Other D3js.org Examples

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.

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

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