Pictogram – an overview
What is it for?
Isotype charts use pictograms – simplified pictures of people or things – designed to function as repeatable units. Isotype and pictogram charts are often more engaging and playful than the traditional bar and column charts (but perhaps not as precise).
You can specify the orientation of the bars (whether bottom to top, left to right, top to bottom or right to left), and add filler icons with this template. It's also possible to use your own custom icons and set the value of each icon.
In this article
How to get started
There are two data sheets: Data and Icons. (The Icons sheet is optional.)
The Data sheet has 5 bindings:
| Binding name | Type | Description |
|---|---|---|
| Main category | Categorical | (Optional) A bar is created for each main category. If left blank, the icons will appear in a single block compiling all the data. |
| Sub category | Categorical | (Optional) A layer (or stack) within each bar is created for each sub category. If Sub category is active, each bar will be stacked according to the categories in the chosen column. If Sub category is left blank, the bars will not be stacked. |
| Value | Numeric | Determines the size of each bar. If the Sub category binding is active, this column determines the size of each layer within each bar. |
| Icon id | Categorical | (Optional) This binding lets you associate icons with particular categories, so a chart can hold multiple icons. This template also allows you to input and use custom icons. |
| Color | Categorical | (Optional) This binding specifies which column is used to color the icons. |
By default the template will automatically calculate the value each icon represents so that each bar contains a sensible number of icons (typically around 100 per bar). However, the icon value can be overridden should you prefer more or fewer icons.
The Icons sheet lets you associate icons with particular categories. It has 4 bindings:
| Binding name | Type | Description |
|---|---|---|
| Icon id | Unique | Specifies a column containing unique IDs. The names in the Icon id binding of the Data sheet should match these IDs. |
| Icon | Text | Either a string containing the name of a built-in icon (e.g. "cat", "dog") or an SVG path string provided by the user (e.g. "M10, 10 l90,0 l0,90 l-90,0 z"). |
| Icon width | Number | (Optional) If an SVG path string has been specified, this column contains the width (in pixels) of the icon. |
| Icon height | Number | (Optional) If an SVG path string has been specified, this column contains the height (in pixels) of the icon. |
You can learn how to add your own custom icons to your Pictogram chart here.
Settings
The main settings of this chart are:
| Settings section | Setting | |
|---|---|---|
| Chart settings | Bar orientation. Sets whether the bars are vertical or horizontal |
|
| Flip bars | Flips the bar direction. For example, if bar orientation is Vertical and Flip bars is true, the bars will point downwards. | |
| Icons | Icons. Sets whether the Icon binding (if set) determines the icon shapes. Otherwise, this setting determines the shape of all the icons. |
|
| Auto icon value | If true, the template will compute a sensible value for each icon. | |
| Icon value | If Auto icon value is false, this setting determines the value of each icon. | |
| Use filler icons | If true, extra "filler" icons will be added to the end of each bar so that all bars are the same length. This is particularly useful when showing parts of a whole. Learn more about filler icons in our help doc. | |
| Maximum bar value | (Optional) If Use filler icons is true, this sets the maximum value of all bars. Filler icons are used to fill space between the actual maximum and the chosen maximum. |