grasshopper

A WordPress.com REST API + D3.js example

This is a simple demo app that uses the WordPress.com REST API to graph a site's recent views using D3.js / C3.js.

See it in action here!

Authentication

The app uses implicit oAuth to retrieve a token via the oAuth flow without having to store a secret.

This token is returned in the URL when the oAuth flow redirects back to our app. Since we've requested scope for a single site, the Site ID is also returned as a URL parameter.

Loading Data

Using the d3.json() function, we can use the token to make an authenticated request to the /stats endpoint of the REST API.

The token is passed in an Authorization header:

.header( 'Authorization', 'BEARER ' + decodeURIComponent( token ) )

Graphing The Data

Once the API call returns, we simply pass the returned data to c3.generate() to plot it on a graph.