Spaces:
Running
Running
Bring over changes
Browse files
README.md
CHANGED
|
@@ -8,7 +8,8 @@ pinned: false
|
|
| 8 |
license: apache-2.0
|
| 9 |
short_description: Vizro - Visual vocabulary
|
| 10 |
---
|
| 11 |
-
|
|
|
|
| 12 |
|
| 13 |
### Welcome to our visual vocabulary dashboard! 🎨
|
| 14 |
|
|
@@ -38,84 +39,86 @@ Inspired by:
|
|
| 38 |
|
| 39 |
Credits and sources:
|
| 40 |
|
| 41 |
-
- Charting library: [Plotly](https://
|
| 42 |
-
|
| 43 |
- Data visualization best practices: [Guide to data chart mastery](https://www.atlassian.com/data/charts)
|
| 44 |
|
| 45 |
## Chart types
|
| 46 |
|
| 47 |
The dashboard is still in development. Below is an overview of the chart types for which a completed page is available.
|
| 48 |
|
| 49 |
-
| Chart Type | Status | Category |
|
| 50 |
-
| --------------------- | ------ | ------------------------ |
|
| 51 |
-
| Arc | ❌ | Part-to-whole |
|
| 52 |
-
| Area | ✅ | Time |
|
| 53 |
-
| Bar | ✅ | Magnitude |
|
| 54 |
-
| Barcode | ❌ | Distribution |
|
| 55 |
-
| Beeswarm | ❌ | Distribution |
|
| 56 |
-
| Boxplot | ✅ | Distribution |
|
| 57 |
-
| Bubble | ✅ | Correlation |
|
| 58 |
-
| Bubble map | ✅ | Spatial |
|
| 59 |
-
| Bubble timeline | ❌ | Time |
|
| 60 |
-
| Bullet | ❌ | Magnitude |
|
| 61 |
-
| Bump | ❌ | Ranking |
|
| 62 |
-
| Butterfly | ✅ | Deviation, Distribution |
|
| 63 |
-
| Chord | ❌ | Flow |
|
| 64 |
-
| Choropleth | ✅ | Spatial |
|
| 65 |
-
| Column | ✅ | Magnitude, Time |
|
| 66 |
-
| Column and line | ✅ | Correlation, Time |
|
| 67 |
-
| Connected scatter | ✅ | Correlation, Time |
|
| 68 |
-
| Cumulative curve | ❌ | Distribution |
|
| 69 |
-
| Diverging bar | ❌ | Deviation |
|
| 70 |
-
| Diverging stacked bar | ❌ | Deviation |
|
| 71 |
-
| Donut | ✅ | Part-to-whole |
|
| 72 |
-
| Dot map | ✅ | Spatial |
|
| 73 |
-
| Dot plot | ❌ | Distribution |
|
| 74 |
-
| Fan | ❌ | Time |
|
| 75 |
-
| Flow map | ❌ | Spatial |
|
| 76 |
-
| Funnel | ✅ | Part-to-whole |
|
| 77 |
-
| Gantt | ❌ | Time |
|
| 78 |
-
| Gridplot | ❌ | Part-to-whole |
|
| 79 |
-
| Heatmap | ✅ | Time |
|
| 80 |
-
|
|
| 81 |
-
| Histogram | ✅ | Distribution |
|
| 82 |
-
| Line | ✅ | Time |
|
| 83 |
-
| Lollipop | ❌ | Ranking, Magnitude |
|
| 84 |
-
| Marimekko | ❌ | Magnitude, Part-to-whole |
|
| 85 |
-
| Network | ❌ | Flow |
|
| 86 |
-
| Ordered bar | ✅ | Ranking |
|
| 87 |
-
| Ordered bubble | ❌ | Ranking |
|
| 88 |
-
| Ordered column | ✅ | Ranking |
|
| 89 |
-
| Paired bar | ✅ | Magnitude |
|
| 90 |
-
| Paired column | ✅ | Magnitude |
|
| 91 |
-
| Parallel coordinates | ✅ | Magnitude |
|
| 92 |
-
| Pictogram | ❌ | Magnitude |
|
| 93 |
-
| Pie | ✅ | Part-to-whole |
|
| 94 |
-
| Radar | ❌ | Magnitude |
|
| 95 |
-
| Radial | ❌ | Magnitude |
|
| 96 |
-
| Sankey | ✅ | Flow |
|
| 97 |
-
| Scatter | ✅ | Correlation |
|
| 98 |
-
| Scatter matrix | ✅ | Correlation |
|
| 99 |
-
| Slope | ❌ | Ranking, Time |
|
| 100 |
-
| Sparkline | ❌ | Time |
|
| 101 |
-
| Stacked bar | ✅ | Part-to-whole |
|
| 102 |
-
| Stacked column | ✅ | Part-to-whole |
|
| 103 |
-
| Stepped line | ✅ | Time |
|
| 104 |
-
| Surplus deficit line | ❌ | Deviation |
|
| 105 |
-
| Treemap | ✅ | Part-to-whole |
|
| 106 |
-
| Venn | ❌ | Part-to-whole |
|
| 107 |
-
| Violin | ✅ | Distribution |
|
| 108 |
-
| Waterfall | ❌ | Part-to-whole, Flow |
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
|
|
|
|
|
|
| 114 |
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
|
| 115 |
-
`deviation.py`, `distribution.py`, etc.
|
| 116 |
-
4. Add a `.py` file containing a code example of the chart type in the `pages/examples` folder, for instance, `area.py
|
| 117 |
5. Remove the `IncompletePage(..)` entry for that chart type in `chart_groups.py`.
|
| 118 |
-
6. Update this `README.md` with the new chart type.
|
| 119 |
|
| 120 |
## How to run the example locally
|
| 121 |
|
|
|
|
| 8 |
license: apache-2.0
|
| 9 |
short_description: Vizro - Visual vocabulary
|
| 10 |
---
|
| 11 |
+
|
| 12 |
+
# Vizro - Visual vocabulary
|
| 13 |
|
| 14 |
### Welcome to our visual vocabulary dashboard! 🎨
|
| 15 |
|
|
|
|
| 39 |
|
| 40 |
Credits and sources:
|
| 41 |
|
| 42 |
+
- Charting library: [Plotly](https://github.com/plotly/plotly.py)
|
| 43 |
+
- Plotly Express chart examples: [Plotly Express](https://plotly.com/python/plotly-express/)
|
| 44 |
- Data visualization best practices: [Guide to data chart mastery](https://www.atlassian.com/data/charts)
|
| 45 |
|
| 46 |
## Chart types
|
| 47 |
|
| 48 |
The dashboard is still in development. Below is an overview of the chart types for which a completed page is available.
|
| 49 |
|
| 50 |
+
| Chart Type | Status | Category | Credits & sources | API |
|
| 51 |
+
| --------------------- | ------ | ------------------------ | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 52 |
+
| Arc | ❌ | Part-to-whole | | |
|
| 53 |
+
| Area | ✅ | Time | [Filled area plot with px](https://plotly.com/python/filled-area-plots/) | [px.area](https://plotly.com/python-api-reference/generated/plotly.express.area) |
|
| 54 |
+
| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) |
|
| 55 |
+
| Barcode | ❌ | Distribution | | |
|
| 56 |
+
| Beeswarm | ❌ | Distribution | | |
|
| 57 |
+
| Boxplot | ✅ | Distribution | [Box plot with px](https://plotly.com/python/box-plots/) | [px.box](https://plotly.github.io/plotly.py-docs/generated/plotly.express.box) |
|
| 58 |
+
| Bubble | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) |
|
| 59 |
+
| Bubble map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) |
|
| 60 |
+
| Bubble timeline | ❌ | Time | | |
|
| 61 |
+
| Bullet | ❌ | Magnitude | | |
|
| 62 |
+
| Bump | ❌ | Ranking | | |
|
| 63 |
+
| Butterfly | ✅ | Deviation, Distribution | [Pyramid charts in Plotly](https://plotly.com/python/v3/population-pyramid-charts/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) |
|
| 64 |
+
| Chord | ❌ | Flow | | |
|
| 65 |
+
| Choropleth | ✅ | Spatial | [Choropleth map with px](https://plotly.com/python/choropleth-maps/) | [px.choropleth](https://plotly.github.io/plotly.py-docs/generated/plotly.express.choropleth.html) |
|
| 66 |
+
| Column | ✅ | Magnitude, Time | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) |
|
| 67 |
+
| Column and line | ✅ | Correlation, Time | [Multiple chart types in Plotly](https://plotly.com/python/graphing-multiple-chart-types/) | [go.Bar](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Bar.html) and [go.Scatter](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Scatter.html) |
|
| 68 |
+
| Connected scatter | ✅ | Correlation, Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) |
|
| 69 |
+
| Cumulative curve | ❌ | Distribution | | |
|
| 70 |
+
| Diverging bar | ❌ | Deviation | | |
|
| 71 |
+
| Diverging stacked bar | ❌ | Deviation | | |
|
| 72 |
+
| Donut | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) |
|
| 73 |
+
| Dot map | ✅ | Spatial | [Bubble map in px](https://plotly.com/python/bubble-maps/) | [px.scatter_map](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_map) |
|
| 74 |
+
| Dot plot | ❌ | Distribution | | |
|
| 75 |
+
| Fan | ❌ | Time | | |
|
| 76 |
+
| Flow map | ❌ | Spatial | | |
|
| 77 |
+
| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) |
|
| 78 |
+
| Gantt | ❌ | Time | | |
|
| 79 |
+
| Gridplot | ❌ | Part-to-whole | | |
|
| 80 |
+
| Heatmap | ✅ | Time | [Heatmaps with px](https://plotly.com/python/heatmaps/) | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html) |
|
| 81 |
+
| Correlation matrix | ❌ | Correlation | | |
|
| 82 |
+
| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 83 |
+
| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) |
|
| 84 |
+
| Lollipop | ❌ | Ranking, Magnitude | | |
|
| 85 |
+
| Marimekko | ❌ | Magnitude, Part-to-whole | | |
|
| 86 |
+
| Network | ❌ | Flow | | |
|
| 87 |
+
| Ordered bar | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) |
|
| 88 |
+
| Ordered bubble | ❌ | Ranking | | |
|
| 89 |
+
| Ordered column | ✅ | Ranking | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar.html) |
|
| 90 |
+
| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 91 |
+
| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 92 |
+
| Parallel coordinates | ✅ | Magnitude | [Parallel coordinates plot with px](https://plotly.com/python/parallel-coordinates-plot/) | [px.parallel_coordinates](https://plotly.com/python-api-reference/generated/plotly.express.parallel_coordinates.html) |
|
| 93 |
+
| Pictogram | ❌ | Magnitude | | |
|
| 94 |
+
| Pie | ✅ | Part-to-whole | [Pie chart with px](https://plotly.com/python/pie-charts/) | [px.pie](https://plotly.com/python-api-reference/generated/plotly.express.pie) |
|
| 95 |
+
| Radar | ❌ | Magnitude | | |
|
| 96 |
+
| Radial | ❌ | Magnitude | | |
|
| 97 |
+
| Sankey | ✅ | Flow | [Sankey diagram in Plotly](https://plotly.com/python/sankey-diagram/) | [go.Sankey](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Sankey.html) |
|
| 98 |
+
| Scatter | ✅ | Correlation | [Scatter plot with px](https://plotly.com/python/line-and-scatter/) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter) |
|
| 99 |
+
| Scatter matrix | ✅ | Correlation | [Scatter matrix with px](https://plotly.com/python/splom/) | [px.scatter_matrix](https://plotly.github.io/plotly.py-docs/generated/plotly.express.scatter_matrix.html) |
|
| 100 |
+
| Slope | ❌ | Ranking, Time | | |
|
| 101 |
+
| Sparkline | ❌ | Time | | |
|
| 102 |
+
| Stacked bar | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 103 |
+
| Stacked column | ✅ | Part-to-whole | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 104 |
+
| Stepped line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) |
|
| 105 |
+
| Surplus deficit line | ❌ | Deviation | | |
|
| 106 |
+
| Treemap | ✅ | Part-to-whole | [Treemap with px](https://plotly.com/python/treemaps/) | [px.treemap](https://plotly.com/python-api-reference/generated/plotly.express.treemap.html) |
|
| 107 |
+
| Venn | ❌ | Part-to-whole | | |
|
| 108 |
+
| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) |
|
| 109 |
+
| Waterfall | ❌ | Part-to-whole, Flow | | |
|
| 110 |
+
|
| 111 |
+
## How to contribute
|
| 112 |
+
|
| 113 |
+
Contributions are welcome! To contribute a chart, follow the steps below:
|
| 114 |
+
|
| 115 |
+
1. Check that a `svg` file named after the chart type is contained in the [assets](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/_visual-vocabulary/assets/images/charts) folder. If not, [raise an issue](https://github.com/mckinsey/vizro/issues) in the repository.
|
| 116 |
+
2. Add the data set to `_pages_utils.py` if it doesn't already exist. Use existing data sets preferably or any other data set that is publicly available e.g. [plotlx.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
|
| 117 |
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
|
| 118 |
+
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
|
| 119 |
+
4. 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.
|
| 120 |
5. Remove the `IncompletePage(..)` entry for that chart type in `chart_groups.py`.
|
| 121 |
+
6. Update this `README.md` with the new chart type, its status, category, and API links.
|
| 122 |
|
| 123 |
## How to run the example locally
|
| 124 |
|
assets/images/charts/{heatmap-matrix.svg → correlation-matrix.svg}
RENAMED
|
File without changes
|
requirements.in
CHANGED
|
@@ -1,5 +1,4 @@
|
|
| 1 |
# This file is only used if you don't have hatch installed.
|
| 2 |
-
# It should be fully generated and used when the demo moves to huggingface.
|
| 3 |
black==24.4.2
|
| 4 |
plotly>=5.24.0
|
| 5 |
vizro==0.1.22
|
|
|
|
| 1 |
# This file is only used if you don't have hatch installed.
|
|
|
|
| 2 |
black==24.4.2
|
| 3 |
plotly>=5.24.0
|
| 4 |
vizro==0.1.22
|