Spaces:
Running
Running
Bring over recent changes
Browse files- README.md +64 -63
- assets/images/charts/{dot-plot.svg → dumbbell.svg} +0 -0
- chart_groups.py +0 -6
- custom_charts.py +91 -0
- pages/__init__.py +1 -1
- pages/_factories.py +42 -2
- pages/_pages_utils.py +47 -0
- pages/deviation.py +48 -1
- pages/distribution.py +30 -2
- pages/examples/diverging_bar.py +45 -0
- pages/examples/dumbbell.py +46 -0
- pages/examples/gantt.py +23 -0
- pages/examples/radar.py +25 -0
- pages/examples/waterfall.py +51 -0
- pages/flow.py +4 -1
- pages/magnitude.py +26 -2
- pages/part_to_whole.py +3 -1
- pages/time.py +41 -2
README.md
CHANGED
|
@@ -47,73 +47,75 @@ Credits and sources:
|
|
| 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 |
-
|
| 51 |
-
|
| 52 |
-
|
|
| 53 |
-
|
|
| 54 |
-
|
|
| 55 |
-
|
|
| 56 |
-
|
|
| 57 |
-
|
|
| 58 |
-
|
|
| 59 |
-
|
|
| 60 |
-
| Bubble
|
| 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 |
-
| Ordered
|
| 90 |
-
|
|
| 91 |
-
|
|
| 92 |
-
|
|
| 93 |
-
|
|
| 94 |
-
|
|
| 95 |
-
|
|
| 96 |
-
|
|
| 97 |
-
|
|
| 98 |
-
|
|
| 99 |
-
|
|
| 100 |
-
|
|
| 101 |
-
|
|
| 102 |
-
|
|
| 103 |
-
|
|
| 104 |
-
|
|
| 105 |
-
|
|
| 106 |
-
|
|
| 107 |
-
|
|
| 108 |
-
|
|
| 109 |
-
|
|
|
|
|
|
|
|
| 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. [
|
| 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.
|
|
@@ -122,6 +124,5 @@ Contributions are welcome! To contribute a chart, follow the steps below:
|
|
| 122 |
|
| 123 |
## How to run the example locally
|
| 124 |
|
| 125 |
-
1.
|
| 126 |
-
Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`.
|
| 127 |
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
|
|
|
|
| 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 |
+
Sure, here's the table with all columns aligned for better readability:
|
| 51 |
+
|
| 52 |
+
| Chart Type | Status | Category | Credits & sources | API |
|
| 53 |
+
| --------------------- | ------ | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| 54 |
+
| Arc | ❌ | Part-to-whole | | |
|
| 55 |
+
| 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) |
|
| 56 |
+
| Bar | ✅ | Magnitude | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) |
|
| 57 |
+
| Barcode | ❌ | Distribution | | |
|
| 58 |
+
| Beeswarm | ❌ | Distribution | | |
|
| 59 |
+
| 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) |
|
| 60 |
+
| 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) |
|
| 61 |
+
| 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) |
|
| 62 |
+
| Bubble timeline | ❌ | Time | | |
|
| 63 |
+
| Bullet | ❌ | Magnitude | | |
|
| 64 |
+
| Bump | ❌ | Ranking | | |
|
| 65 |
+
| 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) |
|
| 66 |
+
| Chord | ❌ | Flow | | |
|
| 67 |
+
| 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) |
|
| 68 |
+
| 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) |
|
| 69 |
+
| 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) |
|
| 70 |
+
| 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) |
|
| 71 |
+
| Cumulative curve | ❌ | Distribution | | |
|
| 72 |
+
| Diverging bar | ✅ | Deviation | [Bar chart with px](https://plotly.com/python/bar-charts/) | [px.bar](https://plotly.com/python-api-reference/generated/plotly.express.bar) |
|
| 73 |
+
| Diverging stacked bar | ❌ | Deviation | | |
|
| 74 |
+
| 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) |
|
| 75 |
+
| 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) |
|
| 76 |
+
| Dumbbell | ✅ | Distribution | [Dumbbell plots in Plotly](https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762) | [px.scatter](https://plotly.com/python-api-reference/generated/plotly.express.scatter.html) and [add_shape](https://plotly.com/python/shapes/) |
|
| 77 |
+
| Fan | ❌ | Time | | |
|
| 78 |
+
| Flow map | ❌ | Spatial | | |
|
| 79 |
+
| Funnel | ✅ | Part-to-whole | [Funnel plot with px](https://plotly.com/python/funnel-charts/) | [px.funnel](https://plotly.com/python/funnel-charts/) |
|
| 80 |
+
| Gantt | ✅ | Time | [Gantt chart with px](https://plotly.com/python/gantt/) | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html) |
|
| 81 |
+
| Gridplot | ❌ | Part-to-whole | | |
|
| 82 |
+
| 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) |
|
| 83 |
+
| Correlation matrix | ❌ | Correlation | | |
|
| 84 |
+
| Histogram | ✅ | Distribution | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 85 |
+
| Line | ✅ | Time | [Line plot with px](https://plotly.com/python/line-charts/) | [px.line](https://plotly.com/python-api-reference/generated/plotly.express.line) |
|
| 86 |
+
| Lollipop | ❌ | Ranking, Magnitude | | |
|
| 87 |
+
| Marimekko | ❌ | Magnitude, Part-to-whole | | |
|
| 88 |
+
| Network | ❌ | Flow | | |
|
| 89 |
+
| 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) |
|
| 90 |
+
| Ordered bubble | ❌ | Ranking | | |
|
| 91 |
+
| 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) |
|
| 92 |
+
| Paired bar | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 93 |
+
| Paired column | ✅ | Magnitude | [Histograms with px](https://plotly.com/python/histograms/) | [px.histogram](https://plotly.github.io/plotly.py-docs/generated/plotly.express.histogram) |
|
| 94 |
+
| 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) |
|
| 95 |
+
| Pictogram | ❌ | Magnitude | | |
|
| 96 |
+
| 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) |
|
| 97 |
+
| Radar | ✅ | Magnitude | [Radar chart with px](https://plotly.com/python/radar-chart/) | [px.line_polar](https://plotly.com/python-api-reference/generated/plotly.express.line_polar) |
|
| 98 |
+
| Radial | ❌ | Magnitude | | |
|
| 99 |
+
| 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) |
|
| 100 |
+
| 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) |
|
| 101 |
+
| 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) |
|
| 102 |
+
| Slope | ❌ | Ranking, Time | | |
|
| 103 |
+
| Sparkline | ❌ | Time | | |
|
| 104 |
+
| 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) |
|
| 105 |
+
| 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) |
|
| 106 |
+
| 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) |
|
| 107 |
+
| Surplus deficit line | ❌ | Deviation | | |
|
| 108 |
+
| 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) |
|
| 109 |
+
| Venn | ❌ | Part-to-whole | | |
|
| 110 |
+
| Violin | ✅ | Distribution | [Violin plot with px](https://plotly.com/python/violin/) | [px.violin](https://plotly.com/python-api-reference/generated/plotly.express.violin.html) |
|
| 111 |
+
| Waterfall | ✅ | Part-to-whole, Flow | [Waterfall charts in Plotly](https://plotly.com/python/waterfall-charts/) | [go.Waterfall](https://plotly.github.io/plotly.py-docs/generated/plotly.graph_objects.Waterfall.html) |
|
| 112 |
|
| 113 |
## How to contribute
|
| 114 |
|
| 115 |
Contributions are welcome! To contribute a chart, follow the steps below:
|
| 116 |
|
| 117 |
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.
|
| 118 |
+
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. [plotly.express.data](https://plotly.com/python-api-reference/generated/plotly.express.data.html)
|
| 119 |
3. Create a new page for the chart type and add it to the relevant category `.py` file such as `correlation.py`,
|
| 120 |
`deviation.py`, `distribution.py`, etc. Ensure you add the page to the list of `pages` at the end of the `.py` file.
|
| 121 |
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.
|
|
|
|
| 124 |
|
| 125 |
## How to run the example locally
|
| 126 |
|
| 127 |
+
1. Run the example with the command `hatch run example visual-vocabulary`.
|
|
|
|
| 128 |
2. You should now be able to access the app locally via http://127.0.0.1:8050/.
|
assets/images/charts/{dot-plot.svg → dumbbell.svg}
RENAMED
|
File without changes
|
chart_groups.py
CHANGED
|
@@ -51,7 +51,6 @@ deviation_chart_group = ChartGroup(
|
|
| 51 |
name="Deviation",
|
| 52 |
pages=pages.deviation.pages,
|
| 53 |
incomplete_pages=[
|
| 54 |
-
IncompletePage(title="Diverging bar"),
|
| 55 |
IncompletePage("Diverging stacked bar"),
|
| 56 |
IncompletePage(title="Surplus deficit filled line"),
|
| 57 |
],
|
|
@@ -102,7 +101,6 @@ distribution_chart_group = ChartGroup(
|
|
| 102 |
name="Distribution",
|
| 103 |
pages=pages.distribution.pages,
|
| 104 |
incomplete_pages=[
|
| 105 |
-
IncompletePage("Dot plot"),
|
| 106 |
IncompletePage("Barcode"),
|
| 107 |
IncompletePage("Cumulative curve"),
|
| 108 |
IncompletePage("Beeswarm"),
|
|
@@ -122,7 +120,6 @@ magnitude_chart_group = ChartGroup(
|
|
| 122 |
incomplete_pages=[
|
| 123 |
IncompletePage("Marimekko"),
|
| 124 |
IncompletePage("Lollipop"),
|
| 125 |
-
IncompletePage("Radar"),
|
| 126 |
IncompletePage("Pictogram"),
|
| 127 |
IncompletePage("Bullet"),
|
| 128 |
IncompletePage("Radial"),
|
|
@@ -140,7 +137,6 @@ time_chart_group = ChartGroup(
|
|
| 140 |
name="Time",
|
| 141 |
pages=pages.time.pages,
|
| 142 |
incomplete_pages=[
|
| 143 |
-
IncompletePage("Gantt"),
|
| 144 |
IncompletePage("Slope"),
|
| 145 |
IncompletePage("Fan"),
|
| 146 |
IncompletePage("Bubble timeline"),
|
|
@@ -163,7 +159,6 @@ part_to_whole_chart_group = ChartGroup(
|
|
| 163 |
IncompletePage("Arc"),
|
| 164 |
IncompletePage("Gridplot"),
|
| 165 |
IncompletePage("Venn"),
|
| 166 |
-
IncompletePage("Waterfall"),
|
| 167 |
],
|
| 168 |
icon="Donut Small",
|
| 169 |
intro_text=part_to_whole_intro_text,
|
|
@@ -177,7 +172,6 @@ flow_chart_group = ChartGroup(
|
|
| 177 |
name="Flow",
|
| 178 |
pages=pages.flow.pages,
|
| 179 |
incomplete_pages=[
|
| 180 |
-
IncompletePage("Waterfall"),
|
| 181 |
IncompletePage("Chord"),
|
| 182 |
IncompletePage("Network"),
|
| 183 |
],
|
|
|
|
| 51 |
name="Deviation",
|
| 52 |
pages=pages.deviation.pages,
|
| 53 |
incomplete_pages=[
|
|
|
|
| 54 |
IncompletePage("Diverging stacked bar"),
|
| 55 |
IncompletePage(title="Surplus deficit filled line"),
|
| 56 |
],
|
|
|
|
| 101 |
name="Distribution",
|
| 102 |
pages=pages.distribution.pages,
|
| 103 |
incomplete_pages=[
|
|
|
|
| 104 |
IncompletePage("Barcode"),
|
| 105 |
IncompletePage("Cumulative curve"),
|
| 106 |
IncompletePage("Beeswarm"),
|
|
|
|
| 120 |
incomplete_pages=[
|
| 121 |
IncompletePage("Marimekko"),
|
| 122 |
IncompletePage("Lollipop"),
|
|
|
|
| 123 |
IncompletePage("Pictogram"),
|
| 124 |
IncompletePage("Bullet"),
|
| 125 |
IncompletePage("Radial"),
|
|
|
|
| 137 |
name="Time",
|
| 138 |
pages=pages.time.pages,
|
| 139 |
incomplete_pages=[
|
|
|
|
| 140 |
IncompletePage("Slope"),
|
| 141 |
IncompletePage("Fan"),
|
| 142 |
IncompletePage("Bubble timeline"),
|
|
|
|
| 159 |
IncompletePage("Arc"),
|
| 160 |
IncompletePage("Gridplot"),
|
| 161 |
IncompletePage("Venn"),
|
|
|
|
| 162 |
],
|
| 163 |
icon="Donut Small",
|
| 164 |
intro_text=part_to_whole_intro_text,
|
|
|
|
| 172 |
name="Flow",
|
| 173 |
pages=pages.flow.pages,
|
| 174 |
incomplete_pages=[
|
|
|
|
| 175 |
IncompletePage("Chord"),
|
| 176 |
IncompletePage("Network"),
|
| 177 |
],
|
custom_charts.py
CHANGED
|
@@ -142,3 +142,94 @@ def categorical_column(data_frame: pd.DataFrame, x: str, y: str):
|
|
| 142 |
# So ticks are aligned with bars when xaxes values are numbers (e.g. years)
|
| 143 |
fig.update_xaxes(type="category")
|
| 144 |
return fig
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 142 |
# So ticks are aligned with bars when xaxes values are numbers (e.g. years)
|
| 143 |
fig.update_xaxes(type="category")
|
| 144 |
return fig
|
| 145 |
+
|
| 146 |
+
|
| 147 |
+
@capture("graph")
|
| 148 |
+
def waterfall(data_frame: pd.DataFrame, x: str, y: str, measure: List[str]) -> go.Figure:
|
| 149 |
+
"""Creates a waterfall chart using Plotly's `go.Waterfall`.
|
| 150 |
+
|
| 151 |
+
A Waterfall chart visually breaks down the cumulative effect of sequential positive and negative values,
|
| 152 |
+
showing how each value contributes to the total.
|
| 153 |
+
|
| 154 |
+
Args:
|
| 155 |
+
data_frame (pd.DataFrame): The data source for the chart.
|
| 156 |
+
x (str): Column name in `data_frame` for x-axis values.
|
| 157 |
+
y (str): Column name in `data_frame` for y-axis values.
|
| 158 |
+
measure (List[str]): List specifying the type of each bar, can be "relative", "total", or "absolute".
|
| 159 |
+
|
| 160 |
+
Returns:
|
| 161 |
+
go.Figure: A Plotly Figure object representing the Waterfall chart.
|
| 162 |
+
|
| 163 |
+
For additional parameters and customization options, see the Plotly documentation:
|
| 164 |
+
https://plotly.com/python/reference/waterfall/
|
| 165 |
+
|
| 166 |
+
"""
|
| 167 |
+
fig = go.Figure(
|
| 168 |
+
go.Waterfall(
|
| 169 |
+
x=data_frame[x],
|
| 170 |
+
y=data_frame[y],
|
| 171 |
+
measure=data_frame[measure],
|
| 172 |
+
)
|
| 173 |
+
)
|
| 174 |
+
fig.update_layout(showlegend=False)
|
| 175 |
+
return fig
|
| 176 |
+
|
| 177 |
+
|
| 178 |
+
@capture("graph")
|
| 179 |
+
def radar(data_frame, **kwargs) -> go.Figure:
|
| 180 |
+
"""Creates a radar chart using Plotly's `line_polar`.
|
| 181 |
+
|
| 182 |
+
A radar chart is a type of data visualization in which there are three or more
|
| 183 |
+
variables represented on axes that originate from the same central point.
|
| 184 |
+
|
| 185 |
+
Args:
|
| 186 |
+
data_frame (pd.DataFrame): The data source for the chart.
|
| 187 |
+
**kwargs: Keyword arguments that can be passed into Plotly's line_polar (i.e. r, theta, etc.)
|
| 188 |
+
|
| 189 |
+
Returns:
|
| 190 |
+
go.Figure: A Plotly Figure object representing the radar chart.
|
| 191 |
+
|
| 192 |
+
"""
|
| 193 |
+
fig = px.line_polar(data_frame, **kwargs)
|
| 194 |
+
fig.update_traces(fill="toself")
|
| 195 |
+
return fig
|
| 196 |
+
|
| 197 |
+
|
| 198 |
+
@capture("graph")
|
| 199 |
+
def dumbbell(data_frame: pd.DataFrame, x: str, y: str, color: str) -> go.Figure:
|
| 200 |
+
"""Creates a dumbbell chart using Plotly's `px.scatter` and `add_shape`.
|
| 201 |
+
|
| 202 |
+
A dumbbell plot is a type of dot plot where the points, displaying different groups, are connected with a straight
|
| 203 |
+
line. They are ideal for illustrating differences or gaps between two points.
|
| 204 |
+
|
| 205 |
+
Args:
|
| 206 |
+
data_frame (pd.DataFrame): The data source for the chart.
|
| 207 |
+
x (str): Column name in `data_frame` for x-axis values.
|
| 208 |
+
y (str): Column name in `data_frame` for y-axis values.
|
| 209 |
+
color (str): Column name in `data_frame` used for coloring the markers.
|
| 210 |
+
|
| 211 |
+
Returns:
|
| 212 |
+
go.Figure: A Plotly Figure object representing the dumbbell chart.
|
| 213 |
+
|
| 214 |
+
Inspired by: https://community.plotly.com/t/how-to-make-dumbbell-plots-in-plotly-python/47762
|
| 215 |
+
|
| 216 |
+
"""
|
| 217 |
+
# Add two dots to plot
|
| 218 |
+
fig = px.scatter(data_frame, y=y, x=x, color=color)
|
| 219 |
+
|
| 220 |
+
# Add lines between dots
|
| 221 |
+
for y_value, group in data_frame.groupby(y):
|
| 222 |
+
fig.add_shape(
|
| 223 |
+
type="line",
|
| 224 |
+
layer="below",
|
| 225 |
+
y0=y_value,
|
| 226 |
+
y1=y_value,
|
| 227 |
+
x0=group[x].min(),
|
| 228 |
+
x1=group[x].max(),
|
| 229 |
+
line_color="grey",
|
| 230 |
+
line_width=3,
|
| 231 |
+
)
|
| 232 |
+
|
| 233 |
+
# Increase size of dots
|
| 234 |
+
fig.update_traces(marker_size=12)
|
| 235 |
+
return fig
|
pages/__init__.py
CHANGED
|
@@ -2,4 +2,4 @@
|
|
| 2 |
# TODO: think about the best way to do code examples, e.g.
|
| 3 |
# - do we want full dashboard example or plot-only example?
|
| 4 |
# - or both? Could be done using a toggle switch or multiple tabs.
|
| 5 |
-
# - a link to
|
|
|
|
| 2 |
# TODO: think about the best way to do code examples, e.g.
|
| 3 |
# - do we want full dashboard example or plot-only example?
|
| 4 |
# - or both? Could be done using a toggle switch or multiple tabs.
|
| 5 |
+
# - a link to PyCafe showing the dashboard code?
|
pages/_factories.py
CHANGED
|
@@ -6,9 +6,9 @@ each chart type used in different groups.
|
|
| 6 |
|
| 7 |
import vizro.models as vm
|
| 8 |
import vizro.plotly.express as px
|
| 9 |
-
from custom_charts import butterfly, column_and_line
|
| 10 |
|
| 11 |
-
from pages._pages_utils import PAGE_GRID, ages, gapminder, make_code_clipboard_from_py_file
|
| 12 |
|
| 13 |
|
| 14 |
def butterfly_factory(group: str):
|
|
@@ -110,3 +110,43 @@ def column_and_line_factory(group: str):
|
|
| 110 |
make_code_clipboard_from_py_file("column_and_line.py"),
|
| 111 |
],
|
| 112 |
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 6 |
|
| 7 |
import vizro.models as vm
|
| 8 |
import vizro.plotly.express as px
|
| 9 |
+
from custom_charts import butterfly, column_and_line, waterfall
|
| 10 |
|
| 11 |
+
from pages._pages_utils import PAGE_GRID, ages, gapminder, make_code_clipboard_from_py_file, waterfall_data
|
| 12 |
|
| 13 |
|
| 14 |
def butterfly_factory(group: str):
|
|
|
|
| 110 |
make_code_clipboard_from_py_file("column_and_line.py"),
|
| 111 |
],
|
| 112 |
)
|
| 113 |
+
|
| 114 |
+
|
| 115 |
+
def waterfall_factory(group: str):
|
| 116 |
+
"""Reusable function to create the page content for the column chart with a unique ID."""
|
| 117 |
+
return vm.Page(
|
| 118 |
+
id=f"{group}-waterfall",
|
| 119 |
+
path=f"{group}/waterfall",
|
| 120 |
+
title="Waterfall",
|
| 121 |
+
layout=vm.Layout(grid=PAGE_GRID),
|
| 122 |
+
components=[
|
| 123 |
+
vm.Card(
|
| 124 |
+
text="""
|
| 125 |
+
|
| 126 |
+
#### What is a waterfall chart?
|
| 127 |
+
|
| 128 |
+
A waterfall chart is a bar chart that shows the cumulative effect of sequential positive or negative
|
| 129 |
+
values. It starts with an initial value, displays individual changes as steps, and ends with the
|
| 130 |
+
final total.
|
| 131 |
+
|
| 132 |
+
|
| 133 |
+
|
| 134 |
+
#### When should I use it?
|
| 135 |
+
|
| 136 |
+
Use a waterfall chart to visualize how individual factors contribute to a total, such as changes in
|
| 137 |
+
revenue or costs by category. It helps you understand the incremental impact of each factor, making
|
| 138 |
+
data analysis and interpretation easier. Ensure all bars and changes are clearly labeled, use consistent
|
| 139 |
+
colors for positive and negative values, and arrange categories logically to tell a coherent story.
|
| 140 |
+
"""
|
| 141 |
+
),
|
| 142 |
+
vm.Graph(
|
| 143 |
+
figure=waterfall(
|
| 144 |
+
waterfall_data,
|
| 145 |
+
x="x",
|
| 146 |
+
y="y",
|
| 147 |
+
measure="measure",
|
| 148 |
+
)
|
| 149 |
+
),
|
| 150 |
+
make_code_clipboard_from_py_file("waterfall.py"),
|
| 151 |
+
],
|
| 152 |
+
)
|
pages/_pages_utils.py
CHANGED
|
@@ -29,6 +29,7 @@ gapminder = px.data.gapminder()
|
|
| 29 |
iris = px.data.iris()
|
| 30 |
stocks = px.data.stocks()
|
| 31 |
tips = px.data.tips()
|
|
|
|
| 32 |
|
| 33 |
ages = pd.DataFrame(
|
| 34 |
{
|
|
@@ -58,3 +59,49 @@ stepped_line_data = pd.DataFrame(
|
|
| 58 |
|
| 59 |
|
| 60 |
carshare = px.data.carshare()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
iris = px.data.iris()
|
| 30 |
stocks = px.data.stocks()
|
| 31 |
tips = px.data.tips()
|
| 32 |
+
wind = px.data.wind()
|
| 33 |
|
| 34 |
ages = pd.DataFrame(
|
| 35 |
{
|
|
|
|
| 59 |
|
| 60 |
|
| 61 |
carshare = px.data.carshare()
|
| 62 |
+
|
| 63 |
+
tasks = pd.DataFrame(
|
| 64 |
+
[
|
| 65 |
+
{"Task": "Job A", "Start": "2009-01-01", "Finish": "2009-02-28"},
|
| 66 |
+
{"Task": "Job B", "Start": "2009-03-05", "Finish": "2009-04-15"},
|
| 67 |
+
{"Task": "Job C", "Start": "2009-02-20", "Finish": "2009-05-30"},
|
| 68 |
+
]
|
| 69 |
+
)
|
| 70 |
+
|
| 71 |
+
waterfall_data = pd.DataFrame(
|
| 72 |
+
{
|
| 73 |
+
"x": ["Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax"],
|
| 74 |
+
"y": [60, 80, 0, -40, -20, 0],
|
| 75 |
+
"measure": ["relative", "relative", "total", "relative", "relative", "total"],
|
| 76 |
+
}
|
| 77 |
+
)
|
| 78 |
+
|
| 79 |
+
|
| 80 |
+
pastries = pd.DataFrame(
|
| 81 |
+
{
|
| 82 |
+
"pastry": [
|
| 83 |
+
"Scones",
|
| 84 |
+
"Bagels",
|
| 85 |
+
"Muffins",
|
| 86 |
+
"Cakes",
|
| 87 |
+
"Donuts",
|
| 88 |
+
"Cookies",
|
| 89 |
+
"Croissants",
|
| 90 |
+
"Eclairs",
|
| 91 |
+
"Brownies",
|
| 92 |
+
"Tarts",
|
| 93 |
+
"Macarons",
|
| 94 |
+
"Pies",
|
| 95 |
+
],
|
| 96 |
+
"Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07],
|
| 97 |
+
}
|
| 98 |
+
)
|
| 99 |
+
|
| 100 |
+
|
| 101 |
+
salaries = pd.DataFrame(
|
| 102 |
+
{
|
| 103 |
+
"Job": ["Developer", "Analyst", "Manager", "Specialist"] * 2,
|
| 104 |
+
"Salary": [60000, 55000, 70000, 50000, 130000, 110000, 96400, 80000],
|
| 105 |
+
"Range": ["Min"] * 4 + ["Max"] * 4,
|
| 106 |
+
}
|
| 107 |
+
)
|
pages/deviation.py
CHANGED
|
@@ -1,7 +1,54 @@
|
|
| 1 |
"""Deviation charts."""
|
| 2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 3 |
from pages._factories import butterfly_factory
|
|
|
|
| 4 |
|
| 5 |
butterfly = butterfly_factory("deviation")
|
| 6 |
|
| 7 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
"""Deviation charts."""
|
| 2 |
|
| 3 |
+
import plotly.io as pio
|
| 4 |
+
import vizro.models as vm
|
| 5 |
+
import vizro.plotly.express as px
|
| 6 |
+
|
| 7 |
from pages._factories import butterfly_factory
|
| 8 |
+
from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, pastries
|
| 9 |
|
| 10 |
butterfly = butterfly_factory("deviation")
|
| 11 |
|
| 12 |
+
|
| 13 |
+
diverging_bar = vm.Page(
|
| 14 |
+
title="Diverging bar",
|
| 15 |
+
path="deviation/diverging-bar",
|
| 16 |
+
layout=vm.Layout(grid=PAGE_GRID),
|
| 17 |
+
components=[
|
| 18 |
+
vm.Card(
|
| 19 |
+
text="""
|
| 20 |
+
|
| 21 |
+
#### What is a diverging bar?
|
| 22 |
+
|
| 23 |
+
A diverging bar chart is a version of a bar chart used to display both positive and negative values across
|
| 24 |
+
a common baseline. Bars extend either to the left or right of the central axis, indicating negative or
|
| 25 |
+
positive values, respectively. This allows for easy comparison of data points that deviate in opposite
|
| 26 |
+
directions.
|
| 27 |
+
|
| 28 |
+
|
| 29 |
+
|
| 30 |
+
#### When should I use it?
|
| 31 |
+
|
| 32 |
+
Use a diverging bar chart to compare positive and negative values from a central baseline. These charts are
|
| 33 |
+
suitable for visualizing profit and loss, survey results, and performance metrics. Apply color coding
|
| 34 |
+
effectively, using distinct colors for positive and negative values to quickly distinguish categories.
|
| 35 |
+
Alternatively, use a continuous diverging color scale for a more nuanced view, especially with a wide range
|
| 36 |
+
of values. Ensure a consistent scale on both sides of the baseline to avoid misleading interpretations.
|
| 37 |
+
"""
|
| 38 |
+
),
|
| 39 |
+
vm.Graph(
|
| 40 |
+
figure=px.bar(
|
| 41 |
+
pastries.sort_values("Profit Ratio"),
|
| 42 |
+
orientation="h",
|
| 43 |
+
x="Profit Ratio",
|
| 44 |
+
y="pastry",
|
| 45 |
+
color="Profit Ratio",
|
| 46 |
+
color_continuous_scale=pio.templates["vizro_dark"].layout.colorscale.diverging,
|
| 47 |
+
color_continuous_midpoint=0,
|
| 48 |
+
),
|
| 49 |
+
),
|
| 50 |
+
make_code_clipboard_from_py_file("diverging_bar.py"),
|
| 51 |
+
],
|
| 52 |
+
)
|
| 53 |
+
|
| 54 |
+
pages = [butterfly, diverging_bar]
|
pages/distribution.py
CHANGED
|
@@ -2,9 +2,10 @@
|
|
| 2 |
|
| 3 |
import vizro.models as vm
|
| 4 |
import vizro.plotly.express as px
|
|
|
|
| 5 |
|
| 6 |
from pages._factories import butterfly_factory
|
| 7 |
-
from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips
|
| 8 |
|
| 9 |
violin = vm.Page(
|
| 10 |
title="Violin",
|
|
@@ -106,5 +107,32 @@ histogram = vm.Page(
|
|
| 106 |
],
|
| 107 |
)
|
| 108 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 109 |
|
| 110 |
-
pages = [violin, boxplot, butterfly, histogram]
|
|
|
|
| 2 |
|
| 3 |
import vizro.models as vm
|
| 4 |
import vizro.plotly.express as px
|
| 5 |
+
from custom_charts import dumbbell
|
| 6 |
|
| 7 |
from pages._factories import butterfly_factory
|
| 8 |
+
from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, salaries, tips
|
| 9 |
|
| 10 |
violin = vm.Page(
|
| 11 |
title="Violin",
|
|
|
|
| 107 |
],
|
| 108 |
)
|
| 109 |
|
| 110 |
+
dumbbell = vm.Page(
|
| 111 |
+
title="Dumbbell",
|
| 112 |
+
path="distribution/dumbbell",
|
| 113 |
+
layout=vm.Layout(grid=PAGE_GRID),
|
| 114 |
+
components=[
|
| 115 |
+
vm.Card(
|
| 116 |
+
text="""
|
| 117 |
+
#### What is a dumbbell chart?
|
| 118 |
+
A dumbbell chart emphasizes the gap between two categorical groups. Each data point is depicted by a
|
| 119 |
+
symbol, typically a circle, representing its quantitative value. These symbols are connected by a line,
|
| 120 |
+
visually indicating the gap between the two points. Categories or groups are displayed along one axis,
|
| 121 |
+
while quantitative values are plotted along the other.
|
| 122 |
+
|
| 123 |
+
|
| 124 |
+
|
| 125 |
+
#### When should I use it?
|
| 126 |
+
Dumbbell charts are ideal for illustrating differences or gaps between two points. They are less cluttered
|
| 127 |
+
than bar charts, making it easier to compare groups. Common uses include comparing groups, such as showing
|
| 128 |
+
differences in performance metrics across various categories. Colors can be used to emphasize the direction
|
| 129 |
+
of changes or to distinguish between categories.
|
| 130 |
+
"""
|
| 131 |
+
),
|
| 132 |
+
vm.Graph(figure=dumbbell(salaries, y="Job", x="Salary", color="Range")),
|
| 133 |
+
make_code_clipboard_from_py_file("dumbbell.py"),
|
| 134 |
+
],
|
| 135 |
+
)
|
| 136 |
+
|
| 137 |
|
| 138 |
+
pages = [violin, boxplot, butterfly, dumbbell, histogram]
|
pages/examples/diverging_bar.py
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import pandas as pd
|
| 2 |
+
import plotly.io as pio
|
| 3 |
+
import vizro.models as vm
|
| 4 |
+
import vizro.plotly.express as px
|
| 5 |
+
from vizro import Vizro
|
| 6 |
+
|
| 7 |
+
pastries = pd.DataFrame(
|
| 8 |
+
{
|
| 9 |
+
"pastry": [
|
| 10 |
+
"Scones",
|
| 11 |
+
"Bagels",
|
| 12 |
+
"Muffins",
|
| 13 |
+
"Cakes",
|
| 14 |
+
"Donuts",
|
| 15 |
+
"Cookies",
|
| 16 |
+
"Croissants",
|
| 17 |
+
"Eclairs",
|
| 18 |
+
"Brownies",
|
| 19 |
+
"Tarts",
|
| 20 |
+
"Macarons",
|
| 21 |
+
"Pies",
|
| 22 |
+
],
|
| 23 |
+
"Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07],
|
| 24 |
+
}
|
| 25 |
+
)
|
| 26 |
+
|
| 27 |
+
page = vm.Page(
|
| 28 |
+
title="Diverging bar",
|
| 29 |
+
components=[
|
| 30 |
+
vm.Graph(
|
| 31 |
+
figure=px.bar(
|
| 32 |
+
pastries.sort_values("Profit Ratio"),
|
| 33 |
+
orientation="h",
|
| 34 |
+
x="Profit Ratio",
|
| 35 |
+
y="pastry",
|
| 36 |
+
color="Profit Ratio",
|
| 37 |
+
color_continuous_scale=pio.templates["vizro_dark"].layout.colorscale.diverging,
|
| 38 |
+
color_continuous_midpoint=0,
|
| 39 |
+
),
|
| 40 |
+
),
|
| 41 |
+
],
|
| 42 |
+
)
|
| 43 |
+
|
| 44 |
+
dashboard = vm.Dashboard(pages=[page])
|
| 45 |
+
Vizro().build(dashboard).run()
|
pages/examples/dumbbell.py
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import pandas as pd
|
| 2 |
+
import vizro.models as vm
|
| 3 |
+
import vizro.plotly.express as px
|
| 4 |
+
from plotly import graph_objects as go
|
| 5 |
+
from vizro import Vizro
|
| 6 |
+
from vizro.models.types import capture
|
| 7 |
+
|
| 8 |
+
salaries = pd.DataFrame(
|
| 9 |
+
{
|
| 10 |
+
"Job": ["Developer", "Analyst", "Manager", "Specialist"] * 2,
|
| 11 |
+
"Salary": [60000, 55000, 70000, 50000, 130000, 110000, 96400, 80000],
|
| 12 |
+
"Range": ["Min"] * 4 + ["Max"] * 4,
|
| 13 |
+
}
|
| 14 |
+
)
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
@capture("graph")
|
| 18 |
+
def dumbbell(data_frame: pd.DataFrame, x: str, y: str, color: str) -> go.Figure:
|
| 19 |
+
# Add two dots to plot
|
| 20 |
+
fig = px.scatter(data_frame, y=y, x=x, color=color)
|
| 21 |
+
|
| 22 |
+
# Add lines between dots
|
| 23 |
+
for y_value, group in data_frame.groupby(y):
|
| 24 |
+
fig.add_shape(
|
| 25 |
+
type="line",
|
| 26 |
+
layer="below",
|
| 27 |
+
y0=y_value,
|
| 28 |
+
y1=y_value,
|
| 29 |
+
x0=group[x].min(),
|
| 30 |
+
x1=group[x].max(),
|
| 31 |
+
line_color="grey",
|
| 32 |
+
line_width=3,
|
| 33 |
+
)
|
| 34 |
+
|
| 35 |
+
# Increase size of dots
|
| 36 |
+
fig.update_traces(marker_size=12)
|
| 37 |
+
return fig
|
| 38 |
+
|
| 39 |
+
|
| 40 |
+
page = vm.Page(
|
| 41 |
+
title="Dumbbell",
|
| 42 |
+
components=[vm.Graph(figure=dumbbell(salaries, y="Job", x="Salary", color="Range"))],
|
| 43 |
+
)
|
| 44 |
+
|
| 45 |
+
dashboard = vm.Dashboard(pages=[page])
|
| 46 |
+
Vizro().build(dashboard).run()
|
pages/examples/gantt.py
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import pandas as pd
|
| 2 |
+
import vizro.models as vm
|
| 3 |
+
import vizro.plotly.express as px
|
| 4 |
+
from vizro import Vizro
|
| 5 |
+
|
| 6 |
+
tasks = pd.DataFrame(
|
| 7 |
+
[
|
| 8 |
+
{"Task": "Job A", "Start": "2009-01-01", "Finish": "2009-02-28"},
|
| 9 |
+
{"Task": "Job B", "Start": "2009-03-05", "Finish": "2009-04-15"},
|
| 10 |
+
{"Task": "Job C", "Start": "2009-02-20", "Finish": "2009-05-30"},
|
| 11 |
+
]
|
| 12 |
+
)
|
| 13 |
+
|
| 14 |
+
|
| 15 |
+
page = vm.Page(
|
| 16 |
+
title="Gantt",
|
| 17 |
+
components=[
|
| 18 |
+
vm.Graph(px.timeline(tasks.sort_values("Start", ascending=False), x_start="Start", x_end="Finish", y="Task"))
|
| 19 |
+
],
|
| 20 |
+
)
|
| 21 |
+
|
| 22 |
+
dashboard = vm.Dashboard(pages=[page])
|
| 23 |
+
Vizro().build(dashboard).run()
|
pages/examples/radar.py
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import vizro.models as vm
|
| 2 |
+
import vizro.plotly.express as px
|
| 3 |
+
from vizro import Vizro
|
| 4 |
+
from vizro.models.types import capture
|
| 5 |
+
|
| 6 |
+
wind = px.data.wind()
|
| 7 |
+
|
| 8 |
+
|
| 9 |
+
@capture("graph")
|
| 10 |
+
def radar(data_frame, **kwargs):
|
| 11 |
+
"""Creates a radar chart using Plotly's line_polar."""
|
| 12 |
+
fig = px.line_polar(data_frame, **kwargs)
|
| 13 |
+
fig.update_traces(fill="toself")
|
| 14 |
+
return fig
|
| 15 |
+
|
| 16 |
+
|
| 17 |
+
page = vm.Page(
|
| 18 |
+
title="Radar",
|
| 19 |
+
components=[
|
| 20 |
+
vm.Graph(figure=radar(wind.query("strength == '1-2'"), r="frequency", theta="direction", line_close=True))
|
| 21 |
+
],
|
| 22 |
+
)
|
| 23 |
+
|
| 24 |
+
dashboard = vm.Dashboard(pages=[page])
|
| 25 |
+
Vizro().build(dashboard).run()
|
pages/examples/waterfall.py
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
from typing import List
|
| 2 |
+
|
| 3 |
+
import pandas as pd
|
| 4 |
+
import plotly.graph_objects as go
|
| 5 |
+
import vizro.models as vm
|
| 6 |
+
from vizro import Vizro
|
| 7 |
+
from vizro.models.types import capture
|
| 8 |
+
|
| 9 |
+
waterfall_data = pd.DataFrame(
|
| 10 |
+
{
|
| 11 |
+
"x": ["Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax"],
|
| 12 |
+
"y": [60, 80, 0, -40, -20, 0],
|
| 13 |
+
"measure": ["relative", "relative", "total", "relative", "relative", "total"],
|
| 14 |
+
}
|
| 15 |
+
)
|
| 16 |
+
|
| 17 |
+
|
| 18 |
+
@capture("graph")
|
| 19 |
+
def waterfall(
|
| 20 |
+
data_frame: pd.DataFrame,
|
| 21 |
+
x: str,
|
| 22 |
+
y: str,
|
| 23 |
+
measure: List[str],
|
| 24 |
+
):
|
| 25 |
+
fig = go.Figure(
|
| 26 |
+
go.Waterfall(
|
| 27 |
+
x=data_frame[x],
|
| 28 |
+
y=data_frame[y],
|
| 29 |
+
measure=data_frame[measure],
|
| 30 |
+
)
|
| 31 |
+
)
|
| 32 |
+
fig.update_layout(showlegend=False)
|
| 33 |
+
return fig
|
| 34 |
+
|
| 35 |
+
|
| 36 |
+
page = vm.Page(
|
| 37 |
+
title="Waterfall",
|
| 38 |
+
components=[
|
| 39 |
+
vm.Graph(
|
| 40 |
+
figure=waterfall(
|
| 41 |
+
waterfall_data,
|
| 42 |
+
x="x",
|
| 43 |
+
y="y",
|
| 44 |
+
measure="measure",
|
| 45 |
+
)
|
| 46 |
+
)
|
| 47 |
+
],
|
| 48 |
+
)
|
| 49 |
+
|
| 50 |
+
dashboard = vm.Dashboard(pages=[page])
|
| 51 |
+
Vizro().build(dashboard).run()
|
pages/flow.py
CHANGED
|
@@ -3,6 +3,7 @@
|
|
| 3 |
import vizro.models as vm
|
| 4 |
from custom_charts import sankey
|
| 5 |
|
|
|
|
| 6 |
from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, sankey_data
|
| 7 |
|
| 8 |
sankey = vm.Page(
|
|
@@ -44,4 +45,6 @@ sankey = vm.Page(
|
|
| 44 |
],
|
| 45 |
)
|
| 46 |
|
| 47 |
-
|
|
|
|
|
|
|
|
|
| 3 |
import vizro.models as vm
|
| 4 |
from custom_charts import sankey
|
| 5 |
|
| 6 |
+
from pages._factories import waterfall_factory
|
| 7 |
from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, sankey_data
|
| 8 |
|
| 9 |
sankey = vm.Page(
|
|
|
|
| 45 |
],
|
| 46 |
)
|
| 47 |
|
| 48 |
+
waterfall = waterfall_factory("flow")
|
| 49 |
+
|
| 50 |
+
pages = [sankey, waterfall]
|
pages/magnitude.py
CHANGED
|
@@ -2,8 +2,9 @@
|
|
| 2 |
|
| 3 |
import vizro.models as vm
|
| 4 |
import vizro.plotly.express as px
|
|
|
|
| 5 |
|
| 6 |
-
from pages._pages_utils import PAGE_GRID, gapminder, iris, make_code_clipboard_from_py_file, tips
|
| 7 |
|
| 8 |
bar = vm.Page(
|
| 9 |
title="Bar",
|
|
@@ -190,4 +191,27 @@ parallel_coordinates = vm.Page(
|
|
| 190 |
],
|
| 191 |
)
|
| 192 |
|
| 193 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2 |
|
| 3 |
import vizro.models as vm
|
| 4 |
import vizro.plotly.express as px
|
| 5 |
+
from custom_charts import radar
|
| 6 |
|
| 7 |
+
from pages._pages_utils import PAGE_GRID, gapminder, iris, make_code_clipboard_from_py_file, tips, wind
|
| 8 |
|
| 9 |
bar = vm.Page(
|
| 10 |
title="Bar",
|
|
|
|
| 191 |
],
|
| 192 |
)
|
| 193 |
|
| 194 |
+
radar = vm.Page(
|
| 195 |
+
path="magnitude/radar",
|
| 196 |
+
title="Radar",
|
| 197 |
+
layout=vm.Layout(grid=PAGE_GRID),
|
| 198 |
+
components=[
|
| 199 |
+
vm.Card(
|
| 200 |
+
text="""
|
| 201 |
+
#### What is a radar chart?
|
| 202 |
+
A radar chart, also known as a spider plot or star plot, is a type of data visualization
|
| 203 |
+
used to display multivariate data. It consists of three or more variables represented
|
| 204 |
+
on axes that originate from the same central point.
|
| 205 |
+
|
| 206 |
+
#### When should I use it?
|
| 207 |
+
Use a radar chart to compare performance or characteristics across multiple variables.
|
| 208 |
+
The chart effectively highlights strengths, weaknesses, patterns, and outliers.
|
| 209 |
+
To maintain clarity, use consistent scales for all axes and clearly mark labels and data points.
|
| 210 |
+
"""
|
| 211 |
+
),
|
| 212 |
+
vm.Graph(figure=radar(wind.query("strength == '1-2'"), r="frequency", theta="direction", line_close=True)),
|
| 213 |
+
make_code_clipboard_from_py_file("radar.py"),
|
| 214 |
+
],
|
| 215 |
+
)
|
| 216 |
+
|
| 217 |
+
pages = [bar, column, paired_bar, paired_column, parallel_coordinates, radar]
|
pages/part_to_whole.py
CHANGED
|
@@ -3,6 +3,7 @@
|
|
| 3 |
import vizro.models as vm
|
| 4 |
import vizro.plotly.express as px
|
| 5 |
|
|
|
|
| 6 |
from pages._pages_utils import PAGE_GRID, funnel_data, gapminder, make_code_clipboard_from_py_file, tips
|
| 7 |
|
| 8 |
pie = vm.Page(
|
|
@@ -203,5 +204,6 @@ funnel = vm.Page(
|
|
| 203 |
],
|
| 204 |
)
|
| 205 |
|
|
|
|
| 206 |
|
| 207 |
-
pages = [donut, pie, treemap, stacked_bar, stacked_column, funnel]
|
|
|
|
| 3 |
import vizro.models as vm
|
| 4 |
import vizro.plotly.express as px
|
| 5 |
|
| 6 |
+
from pages._factories import waterfall_factory
|
| 7 |
from pages._pages_utils import PAGE_GRID, funnel_data, gapminder, make_code_clipboard_from_py_file, tips
|
| 8 |
|
| 9 |
pie = vm.Page(
|
|
|
|
| 204 |
],
|
| 205 |
)
|
| 206 |
|
| 207 |
+
waterfall = waterfall_factory("part-to-whole")
|
| 208 |
|
| 209 |
+
pages = [donut, pie, treemap, stacked_bar, stacked_column, funnel, waterfall]
|
pages/time.py
CHANGED
|
@@ -5,7 +5,15 @@ import vizro.plotly.express as px
|
|
| 5 |
from custom_charts import categorical_column
|
| 6 |
|
| 7 |
from pages._factories import column_and_line_factory, connected_scatter_factory
|
| 8 |
-
from pages._pages_utils import
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
|
| 10 |
line = vm.Page(
|
| 11 |
title="Line",
|
|
@@ -160,4 +168,35 @@ heatmap = vm.Page(
|
|
| 160 |
make_code_clipboard_from_py_file("heatmap.py"),
|
| 161 |
],
|
| 162 |
)
|
| 163 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 5 |
from custom_charts import categorical_column
|
| 6 |
|
| 7 |
from pages._factories import column_and_line_factory, connected_scatter_factory
|
| 8 |
+
from pages._pages_utils import (
|
| 9 |
+
PAGE_GRID,
|
| 10 |
+
gapminder,
|
| 11 |
+
make_code_clipboard_from_py_file,
|
| 12 |
+
stepped_line_data,
|
| 13 |
+
stocks,
|
| 14 |
+
tasks,
|
| 15 |
+
tips,
|
| 16 |
+
)
|
| 17 |
|
| 18 |
line = vm.Page(
|
| 19 |
title="Line",
|
|
|
|
| 168 |
make_code_clipboard_from_py_file("heatmap.py"),
|
| 169 |
],
|
| 170 |
)
|
| 171 |
+
|
| 172 |
+
gantt = vm.Page(
|
| 173 |
+
title="Gantt",
|
| 174 |
+
path="time/gantt",
|
| 175 |
+
layout=vm.Layout(grid=PAGE_GRID),
|
| 176 |
+
components=[
|
| 177 |
+
vm.Card(
|
| 178 |
+
text="""
|
| 179 |
+
#### What is a gantt chart?
|
| 180 |
+
|
| 181 |
+
A gantt chart is a type of bar chart that visualizes a project schedule.
|
| 182 |
+
It shows the start and end dates of a project element, such as tasks, activities, or
|
| 183 |
+
events, in a timeline format. Each element is represented by a bar whose length indicates
|
| 184 |
+
its duration.
|
| 185 |
+
|
| 186 |
+
|
| 187 |
+
|
| 188 |
+
#### When should I use it?
|
| 189 |
+
|
| 190 |
+
Gantt charts are ideal for visualizing project timelines, tracking
|
| 191 |
+
progress, and managing dependencies. They clearly display task start and end dates, making
|
| 192 |
+
it easy to monitor project status and manage interdependencies. However, they can become
|
| 193 |
+
complex if not regularly updated, especially for large projects.
|
| 194 |
+
"""
|
| 195 |
+
),
|
| 196 |
+
vm.Graph(
|
| 197 |
+
figure=px.timeline(tasks.sort_values("Start", ascending=False), x_start="Start", x_end="Finish", y="Task")
|
| 198 |
+
),
|
| 199 |
+
make_code_clipboard_from_py_file("gantt.py"),
|
| 200 |
+
],
|
| 201 |
+
)
|
| 202 |
+
pages = [line, column, area, connected_scatter, column_and_line, stepped_line, heatmap, gantt]
|