---
title: Visual Vocabulary
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
license: apache-2.0
short_description: Vizro - Visual vocabulary
---

# Vizro - Visual vocabulary

This dashboard shows a gallery of charts. It includes guidance on when to use each chart type and sample Python code
to create them using [Plotly](https://plotly.com/python/) and [Vizro](https://github.com/mckinsey/vizro).

**Created by:**

- [Huong Li Nguyen](https://github.com/huong-li-nguyen) and [Antony Milne](https://github.com/antonymilne)

- Images created by QuantumBlack

**Inspired by:**

- [The FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum,
  Martin Stabe.

- [The Graphic Continuum](https://www.informationisbeautifulawards.com/showcase/611-the-graphic-continuum): Jon Swabish and Severino Ribecca

**Credits, tutorials and resources:**

- [Plotly](https://plotly.com/python/plotly-express/)
- [Guide to data chart mastery](https://www.atlassian.com/data/charts)

## Chart types

The dashboard is still in development. Below is an overview of the chart types for which a completed page is available.

| Chart Type            | Status | Category                 |
| --------------------- | ------ | ------------------------ |
| Arc                   | ❌     | Part-to-whole            |
| Area                  | ✅     | Time                     |
| Bar                   | ✅     | Magnitude                |
| Barcode               | ❌     | Distribution             |
| Beeswarm              | ❌     | Distribution             |
| Boxplot               | ✅     | Distribution             |
| Bubble                | ✅     | Correlation              |
| Bubble map            | ✅     | Spatial                  |
| Bubble timeline       | ❌     | Time                     |
| Bullet                | ❌     | Magnitude                |
| Bump                  | ❌     | Ranking                  |
| Butterfly             | ✅     | Deviation, Distribution  |
| Chord                 | ❌     | Flow                     |
| Choropleth            | ✅     | Spatial                  |
| Column                | ✅     | Magnitude, Time          |
| Column and line       | ✅     | Correlation, Time        |
| Connected scatter     | ✅     | Correlation, Time        |
| Cumulative curve      | ❌     | Distribution             |
| Diverging bar         | ❌     | Deviation                |
| Diverging stacked bar | ❌     | Deviation                |
| Donut                 | ✅     | Part-to-whole            |
| Dot map               | ✅     | Spatial                  |
| Dot plot              | ❌     | Distribution             |
| Fan                   | ❌     | Time                     |
| Flow map              | ❌     | Spatial                  |
| Funnel                | ✅     | Part-to-whole            |
| Gantt                 | ❌     | Time                     |
| Gridplot              | ❌     | Part-to-whole            |
| Heatmap               | ✅     | Time                     |
| Heatmap matrix        | ❌     | Correlation              |
| Histogram             | ✅     | Distribution             |
| Line                  | ✅     | Time                     |
| Lollipop              | ❌     | Ranking, Magnitude       |
| Marimekko             | ❌     | Magnitude, Part-to-whole |
| Network               | ❌     | Flow                     |
| Ordered bar           | ✅     | Ranking                  |
| Ordered bubble        | ❌     | Ranking                  |
| Ordered column        | ✅     | Ranking                  |
| Paired bar            | ✅     | Magnitude                |
| Paired column         | ✅     | Magnitude                |
| Parallel coordinates  | ✅     | Magnitude                |
| Pictogram             | ❌     | Magnitude                |
| Pie                   | ✅     | Part-to-whole            |
| Radar                 | ❌     | Magnitude                |
| Radial                | ❌     | Magnitude                |
| Sankey                | ✅     | Flow                     |
| Scatter               | ✅     | Correlation              |
| Scatter matrix        | ✅     | Correlation              |
| Slope                 | ❌     | Ranking, Time            |
| Sparkline             | ❌     | Time                     |
| Stacked bar           | ✅     | Part-to-whole            |
| Stacked column        | ✅     | Part-to-whole            |
| Stepped line          | ✅     | Time                     |
| Surplus deficit line  | ❌     | Deviation                |
| Treemap               | ✅     | Part-to-whole            |
| Venn                  | ❌     | Part-to-whole            |
| Violin                | ✅     | Distribution             |
| Waterfall             | ❌     | Part-to-whole, Flow      |

To contribute a chart, follow the steps below:

1. Place an `svg` file named after the chart type in the `assets` folder if it doesn't already exist.
2. Add the data set to `_pages_utils.py` if it doesn't already exist.
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
   `deviation.py`, `distribution.py`, etc.
4. Add a `.py` file containing a code example of the chart type in the `pages/examples` folder, for instance, `area.py`
5. Remove the `IncompletePage(..)` entry for that chart type in `chart_groups.py`.
6. Update this `README.md` with the new chart type.

## How to run the example locally

1. If you have `hatch` set up, run the example with the command `hatch run example _visual-vocabulary`.
   Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
2. You should now be able to access the app locally via http://127.0.0.1:8050/.