Mongo db washington dc 2014
3 likes1,885 views
This document discusses various techniques for visualizing MongoDB data, including: 1) Exporting MongoDB data to JSON format for visualization libraries. 2) Introducing JSON and how it represents data structures. 3) Demonstrating basic visualizations using Google Maps JavaScript API and D3.js to plot locations and bars. 4) More advanced visualizations with D3.js like heat maps, treemaps and bubble charts.
![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]}");!](https://image.slidesharecdn.com/mongodbwashingtondc2014-130319201557-phpapp01/85/Mongo-db-washington-dc-2014-7-320.jpg)
![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)!
!});!
}!](https://image.slidesharecdn.com/mongodbwashingtondc2014-130319201557-phpapp01/85/Mongo-db-washington-dc-2014-11-320.jpg)
![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!
});!](https://image.slidesharecdn.com/mongodbwashingtondc2014-130319201557-phpapp01/85/Mongo-db-washington-dc-2014-13-320.jpg)
![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");!](https://image.slidesharecdn.com/mongodbwashingtondc2014-130319201557-phpapp01/85/Mongo-db-washington-dc-2014-17-320.jpg)
![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; });!](https://image.slidesharecdn.com/mongodbwashingtondc2014-130319201557-phpapp01/85/Mongo-db-washington-dc-2014-22-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Mongo db washington dc 2014 (20)
Ad
More from ikanow (13)
Ad
Mongo db washington dc 2014
- 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)! !});! }!
- 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! });!
- 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; });!
- 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
- 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,[email protected] @IkanowDev github.com/ikanow/Infinit.e