D3 JavaScript library : Làm Drupal for data visualization

One of the exciting features that’s on its way in Drupal 8 is the ability to use Drupal as a RESTful web service. This means that Drupal 8 core allows you to expose data to external applications in a number of standardized formats, and have those applications send data back to Drupal, for example to create, update, or delete content.

Joe Fender of Lullabot recently wrote a great introduction to RESTful web services in Drupal 8 on Drupalize.me. If you haven’t read his article yet, it's a good place to start.

The fact that you can easily make data on your Drupal site available to other applications opens up an enormous array of possibilities. For example, a mobile app could read data from your site, and allow users to publish articles, and upload photos or video to your site. Or you could use data in geo location fields in Drupal to populate a standalone web map (ie. a map that’s not a Drupal Views plugin). Loads of possibilities, lots of flexibility.

One use of Drupal 8’s web services features that I wanted to give a try, is data visualization. In this scenario, Drupal could be used to collect and clean up data, and then make that data available to a data visualization library like D3.

To try this out, I created:

• A content type called ‘DrupalCon’, with two fields: DrupalCon city and the number of attendees.
• A view that exposes the data collected in DrupalCon nodes as JSON data (D3 really likes JSON).
• A bar chart in D3, that uses that JSON data.

Step 1: Creating a content type to collect the data

Creating a content type in Drupal 8 is really similar to creating a content type in Drupal 7, so I’m not going into detail here (if you have questions, don’t hesitate to post a comment). On a newly installed Drupal 8 site, go to ‘Structure’ > ‘Types’ (/admin/structure/types), click ‘Add content type’ and fill out the form. I used ‘drupalcon’ as the machine name for my content type.

Once you've added the content type, it’s time to add some fields. Make sure you add a text field for the DrupalCon city (machine name: field_drupalcon_city), and a number (integer) field for the number of attendees (machine name: field_drupalcon_attendees).

Step 2: Create some nodes

Before going further, add a few nodes, so there's some data to work with. You can find the list of past DrupalCons with their number of attendees at https://association.drupal.org/drupalcon/drupalcon-locations if you want to replicate this example.

Step 3: Create a view to expose the data

Now we’re getting to the interesting part, which is building a view to make the data available as JSON. Before doing that, you have to enable a few modules that provide the RESTful web services in Drupal 8. Go to ‘Extend’ (/admin/modules), and scroll down until you see ‘Web services’ (or use the new and very fast search field at the top of the modules page). Enable two modules: the ‘RESTful Web Services’ module, and the ‘Serialization’ module. Using these two modules, we can build our JSON view.

Go to ‘Structure’ > ‘Views’ (‘/admin/structure/views’), and create a view that shows content of the type ‘DrupalCon’ (or whatever you called your content type in step 1). Don’t check or configure anything else for now, just click ‘Save and edit’ at the bottom.

Next, add a ‘REST export’ display by clicking ‘Add’ and selecting ‘REST export’. Under ‘Path settings’, give your display a path (eg. drupalcon-attendees/json).

Once your display has a path, open up the display’s formatter settings (under ‘Format’) and select ‘json’. This will convert the Drupal node data into JSON data that D3 can work with. Once you’ve done that, make sure the view shows fields instead of full entities (under ‘Format’, click ‘Entity’, then select ‘Fields’; no further configuration is required at this point). Then, under ‘Fields’, add the ‘Number of attendees’ field and the ‘City’ field. Save the view.

At this point, you should be able to go to /drupalcon-attendees/json (or to whatever path you gave your view), and see the nodes you added as JSON data! To get a better view of the JSON data, you can use a browser plugin (eg. ‘RESTClient’ for Firefox, or ‘Dev HTTP Client’ for Chrome).

Step 4: Using the JSON is a data visualization

Your data is now ready to be used in a data visualization. For this example, I went with a bar chart as explained in D3-creator Mike Bostock’s article ‘Let’s make a bar chart’ (which is a really good intro to D3, I highly recommend it).

To make this work, set up a different virtual host to serve the file(s) that handle the data visualization. If you serve your data visualization from a different domain than your Drupal 8 site, you also need to give that domain access to the JSON URL, by enabling ‘Cross-Origin Resource Sharing’ or CORS. This is done by adding ‘Header set Access-Control-Allow-Origin "[your_full_d8_site_url]" to the .htaccess file of your Drupal 8 site (the site that has the JSON view).

You can find the full code for my data visualization example on GitHub. When using this code, you’ll want to make sure some variables and property names are set to whatever you used in your view. Edit the variable ‘jsonUrl’ (the path of your JSON view), and change the property names ‘field_drupalcon_attendees’ (the name of your attendees field) and ‘field_drupalcon_city’ (the name of your city field) to match your configuration.

Once you have everything configured and working correctly, you should see something that looks like the image below. The data from the attendees field is used to draw the bars, and the city field values are used in the x-axis, to indicate the different data values.

This is a simple D3 example. Have a look at https://github.com/mbostock/d3/wiki/Gallery to get an idea of what D3 is capable of (and what you could use Drupal’s data for).

I hope this has given you a small taste of what is possible with the RESTful web services in Drupal 8. Don’t hesitate to post a comment if you have questions or feedback.