Immerse Exploration & Custom App Development with OmniSci
Converge 2019, Mountain View
Sean Keegan, Caitlin Wolters, & Matt Torok, OmniSci | October 21st, 2019
Slide 2
Slide 2 text
Caitlin Wolters
Frontend Engineer
Matt Torok
Full Stack Engineer
Sean Keegan
Developer Advocate
OmniSci Community
[email protected]
Slide 3
Slide 3 text
Agenda
● Introduction to OmniSci
● Immerse Visualization Platform
● Geospatial Features in OmniSci
● Lab: Immerse Exploration
● OmniSci Charting Libraries
● Lab: Building web applications using OmniSci charting
libraries
Slide 4
Slide 4 text
OmniSci: Introduction
Slide 5
Slide 5 text
Data Grows Faster Than CPU Processing
Data Growth
40% per year
CPU Processing Power
20% per year
Slide 6
Slide 6 text
GPU Processing Keeps Moore’s Law Alive
Slide 7
Slide 7 text
7
Core Density Makes a Huge Difference
Slide 8
Slide 8 text
8
Advanced Memory Management
Slide 9
Slide 9 text
The Fastest Software
Designed for the Fastest Hardware
HARNESS GPUs
11
* open source for single node
github.com/omnisci/mapd-core
Slide 12
Slide 12 text
Three Ways to Get Started
GitHub
repo
OPEN SOURCE
OmniSci as
a service
OMNISCI CLOUD
Contact
sales
ENTERPRISE
Slide 13
Slide 13 text
OmniSci: Immerse Introduction
Slide 14
Slide 14 text
What is Immerse?
Slide 15
Slide 15 text
Technical Stuff
Slide 16
Slide 16 text
Standard Charts
Slide 17
Slide 17 text
Geospatial Charts
Slide 18
Slide 18 text
Geospatial Data Types
Slide 19
Slide 19 text
Points
Slide 20
Slide 20 text
Polygons
Slide 21
Slide 21 text
Linestrings
Slide 22
Slide 22 text
Tools
Slide 23
Slide 23 text
Dashboards
Slide 24
Slide 24 text
Lists of Dashboards
Slide 25
Slide 25 text
Data Manager
Slide 26
Slide 26 text
SQL Editor
Slide 27
Slide 27 text
Chart Editor
Slide 28
Slide 28 text
Cool Stuff
Slide 29
Slide 29 text
Crossfiltering
Slide 30
Slide 30 text
Geospatial Filters
Slide 31
Slide 31 text
Density Gradients
Slide 32
Slide 32 text
How do we do it?
Slide 33
Slide 33 text
Lots and lots of queries
Slide 34
Slide 34 text
Let’s dive into Immerse!
● Create a Cloud account by going to this link: https://bit.ly/2MY7iTq
● Create a new dashboard using Tutela dataset.
○ Add charts that answer the following questions
■ Which city is better for Sprint customers: Chicago or Seattle?
■ How many records are there for Verizon in 2019?
■ Questions from the Data Challenge!
● Feel free to play with other preloaded datasets or import a different dataset
from our Data Library
Slide 35
Slide 35 text
Helpful Resources
● Immerse documentation
● OmniSci Demos
○ All of the demos (except Tweetmap) are regular Immerse dashboards
● Immerse Chart Types
● Measures vs Dimensions
○ Measure - values or aggregated data
○ Dimension - categorizes measures
Slide 36
Slide 36 text
Take a Break!
(Or keep making that dashboard beautiful)
Slide 37
Slide 37 text
Building Custom Applications
● Use OmniSci’s charting libraries
○ mapd-connector
○ mapd-charting
○ mapd-crossfilter
Slide 38
Slide 38 text
Tweetmap is a perfect example
Link to live version of Tweetmap
Slide 39
Slide 39 text
mapd-connector
● JavaScript Library for connecting to OmniSci Core database
● Can execute queries, manage the database, and perform all other DB
operations
● Communicates over Apache Thrift, the same protocol internal OmniSci
apps use
● The start of every custom OmniSci app
GitHub repo | Documentation | Example
Slide 40
Slide 40 text
mapd-charting
● Charting built to work natively with OmniSci Core DB and crossfilter
● Based on open-source DC.js library (but diverged since forking)
● Uses D3.js for creating browser-based charts
● Leverages OmiSci Core Rendering to display raster charts
GitHub repo | Documentation | Example
Slide 41
Slide 41 text
mapd-crossfilter
● JavaScript library for connecting multiple charts for interactively “cross” filtering
● Allows you to select data on one chart, and filter the data displayed on other
charts
● Forked from existing open-source crossfilter library
GitHub repository
Slide 42
Slide 42 text
Testing mapd-charting with your Cloud instance
To test the charting API with your OmniSci cloud instance, you will need to set the user and password variables by
creating the write API key under the Developer tab in the Cloud Settings interface as shown in the caption below.
Slide 43
Slide 43 text
Starter kit
● Go to https://bit.ly/32xGCQ8 and clone the starter kit repository.
● What’s inside:
○ HTML/CSS Skeleton
○ All of the charting libraries pre-bundled into one file: main.js
■ mapd-charting, mapd-crossfilter, and mapd-connector
○ Starter code for creating some basic charts
Slide 44
Slide 44 text
function init() {
// This is where everything comes together.
// 1. Initialize a new connection with Mapd-connector to our OmniSci cloud database
// 2. Then hook up crossfilter with our data
// 3. Then render our charts.
new MapdCon()
.protocol("https")
.host("use2-api.mapd.cloud")
.port("443")
.dbName("mapd")
.user("API Key Name from cloud instance SETTINGS")
.password("API Key Secret from cloud instance SETTINGS")
.connect(function(error, con) {
crossfilter.crossfilter(con, "tutela_converge").then(cf => {
createCharts(cf, con);
});
});
}
Slide 45
Slide 45 text
● Make a third chart using the pre-connected Tutela data set
● Use mapd-connector to find all the tables available
● Create 2+ charts using a different table
Challenges
Slide 46
Slide 46 text
● mapd-charting examples
● Charting libraries starter kit blog post
Helpful Resources