WhenHub

Welcome to the WhenHub Developer Platform

Here, you'll find comprehensive guides and documentation to help you start working with WhenHub as quickly as possible, as well as support if you get stuck. Let's jump right in!

If you are new to WhenHub, please take a moment to learn more.

Build VisualizationsVisualizations

Create interesting interactive visualizations for Whencasts.

Get Started

Use the WhenHub APIWhenHub API

Programmatically interact with the WhenHub platform.

Get Started
WhenHub Developer Platform

Developing Visualizations

The WhenHub Composer allows you to easily get started with creating new visualizations. Following these simple steps will get you up and running quickly!

Composer Requirements

Step 1. Connect Composer to GitHub & Setup Repository

Navigate to the Composer website and connect your GitHub account to WhenHub Composer, by logging in to GitHub using the provided link in the header. A GitHub account is required to use the Composer. If you do not have a GitHub account, you can create a free account.

Connect Composer to GitHub

Connect Composer to GitHub

Once you have connected to GitHub, you will need to setup the mycomposer repository with a sample visualization and Node.js-based web server in your GitHub account. To do this Click the Setup mycomposer Repository button.

Setup Repository

Setup Repository

Step 2. Clone & Launch Repository

Clone your newly created mycomposer repository to your desktop or preferred location on your local machine for development.

Clone & Launch Repository

Clone & Launch Repository

Step 3. Run Whencaster

With the web server up and running, let's test if it's serving up the sample visualization correctly. Launch Whencaster in a new browser tab, then do the following:

  • Select Schedules > Featured > Best Picture Winners
  • Select Visualizations > My > Simple List
    You will see the Whencast Player with the selected Schedule and Visualization. To get familiar with Whencaster, try choosing different combinations of Schedules and Visualizations.

With your dev environment setup and the sample visualization viewable in Whencaster, it's time to crack open the cloned "mycomposer" folder in your favorite code editor. Open visualizations > [github username] > list > 1.0.0 > simple > view.html in the editor and change the <h2> tag to <h1>. Switch to Whencaster and select Visualizations > My > Simple List. You should see larger titles, confirming that your change worked.

Compose Visualization

Compose Visualization

Restarting the Whencaster

To return to working on your visualization, the small node server that was installed during setup will need to be restarted. To restart the server, navigate to the location of the local repository and open command prompt. (Shift + right-click -> select Open Command Window here). Type ‘npm start’. Go to Whencaster page on Composer website.

Select a schedule from “Featured Schedules”, or, if you already have some schedules associated with your account, chose a schedule from “My Schedules”. Then select the List visualization from “My” visualizations.

To refresh the composer at any time to see your changes, you can click the refresh icon locatoin on the top right.

Refresh Whencaster Icon

Refresh Whencaster Icon

Step 4. Publish Changes

Users can choose from a gallery of visualizations for their Whencasts in WhenHub Studio. Currently, we do not support third-party visualizations within the gallery. However, this capability will be available in the near future. Until then, you can publish your visualization on a standalone page for sharing on the web.

To publish your visualization, see the "Publish Options" panel in Whencaster.

Publish Visualization

Publish Visualization


What's Next

Understanding Visualizations

Architecture