D3 JavaScript library : Làm Drupal for data visualization

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.

D8 to D3: Using Drupal for data visualization

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.

Tags: 
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 

Công cụ từ chối Backlink: Google’s Disavow Tool

Giới thiệu Ngày 16/10 chuyên gia nghiên cứu thuật toán, Matt Cutts đã thông báo về việc Google thêm một công cụ mới vào Google Webmaster Tools: Google’s Disavow Tool tạm dịch là “công cụ từ chối backlink”. Ai nên sử dụng tool này?

Vietnamnet mất ¾ số độc giả vì hacker tấn công

Vietnamnet mất ¾ số độc giả vì hacker tấn công

Năm 2011, Vietnamnet mất hai tháng bị tấn công từ chối dịch vụ DDOS. Tờ báo điện tử này đã điêu đứng vì tội phạm công nghệ cao tới mức,

 Apple trở thành hãng máy tính lớn nhất hành tinh

Apple trở thành hãng máy tính lớn nhất hành tinh

Hãng công nghệ Apple đã qua mặt đối thủ HP, trở thành nhà sản xuất máy tính cá nhân lớn nhất thế giới trong quý 4/2011, hãng nghiên cứu Canalys vừa đưa ra đánh giá.

Công ty diệt chuột T&C

 

Diet con trung