metadata

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

Visual vocabulary

Welcome to our visual vocabulary dashboard! 🎨

This dashboard serves as a comprehensive guide for selecting and creating various types of charts. It helps you decide when to use each chart type, and offers sample Python code using Plotly, and instructions for embedding these charts into a Vizro dashboard.

The charts in this dashboard are designed to make it easy for anyone to create beautiful and sophisticated visuals.

Our goal is to help you understand best practices in data visualization, ensure your charts effectively communicate your message, and streamline the creation of high-quality, interactive visualizations.

Created by:

Huong Li Nguyen and Antony Milne
Images created by QuantumBlack

Inspired by:

The FT Visual Vocabulary: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe.
The Graphic Continuum: Jon Swabish and Severino Ribecca

Credits and sources:

Charting library: Plotly
Plotly Express chart examples: Plotly Express
Data visualization best practices: Guide to data chart mastery

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	Done	Category	Credits & sources	API
Arc	❌	Part-to-whole
Area	✅	Time	Filled area plot with px	px.area
Bar	✅	Magnitude	Bar chart with px	px.bar
Barcode	❌	Distribution
Beeswarm	❌	Distribution
Boxplot	✅	Distribution	Box plot with px	px.box
Bubble	✅	Correlation	Scatter plot with px	px.scatter
Bubble map	✅	Spatial	Bubble map in px	px.scatter_map
Bubble timeline	❌	Time
Bullet	❌	Magnitude
Bump	❌	Ranking
Butterfly	✅	Deviation, Distribution	Pyramid charts in Plotly	go.Bar
Chord	❌	Flow
Choropleth	✅	Spatial	Choropleth map with px	px.choropleth
Column	✅	Magnitude, Time	Bar chart with px	px.bar
Column and line	✅	Correlation, Time	Multiple chart types in Plotly	go.Bar and go.Scatter
Connected scatter	✅	Correlation, Time	Line plot with px	px.line
Cumulative curve	❌	Distribution
Diverging bar	✅	Deviation	Bar chart with px	px.bar
Diverging stacked bar	✅	Deviation	Plotly forum - diverging stacked bar	go.Bar
Donut	✅	Part-to-whole	Pie chart with px	px.pie
Dot map	✅	Spatial	Bubble map in px	px.scatter_map
Dumbbell	✅	Distribution	Dumbbell plots in Plotly	px.scatter and add_shape
Fan	❌	Time
Flow map	❌	Spatial
Funnel	✅	Part-to-whole	Funnel plot with px	px.funnel
Gantt	✅	Time	Gantt chart with px	px.timeline
Gridplot	❌	Part-to-whole
Heatmap	✅	Time	Heatmaps with px	px.density_heatmap
Correlation matrix	❌	Correlation
Histogram	✅	Distribution	Histograms with px	px.histogram
Line	✅	Time	Line plot with px	px.line
Lollipop	✅	Ranking, Magnitude	Lollipop & Dumbbell Charts with Plotly	px.scatter
Marimekko	❌	Magnitude, Part-to-whole
Network	❌	Flow
Ordered bar	✅	Ranking	Bar chart with px	px.bar
Ordered bubble	❌	Ranking
Ordered column	✅	Ranking	Bar chart with px	px.bar
Paired bar	✅	Magnitude	Histograms with px	px.histogram
Paired column	✅	Magnitude	Histograms with px	px.histogram
Parallel coordinates	✅	Magnitude	Parallel coordinates plot with px	px.parallel_coordinates
Pictogram	❌	Magnitude
Pie	✅	Part-to-whole	Pie chart with px	px.pie
Radar	✅	Magnitude	Radar chart with px	px.line_polar
Radial	❌	Magnitude
Sankey	✅	Flow	Sankey diagram in Plotly	go.Sankey
Scatter	✅	Correlation	Scatter plot with px	px.scatter
Scatter matrix	✅	Correlation	Scatter matrix with px	px.scatter_matrix
Slope	❌	Ranking, Time
Sparkline	✅	Time	Sparklines with px	px.line or px.area
Stacked bar	✅	Part-to-whole	Histograms with px	px.histogram
Stacked column	✅	Part-to-whole	Histograms with px	px.histogram
Stepped line	✅	Time	Line plot with px	px.line
Surplus deficit line	❌	Deviation
Treemap	✅	Part-to-whole	Treemap with px	px.treemap
Venn	❌	Part-to-whole
Violin	✅	Distribution	Violin plot with px	px.violin
Waterfall	✅	Part-to-whole, Flow	Waterfall charts in Plotly	go.Waterfall

How to contribute

Contributions are welcome! To contribute a chart, follow the steps below:

Check that a svg file named after the chart type is contained in the assets folder. If not, raise an issue in the repository.
Add a .py file containing a code example of the chart type in the pages/examples folder, for instance, area.py. Take a look at existing examples.
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. Ensure you add the page to the list of pages at the end of the .py file.
Remove the IncompletePage(..) entry for that chart type in chart_groups.py.
Update this README.md with the new chart type, its status, category, and API links.

How to run the example locally

Run the example with the command hatch run example visual-vocabulary.
You should now be able to access the app locally via http://127.0.0.1:8051/.