Spaces:
Running
Running
File size: 5,859 Bytes
487a9ac 42ee455 487a9ac 42ee455 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
# 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/.
|