I'd like to introduce PictoChart, the newest addition to the JET data visualization components. A PictoChart uses discrete icons to visualize an absolute number or relative sizes. It is extensively used in infographics as a more interesting and effective way to present numerical information than traditional tables and lists. The JET PictoChart comes complete with various interactivity features, such as highlighting, filtering, selection, and animations, which makes it easy for app developers to create a visually compelling dashboard. To get started, I'm going to describe some of the most common usages of a PictoChart, and how to achieve them.

 

1. Visualizing absolute numbers

 

PictoChart can be used to visualize absolute numbers using discrete icons. It can help applications display numbers in a more prominent and exciting way. In the example below, PictoCharts are used to visualize the average fertility rates in three different countries.

Screen Shot 2016-02-26 at 3.40.18 PM.png

Creating a PictoChart is easy. For each item, you just need to specify the name, count, shape, and color. The name is used for the tooltip and the accessibility string.

 

<!-- HTML Snippet. Do not forget to require the 'ojs/ojpictochart' component in your main.js. -->
<!-- Only the first PictoChart above is shown. -->
<div data-bind="ojComponent: {
  component: 'ojPictoChart',
  items: [
    {name: 'Niger', count: 7.6, shape: 'human', color: '#ED6647'}
  ],
  columnCount: 5
}">
</div>










 

 

2. Showing a part of a population

 

PictoChart can visualize the percentage or the ratio of a population that shares a certain feature. This tends to be more effective when the ratio is expressed using small integers, such as "1 out of 3" or "6 out of 10".

Screen Shot 2016-02-26 at 2.11.55 PM.png

In the code, the PictoChart item representing the population that does not share the feature can be defined without the color attribute. This item will be rendered grey by default to serve as a background.

 

<div data-bind="ojComponent:{
  component: 'ojPictoChart',
  items: [
    {shape: 'human', count: 7, color:'#ED6647'},
    {shape: 'human', count: 3}
  ],
  animationOnDisplay: 'auto',
  columnCount: 5
}">
</div>










 

 

3. Displaying population distribution

 

PictoChart can also visualize population distribution. In this respect, PictoChart serves as a more exciting alternative to pie chart, which is more traditional for this kind of dataset. PictoChart tends to be more effective for this use case when the number of icons is small (a couple hundred at most); otherwise, the visualization may become unreadable. In the example below, the PictoChart displays the preferred mode for personal travel in England in the year of 2013.

Screen Shot 2016-02-29 at 2.43.21 PM.png

The example above uses custom SVGs to define the icon shapes. It can be achieved by passing the desired SVG path as a string to the item shape attribute. The custom SVG feature is currently only available for PictoChart and Legend, but we're looking to bring it across all data visualization components.

 

The two further use cases below are more advanced and less common, but they are also effective usages of PictoChart.

 

4. Comparing a collection of metrics

 

Multiple PictoCharts can be arranged in table to display comparisons of metrics. This can also be achieved with status meter gauges, but PictoCharts can be a more visually interesting alternative. In the example below, the PictoCharts visualize Apple product sales in the years of 2011 and 2012. Each square represents 10 million units.

Screen Shot 2016-02-26 at 2.50.54 PM.png

 

5. Presenting a collection of singletons

 

PictoChart can also be display a collection of singletons. In the example below, we display USA Winter Olympics medal count in 2014, and each circle represents a medal (gold, silver, or bronze). Each circle is a PictoChart item with the count of 1, and this allows each circle to carry different information. For example, if someone hovers over a medal, the tooltip will show the name of the athlete who won the medal.

Screen Shot 2016-02-26 at 2.53.08 PM.png

 

Associating PictoChart with other components

 

One big benefit of using PictoChart within the JET framework is that it's easy to make it interact with the other JET data visualization components. In the example below, we use the Legend component to simultaneously filter the data of the PictoChart, Treemap, Bar Chart, and Bubble Chart.

picto_assoc_filter.gif

All that we need to do to achieve this is to pass the same hiddenCategories observable array to all of the associated components.


In the HTML:

<!-- Legend -->
<div data-bind="ojComponent: {
    component: 'ojLegend',
    sections: legendSections,
    hideAndShowBehavior: 'on',
    hiddenCategories: hiddenCategoriesArray,
    ...
}">
</div>


<!-- PictoChart -->
<div data-bind="ojComponent: {
    component: 'ojPictoChart',
    items: pictoChartItems,
    hiddenCategories: hiddenCategoriesArray,
    ...
}">
</div>


<!-- similarly for the remaining components -->










 

In the JavaScript:

var hiddenCategoriesArray = ko.observableArray();












Similarly, we can also achieve associated highlighting and selection by using the highlightedCategories and selection observable arrays respectively. For more information on associated views, please refer to this post.