Creating Custom Visualizations and Applications Using OmniSci Workshop

Attendees will learn how to create their own custom visualizations and applications using mapd-connector and other related JavaScript libraries. Topics such as using OmniSci Render for large scale geospatial charting, cross filtering charts and optimizing queries to provide a fluid-looking data-intensive application will all be discussed.

Transcript

1. Immerse Exploration & Custom App Development with OmniSci Converge 2019, Mountain View Sean Keegan, Caitlin Wolters, & Matt Torok, OmniSci | October 21st, 2019
2. Caitlin Wolters Frontend Engineer Matt Torok Full Stack Engineer Sean Keegan Developer Advocate OmniSci Community sean.keegan@omnisci.com
3. 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
4. OmniSci: Introduction
5. Data Grows Faster Than CPU Processing Data Growth 40% per year CPU Processing Power 20% per year
6. GPU Processing Keeps Moore’s Law Alive
7. 7 Core Density Makes a Huge Difference
8. 8 Advanced Memory Management
9. The Fastest Software Designed for the Fastest Hardware HARNESS GPUs
10. 10 OmniSci Innovations Powering Extreme Analytics 3-Tier Memory Caching Query Compilation In-Situ Rendering
11. 11 * open source for single node github.com/omnisci/mapd-core
12. Three Ways to Get Started GitHub repo OPEN SOURCE OmniSci as a service OMNISCI CLOUD Contact sales ENTERPRISE
13. OmniSci: Immerse Introduction
14. What is Immerse?
15. Technical Stuff
16. Standard Charts
17. Geospatial Charts
18. Geospatial Data Types
19. Points
20. Polygons
21. Linestrings
22. Tools
23. Dashboards
24. Lists of Dashboards
25. Data Manager
26. SQL Editor
27. Chart Editor
28. Cool Stuff
29. Crossfiltering
30. Geospatial Filters
31. Density Gradients
32. How do we do it?
33. Lots and lots of queries
34. 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
35. 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
36. Take a Break! (Or keep making that dashboard beautiful)
37. Building Custom Applications • Use OmniSci’s charting libraries ◦ mapd-connector ◦ mapd-charting ◦ mapd-crossfilter
38. Tweetmap is a perfect example Link to live version of Tweetmap
39. 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
40. 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
41. 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
42. 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.
43. 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
44. 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); }); }); }
45. • 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
46. • mapd-charting examples • Charting libraries starter kit blog post Helpful Resources
48. thank you