Create different examples for bar / column

vizro-core/examples/_chart-gallery/README.md

@@ -11,7 +11,7 @@ FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, B
 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                |

vizro-core/examples/_chart-gallery/app.py

@@ -90,8 +90,9 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink:
     ],
 )
 
-# TODO: consider whether each chart group should have its own individual homepage, e.g. at http://localhost:8050/deviation/.
-# This could just repeat the content of the tab from the homepage and would work nicely with the hierarchical navigation.
+# TODO: consider whether each chart group should have its own individual homepage,
+# e.g. at http://localhost:8050/deviation/. This could just repeat the content of the tab from the homepage and would
+# work nicely with the hierarchical navigation.
 dashboard = vm.Dashboard(
     # ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly.
     title="Vizro - Chart Gallery",

vizro-core/examples/_chart-gallery/assets/css/custom.css

@@ -35,7 +35,6 @@ img[src*="#chart-icon"] {
   gap: 20px;
 }
 
-
 .flex-container h4 {
   color: var(--text-secondary);
   margin: 0;
@@ -67,7 +66,6 @@ img[src*="#chart-icon"] {
   line-height: 20px;
 }
 
-
 /*
 .navbar .nav-link.active {
   border-right: 1px solid var(--border-enabled);

vizro-core/examples/_chart-gallery/pages/_factories.py

@@ -11,11 +11,6 @@
 from pages._pages_utils import PAGE_GRID, ages, make_code_clipboard_from_py_file, tips_agg
 
 
-# TODO: this is currently identical to ordered column. It should be:
-#  - unordered (currently ordering is done in tips_agg)
-#  - different svg
-#  - slightly different text
-#  - slightly different example
 def column_factory(group: str):
     """Reusable function to create the page content for the column chart with a unique ID."""
     return vm.Page(
@@ -28,18 +23,17 @@ def column_factory(group: str):
                 text="""
                 #### What is a column chart?
 
-                A column chart is a vertical bar chart, with column lengths varying according to the
-                categorical value they represent. The scale is presented on the y-axis, starting with zero.
+                A column chart is a vertical bar chart with column lengths varying by the categorical value they
+                represent, using a y-axis scale starting from zero.
 
                  
 
                 #### When should I use it?
 
-                Select a column chart when you want to help your audience draw size comparisons and identify
-                patterns between categorical data, i.e., data that presents **how many?** in each category. You can
-                arrange your columns in any order to fit the message you wish to emphasize. Be mindful of
-                labeling clearly when you have a large number of columns. You may need to include a legend,
-                or use abbreviations in the chart with fuller descriptions below of the terms used.
+                Use a column chart to help your audience compare sizes and identify patterns in categorical data,
+                such as **how many?** in each category. Arrange the columns in any order to fit the message you want
+                to emphasize. Ensure clear labeling, especially with many columns, and consider using a legend or
+                abbreviations with fuller descriptions below.
         """
             ),
             vm.Graph(

vizro-core/examples/_chart-gallery/pages/_pages_utils.py

@@ -26,7 +26,8 @@ def make_code_clipboard_from_py_file(filepath: str):
 iris = px.data.iris()
 stocks = px.data.stocks()
 tips = px.data.tips()
-tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
+tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).reset_index()
+tips_sorted = 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"],

vizro-core/examples/_chart-gallery/pages/examples/bar.py

@@ -3,7 +3,7 @@
 from vizro import Vizro
 
 tips = px.data.tips()
-tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
+tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).reset_index()
 
 page = vm.Page(
     title="Bar",

vizro-core/examples/_chart-gallery/pages/examples/column.py

@@ -3,7 +3,7 @@
 from vizro import Vizro
 
 tips = px.data.tips()
-tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
+tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).reset_index()
 
 page = vm.Page(
     title="Column",

vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py

@@ -3,11 +3,11 @@
 from vizro import Vizro
 
 tips = px.data.tips()
-tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
+tips_sorted = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
 
 page = vm.Page(
     title="Bar",
-    components=[vm.Graph(figure=px.bar(tips_agg, x="total_bill", y="day", orientation="h"))],
+    components=[vm.Graph(figure=px.bar(tips_sorted, x="total_bill", y="day", orientation="h"))],
 )
 
 dashboard = vm.Dashboard(pages=[page])

vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py

@@ -3,11 +3,11 @@
 from vizro import Vizro
 
 tips = px.data.tips()
-tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
+tips_sorted = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index()
 
 page = vm.Page(
     title="Column",
-    components=[vm.Graph(figure=px.bar(tips_agg, y="total_bill", x="day"))],
+    components=[vm.Graph(figure=px.bar(tips_sorted, y="total_bill", x="day"))],
 )
 
 dashboard = vm.Dashboard(pages=[page])

vizro-core/examples/_chart-gallery/pages/magnitude.py

@@ -6,11 +6,6 @@
 from pages._factories import column_factory
 from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg
 
-# TODO: this is currently identical to ordered bar. It should be:
-#  - unordered (currently ordering is done in tips_agg)
-#  - different svg
-#  - slightly different text
-#  - slightly different example
 bar = vm.Page(
     title="Bar",
     path="magnitude/bar",
@@ -21,19 +16,17 @@
 
             #### What is a bar chart?
 
-            A bar chart displays bars in lengths proportional to the values they represent. One axis of
-            the chart shows the categories to compare and the other axis provides a value scale,
-            starting with zero.
+            A bar chart displays bars with lengths proportional to the values they represent. One axis shows the
+            categories to compare, and the other provides a value scale starting from zero.
 
              
 
             #### When should I use it?
 
-            Select a bar chart when you want to help your audience draw size comparisons and identify
-            patterns between categorical data, i.e., data that presents **how many?** in each category. You can
-            arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling
-            clearly when you have a large number of bars. You may need to include a legend,
-            or use abbreviations in the chart with fuller descriptions below of the terms used.
+            Use a bar chart to help your audience compare sizes and identify patterns in categorical data, such as 
+            **how many?** in each category. Arrange the bars in any order to fit the message you want to emphasize. 
+            Ensure clear labeling, especially with many bars, and consider using a legend or abbreviations with fuller
+            descriptions below.
         """
         ),
         vm.Graph(