-
Notifications
You must be signed in to change notification settings - Fork 150
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Demo] Add diverging bar to visual-vocabulary (#792)
Co-authored-by: Li Nguyen <[email protected]>
- Loading branch information
1 parent
d21f8cb
commit 3ca9193
Showing
7 changed files
with
198 additions
and
13 deletions.
There are no files selected for viewing
48 changes: 48 additions & 0 deletions
48
vizro-core/changelog.d/20241010_124528_90609403+huong-li-nguyen_vizro_ivy.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!-- | ||
| A new scriv changelog fragment. | ||
| Uncomment the section that is right (remove the HTML comment wrapper). | ||
| --> | ||
|
|
||
| <!-- | ||
| ### Highlights ✨ | ||
| - A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> | ||
| <!-- | ||
| ### Removed | ||
| - A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> | ||
| <!-- | ||
| ### Added | ||
| - A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> | ||
| <!-- | ||
| ### Changed | ||
| - A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> | ||
| <!-- | ||
| ### Deprecated | ||
| - A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> | ||
| <!-- | ||
| ### Fixed | ||
| - A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> | ||
| <!-- | ||
| ### Security | ||
| - A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1)) | ||
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,49 @@ | ||
| """Dev app to try things out.""" | ||
|
|
||
| import pandas as pd | ||
| import vizro.models as vm | ||
| import vizro.plotly.express as px | ||
| from vizro import Vizro | ||
| from vizro._themes._color_values import COLORS | ||
|
|
||
| pastry = pd.DataFrame( | ||
| { | ||
| "pastry": [ | ||
| "Scones", | ||
| "Bagels", | ||
| "Muffins", | ||
| "Cakes", | ||
| "Donuts", | ||
| "Cookies", | ||
| "Croissants", | ||
| "Eclairs", | ||
| "Brownies", | ||
| "Tarts", | ||
| "Macarons", | ||
| "Pies", | ||
| ], | ||
| "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], | ||
| } | ||
| ) | ||
|
|
||
| df = px.data.iris() | ||
|
|
||
| page = vm.Page( | ||
| title="Page with asfsadfsadf", | ||
| layout=vm.Layout(grid=[[0, 1]]), | ||
| title="Diverging bar", | ||
| components=[ | ||
| vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")), | ||
| vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")), | ||
| ], | ||
| controls=[ | ||
| vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])), | ||
| vm.Graph( | ||
| figure=px.bar( | ||
| pastry.sort_values("Profit Ratio"), | ||
| orientation="h", | ||
| x="Profit Ratio", | ||
| y="pastry", | ||
| color="Profit Ratio", | ||
| color_continuous_scale=COLORS["DIVERGING_RED_CYAN"], | ||
| ), | ||
| ), | ||
| ], | ||
| ) | ||
|
|
||
| dashboard = vm.Dashboard(pages=[page], navigation=vm.Navigation(nav_selector=vm.NavBar())) | ||
| dashboard = vm.Dashboard(pages=[page]) | ||
|
|
||
| if __name__ == "__main__": | ||
| Vizro(serve_locally=False).build(dashboard).run() | ||
| Vizro().build(dashboard).run() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,54 @@ | ||
| """Deviation charts.""" | ||
|
|
||
| import plotly.io as pio | ||
| import vizro.models as vm | ||
| import vizro.plotly.express as px | ||
|
|
||
| from pages._factories import butterfly_factory | ||
| from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, pastries | ||
|
|
||
| butterfly = butterfly_factory("deviation") | ||
|
|
||
| pages = [butterfly] | ||
|
|
||
| diverging_bar = vm.Page( | ||
| title="Diverging bar", | ||
| path="deviation/diverging-bar", | ||
| layout=vm.Layout(grid=PAGE_GRID), | ||
| components=[ | ||
| vm.Card( | ||
| text=""" | ||
| #### What is a diverging bar? | ||
| A diverging bar chart is a version of a bar chart used to display both positive and negative values across | ||
| a common baseline. Bars extend either to the left or right of the central axis, indicating negative or | ||
| positive values, respectively. This allows for easy comparison of data points that deviate in opposite | ||
| directions. | ||
| | ||
| #### When should I use it? | ||
| Use a diverging bar chart to compare positive and negative values from a central baseline. These charts are | ||
| suitable for visualizing profit and loss, survey results, and performance metrics. Apply color coding | ||
| effectively, using distinct colors for positive and negative values to quickly distinguish categories. | ||
| Alternatively, use a continuous diverging color scale for a more nuanced view, especially with a wide range | ||
| of values. Ensure a consistent scale on both sides of the baseline to avoid misleading interpretations. | ||
| """ | ||
| ), | ||
| vm.Graph( | ||
| figure=px.bar( | ||
| pastries.sort_values("Profit Ratio"), | ||
| orientation="h", | ||
| x="Profit Ratio", | ||
| y="pastry", | ||
| color="Profit Ratio", | ||
| color_continuous_scale=pio.templates["vizro_dark"].layout.colorscale.diverging, | ||
| color_continuous_midpoint=0, | ||
| ), | ||
| ), | ||
| make_code_clipboard_from_py_file("diverging_bar.py"), | ||
| ], | ||
| ) | ||
|
|
||
| pages = [butterfly, diverging_bar] |
45 changes: 45 additions & 0 deletions
45
vizro-core/examples/visual-vocabulary/pages/examples/diverging_bar.py
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import pandas as pd | ||
| import plotly.io as pio | ||
| import vizro.models as vm | ||
| import vizro.plotly.express as px | ||
| from vizro import Vizro | ||
|
|
||
| pastries = pd.DataFrame( | ||
| { | ||
| "pastry": [ | ||
| "Scones", | ||
| "Bagels", | ||
| "Muffins", | ||
| "Cakes", | ||
| "Donuts", | ||
| "Cookies", | ||
| "Croissants", | ||
| "Eclairs", | ||
| "Brownies", | ||
| "Tarts", | ||
| "Macarons", | ||
| "Pies", | ||
| ], | ||
| "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], | ||
| } | ||
| ) | ||
|
|
||
| page = vm.Page( | ||
| title="Diverging bar", | ||
| components=[ | ||
| vm.Graph( | ||
| figure=px.bar( | ||
| pastries.sort_values("Profit Ratio"), | ||
| orientation="h", | ||
| x="Profit Ratio", | ||
| y="pastry", | ||
| color="Profit Ratio", | ||
| color_continuous_scale=pio.templates["vizro_dark"].layout.colorscale.diverging, | ||
| color_continuous_midpoint=0, | ||
| ), | ||
| ), | ||
| ], | ||
| ) | ||
|
|
||
| dashboard = vm.Dashboard(pages=[page]) | ||
| Vizro().build(dashboard).run() |