Create an interactive pictogram chart with d3.js

A pictogram chart is a great alternative to show percentages other than using a standard pie or bar chart. In this tutorial I explain how to create a pictogram chart with d3.js. You can customize the colors and icons yourself. For the icons I will use Font Awesome which contains 675 icons.

When I was creating this graph, I couldn’t find the right word for it. After searching on Google for a while I saw the name for it was a pictogram chart. Whatever the right name is, I like to present data this way every now and then. The chart contains hundred icons, each representing 1%. I recommend to use one icon and multiple colors or multiple icons and one color. If you use different icons and colors together, chances are it will confuse people.

If you follow this tutorial, your end results will look like this:


Restaurant ratings in New York City

When you hover over the stars…

I have used this interactive pictogram chart in this infographic for TripAdvisor restaurants in New York City. Visitors are able to rate restaurants, which can be a score between 1 and 5. In this chart I show how many restaurants have an average rating of 5, 4, 3, 2 or 1.

Click here to learn how to scrape data from TripAdvisor.

 

Content

  1. Source file set-up
  2. Pictogram chart
  3. Create a legend
  4. Make the chart interactive
  5. Full code

 

Source file set-up

Like any other d3.js visual, I start with a blank text file and save it as an html file. Within the <head></head> tags I load a CSS file to include Font Awesome.

Within the body of the document I create an <svg></svg> area and a paragraph. Within the SVG I will create the pictogram chart, the paragraph will include text which changes when there is a mouseover event.

Finally I load two JavaScripts, one to use the d3.js library and the second one to use jQuery. I will write all the d3.js code between the empty <script></script> tags which I will explain in the next steps.

 

Pictogram chart

For the pictogram chart, I want a matrix of 10×10 where each cell contains one icon and is colored according to the share of the total data set. Since each data set is different and has it’s own specific logic, I am not going to cover how you will get to the data format used in this example. With some basic JavaScript skills, you can create the data format below and use it for the d3.js chart.

First, I set variables for the icon I want to use (we need to use the unicode which can be found on the website of Font Awesome), the font size, the space between the icons, the colors I would like to use, the text I want to show when there is a mouseover and of course the data itself. For this example I will show one text per rating, but of course you can have a different text for each pictogram in the chart. The data contains hundred arrays, each array contains three objects. The first object is the name of the item (in this example it is a rating value between 1 and 5), the second object is the unicode for the icon and the third object is the text to be displayed when a mouseover event happens.

When all variables are there, I am going to plot hundred icons, one for each array stored in the variable  data. I create a row counter which is needed to create ten rows. Next, I want to create group elements for each icon and append a text to it. The text contains the icon, but don’t forget to specify the font-family which should be FontAwesome. I’m inserting a space character before the icon, later on this will prevent the text from disappearing when the cursor is in the middle of two icons.

 

Create a legend

For the legend I determine at what position the legend should be placed, the space between two items within the legend and the title of the legend. The information to be displayed in the legend is stored in the variable  dataIcons.

I append a new group element, position it based on the variables just declared and add a text element with the title. With d3.js you can easily loop through elements in an array and perform an action per element. So I create a group element for each item in  dataIcons and position the elements underneath each other. For each of the group elements I add the icon, color it and at the right label to it.

 

Make the chart interactive

Of course, I could have made the pictogram chart easily in PowerPoint or other software, but the advantage of d3.js is that you can make it interactive as well. For this example, I want to hover over the icons and give the reader more information.

Adding interactivity to the chart can be done by adding two simple pieces of code. First, I create a function called  updateText() which changes the text in a predefined HTML class. Second, I add one line of code to the existing code. When the icons are added to the group elements, I tell d3.js to update the text when there is a mouseover per icon.

 

Full code

 

World full of data author

Who I am


Hi! My name is Claudia, a freelance data analyst/scientist. This is my space on the internet where I share knowledge and experience with everyone who wants to become a better analyst. Read more about my work as a freelancer here.

Share this post on

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.