10 Minute Quickstart with OmniSci’s Charting Libraries

When people think about OmniSci, lightning-fast queries on massive datasets usually comes to mind.  But beyond just doing calculations, the ability to visualize and crossfilter are what make OmniSci so fun! This post outlines the easiest way to harness our charting libraries to visualize your data in OmniSci using JavaScript.

We’ll walk you through the following steps:

• Creating an OmniSci Cloud Instance
• Cloning our Sample Project repository
• Connecting your project to your own Cloud instance
• Creating and customizing charts

Connecting to an OmniSci Database

For the purpose of this tutorial, the “starter kit” is configured to connect to an OmniSci Cloud instance (though any OmniSci database will work with a little more customization).  If you don’t have an OmniSci Cloud account, you can sign up for a free trial here.  

Generating API Keys for OmniSci Cloud

In order to access your OmniSci Cloud Instance using MapD Connector, you’ll need the API information from your account. OmniSci Cloud Super Admins, Admins and Developers can each create a single read key and a single write key. You can select the DEVELOPER menu from SETTINGS which is at the upper right-hand corner of the Immerse user interface. Write down your API Key Name and API Key Secret. These will be used later in MapD Connector to access your database.

Example Datasets on OmniSci Cloud

All Cloud instances come with several preloaded data tables:

• nyc_trees_2015_683k
• flights_2008_7M
• Taxi_weather_tracts_factual

 For this charting example, we’re using the  nyc_trees_2015_683k table. This dataset has 683,000 rows of data from the 2015 NYC Tree Census.  

Cloning the Starter Project Repository

The final step is to clone or download the GitHub repo. This project contains everything you’ll need to run the charting example for the trees data set. Open the project in your favorite IDE and let’s get started.

What’s in the Starter Kit?

The index.html file is where you connect your Cloud instance, but the main.js file is the heart of the project. The main OmniSci charting libraries are MapDC Charting, MapD Connector, and MapD Crossfilter. These have all been conveniently pre-bundled for this project inside the main.js file. 

Using MapD Connector to Connect to Your Cloud Instance

Before creating any charts, we need to connect our Cloud instance.  We’ll use the MapD Connector to do this. In the init function in index.html, most of the information is already applied for making the connection. The only thing you need to change is adding your API Key Name as the “user” and API Key Secret as the “password” from the first step. All API access goes through the same host, use2-api.mapd.cloud, which then automatically forwards the request to the correct Cloud instance based on the key name. The default database name is mapd and you will connect using HTTPS port 443.

<script src="https://gist.github.com/seanryankeegan/99d94e2d9194618f825fa1781dbfb4e6.js"></script>

Open in a Browser… Voilà!

At this point, if you were to open the project in a browser, you should see a bar chart and a pie chart! Due to the functionality of the OmniSci Charting Libraries, these charts will seamlessly cross filter. By clicking a specific tree type on the bar chart, the pie chart will instantly change to reflect only those trees.

Next Steps: Create a Custom Visualization

Feel free to look at the createCharts function in index.html for a step-by-step guide on how these charts were created. For an even deeper dive into customization options, take a look at Stephany Lopez’s video walkthrough of this project. For further information on creating charts and chart types, the MapD Charting documentation is a great resource.

<iframe width="560" height="315" src="https://www.youtube.com/embed/2RpdoltQdYw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>