Articles in this section

See more

Quick Start Guide

 

Okay, let's get started!  This guide will show you how to create a working example of the Display API in just a few lines of code.

Calypso is StateBook's JavaScript visualization API.  It can be implemented by adding snippets of JavaScript code to a webpage.  The webpage can be a standard HTML page or it can be a content management system such as WordPress as long as you have permission to implement JavaScript.

For the fastest implementation of the API, complete the following steps:

  1. Include the necessary JavaScript and CSS headers in the <head> section of your HTML page.
  2. Create an empty <div> container where you want the API to place content.
  3. Add a short snippet of JavaScript code to your web page to call the API. 

Simple Example

This simple example is a working webpage that implements the API.  

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>StateBook Display API Example 1</title>
  <link href="https://api.statebook.com/api/v1/css/statebook.css" rel="stylesheet">
  <script src="https://api.statebook.com/api/v1/js/statebook.js"></script>
  <script src="https://api.statebook.com/api/v1/js/statebook-map.js"></script>
  <script src="https://api.statebook.com/api/v1/js/statebook-chart.js"></script>
  <script src="https://api.statebook.com/api/v1/js/statebook-table.js"></script>
  <script src="https://api.statebook.com/api/v1/js/statebook-export.js"></script>
 </head>
 <body>
  <div id="statebook-content"></div>
 </body>
</html>

<script>
  Statebook.displayData({
    authentication: 'demo',
    container: 'statebook-content',
    display: 'componentpack'
  });
</script>

(Try this in CodePen)

 

Looking at this example, there are three essential sections:

 

1. Include the JavaScript and CSS headers

The following JavaScript and CSS headers are required on any page that is using the API.  These are placed in the <head> section of the webpage.  For contact management systems such as WordPress, this is usually done in the Theme settings; however, themes vary greatly and you will need to consult your content management system administrator for more specific instructions.

<head>
 <link href="https://api.statebook.com/api/v1/css/statebook.css" rel="stylesheet">
 <script src="https://api.statebook.com/api/v1/js/statebook.js"></script>
 <script src="https://api.statebook.com/api/v1/js/statebook-map.js"></script>
 <script src="https://api.statebook.com/api/v1/js/statebook-chart.js"></script>
 <script src="https://api.statebook.com/api/v1/js/statebook-table.js"></script>
 <script src="https://api.statebook.com/api/v1/js/statebook-export.js"></script>
</head>

 

2. Create a <div> for the API content

The API content is placed in the <div> that you provide on the page.  The <div> should be given an ID of your choice which will be referenced in the JavaScript call.

Web developers will often apply styles to this <div> that govern height, width, and other settings.

  <body>
    <div id="statebook-content"></div>
  </body>

 

3. Add the JavaScript snippet

The following snippet of JavaScript calls the API and renders the interactive content.  This is the simplest call and uses three settings in the call:

  • authentication - This authentication token corresponds to your StateBook license.  In this example, the authentication token is "demo", which does not require a license and allows you to retrieve information about the Burlington-South Burlington Metro Area in Vermont.  Once you have purchased an API license, please contact StateBook for your authentication token.
  • container - The ID used in the <div> where you want StateBook content to appear.
  • display - The type of display to use, such as the 'componentpack' shown below.  A component pack is an automatic, interactive set of topics and views that provides a wealth of data, all controlled by pulldown menus and controls.
<script>
  Statebook.displayData({
    authentication: 'demo',
    container: 'statebook-content',
    display: 'componentpack'
  });
</script>

 

The result

Your webpage will have the following content.  The interactive pulldown controls at the topic will let the user select topics, views, and other settings which will be automatically reflected below.

 

Well, that was simple!

There are many ways to tailor the API to meet the individual needs for each webpage.  The rest of the documentation will go through those instructions.

 

Related articles

Comments

0 comments

Article is closed for comments.