Add butterfly chart

vizro-core/examples/_charts/app.py

@@ -16,7 +16,9 @@
 from utils._pages import (
     bar,
     boxplot,
+    butterfly_page,
     column,
+    distribution_butterfly,
     donut,
     line,
     magnitude_treemap,
@@ -69,14 +71,16 @@
         time_column,
         treemap,
         magnitude_treemap,
+        butterfly_page,
+        distribution_butterfly,
     ],
     navigation=vm.Navigation(
         nav_selector=vm.NavBar(
             items=[
                 vm.NavLink(label="Overview", pages=["Overview"], icon="Home"),
                 vm.NavLink(
                     label="Deviation",
-                    pages={"Deviation": ["Line", "Scatter"]},  # Replace with diverging bar
+                    pages={"Deviation": ["Butterfly"]},
                     icon="Planner Review",
                 ),
                 vm.NavLink(
@@ -91,7 +95,7 @@
                 ),
                 vm.NavLink(
                     label="Distribution",
-                    pages={"Distribution": ["Boxplot", "Violin"]},
+                    pages={"Distribution": ["Boxplot", "Violin", "Distribution-Butterfly"]},
                     icon="Waterfall Chart",
                 ),
                 vm.NavLink(

vizro-core/examples/_charts/utils/_containers.py

@@ -21,7 +21,7 @@ def tidy_chart_title(chart: str) -> str:
     return chart_without_prefix.replace("-", " ").title()
 
 
-DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"])
+DEVIATION_CHARTS = sorted(["diverging-bar", "butterfly", "slope", "lollipop"])
 CORRELATION_CHARTS = ["scatter"]
 RANKING_CHARTS = sorted(
     [
@@ -41,7 +41,7 @@ def tidy_chart_title(chart: str) -> str:
 DISTRIBUTION_CHARTS = sorted(
     [
         "histogram",
-        "butterfly",
+        "distribution-butterfly",
         "pie",
         "donut",
         "arc",
@@ -61,7 +61,6 @@ def tidy_chart_title(chart: str) -> str:
         "ordered-bubble",
         "column-line",
         "surplus",
-        "butterfly",
         "bubble-timeline",
         "bar",
         "pie",

vizro-core/examples/_charts/utils/_pages.py

@@ -1,7 +1,10 @@
 """Contains custom components and charts used inside the dashboard."""
 
+import pandas as pd
+import plotly.graph_objects as go
 import vizro.models as vm
 import vizro.plotly.express as px
+from vizro.models.types import capture
 
 from ._components import CodeClipboard, FlexContainer, Markdown
 
@@ -13,12 +16,42 @@
 stocks = px.data.stocks()
 tips = px.data.tips()
 tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
+ages = pd.DataFrame(
+    {
+        "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"],
+        "Male": [800, 2000, 4200, 5000, 2100, 800],
+        "Female": [1000, 3000, 3500, 3800, 3600, 700],
+    }
+)
 
 vm.Page.add_type("components", CodeClipboard)
 vm.Page.add_type("components", FlexContainer)
 vm.Container.add_type("components", Markdown)
 
 
+@capture("graph")
+def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str):
+    fig = go.Figure()
+    fig.add_trace(
+        go.Bar(
+            x=-data_frame[x1].values,
+            y=data_frame[y],
+            orientation="h",
+            name=x1,
+        )
+    )
+    fig.add_trace(
+        go.Bar(
+            x=data_frame[x2],
+            y=data_frame[y],
+            orientation="h",
+            name=x2,
+        )
+    )
+    fig.update_layout(barmode="relative")
+    return fig
+
+
 # All functions ending with `_factory` are there to reuse the existing content of a page. Given the restriction that
 # one page can only be mapped to one navigation group, we have to create a new page with a new ID.
 def line_factory(id: str, title: str):
@@ -339,6 +372,84 @@ def treemap_factory(id: str, title: str):
     )
 
 
+def butterfly_factory(id: str, title: str):
+    return vm.Page(
+        id=id,
+        title=title,
+        layout=vm.Layout(grid=PAGE_GRID),
+        components=[
+            vm.Card(
+                text="""
+
+                #### What is a butterfly chart?
+
+                A butterfly chart (also called a tornado chart) is a bar chart for displaying two sets of data series
+                side by side.
+
+                 
+
+                #### When to use it?
+
+                Use a butterfly chart when you wish to emphasise the comparison between two data sets sharing the same
+                parameters. Sharing this chart with your audience will help them see at a glance how two groups differ
+                within the same parameters. You can also **stack** two bars on each side if you wish to divide your
+                categories.
+            """
+            ),
+            vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age")),
+            CodeClipboard(
+                text="""
+                    ```python
+                    import vizro.models as vm
+                    from vizro import Vizro
+                    import pandas as pd
+                    from vizro.models.types import capture
+                    import plotly.graph_objects as go
+
+                    ages = pd.DataFrame(
+                        {
+                            "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"],
+                            "Male": [800, 2000, 4200, 5000, 2100, 800],
+                            "Female": [1000, 3000, 3500, 3800, 3600, 700],
+                        }
+                    )
+
+
+                    @capture("graph")
+                    def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str):
+                        fig = go.Figure()
+                        fig.add_trace(
+                            go.Bar(
+                                x=-data_frame[x1].values, y=data_frame[y], orientation="h", name=x1,
+                            )
+                        )
+                        fig.add_trace(
+                            go.Bar(x=data_frame[x2], y=data_frame[y], orientation="h", name=x2,)
+                        )
+                        fig.update_layout(barmode="relative")
+                        return fig
+
+
+                    dashboard = vm.Dashboard(
+                        pages=[
+                            vm.Page(
+                                title="Butterfly",
+                                components=[
+                                    vm.Graph(
+                                        figure=butterfly(ages, x1="Male", x2="Female", y="Age")
+                                    )
+                                ],
+                            )
+                        ]
+                    )
+                    Vizro().build(dashboard).run()
+                    ```
+                    """
+            ),
+        ],
+    )
+
+
 # PAGES -------------------------------------------------------------
 line = line_factory("Line", "Line")
 time_line = line_factory("Time-Line", "Line")
@@ -350,6 +461,8 @@ def treemap_factory(id: str, title: str):
 ordered_column = column_factory("Ordered Column", "Ordered Column")
 treemap = treemap_factory("Treemap", "Treemap")
 magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap")
+butterfly_page = butterfly_factory("Butterfly", "Butterfly")
+distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly")
 
 
 pie = vm.Page(