Tidy

vizro-core/examples/_dev/app.py

@@ -29,14 +29,14 @@
 
 
 dashboard = vm.Dashboard(
-    pages=[homepage, bar, column, line],
+    pages=[homepage, bar, column, line, scatter],
     navigation=vm.Navigation(
         nav_selector=vm.NavBar(
             items=[
                 vm.NavLink(label="Overview", pages=["Overview"], icon="Home"),
                 vm.NavLink(
                     label="Deviation",
-                    pages={"Deviation": ["Line"]},
+                    pages={"Deviation": ["Line", "Scatter"]},
                     icon="Stacked Line Chart",
                 ),
                 vm.NavLink(

vizro-core/examples/_dev/assets/css/custom.css

@@ -66,3 +66,7 @@ code.language-python.hljs {
   font-size: 16px;
   line-height: 20px;
 }
+
+#left-main {
+  width: 288px;
+}

vizro-core/examples/_dev/utils/_deviation.py

@@ -7,6 +7,7 @@
 
 gapminder = px.data.gapminder()
 iris = px.data.iris()
+stocks = px.data.stocks()
 vm.Page.add_type("components", CodeClipboard)
 vm.Page.add_type("components", FlexContainer)
 vm.Container.add_type("components", Markdown)
@@ -15,20 +16,19 @@
 line = vm.Page(
     title="Line",
     layout=vm.Layout(
-        grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4,
-        col_gap="80px",
+        grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2,
     ),
     components=[
         vm.Card(
             text="""
 
-            ### What is a Line?
+            #### What is a Line?
 
             A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines.
 
              
 
-            ### When to use it?
+            #### When to use it?
 
             You should select a Line chart when you want to show trends and invite analysis of how the data has changed
             over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale
@@ -37,9 +37,7 @@
             up your chart and making it harder for the audience to read.
         """
         ),
-        vm.Graph(
-            figure=px.line(gapminder, x="year", y="lifeExp", color="continent")
-        ),
+        vm.Graph(figure=px.line(stocks, x="date", y="GOOG")),
         CodeClipboard(
             text="""
                ```python
@@ -50,10 +48,10 @@
                gapminder = px.data.gapminder()
 
                page = vm.Page(
-                   title="Scatter",
+                   title="Line",
                    components=[
                        vm.Graph(
-                            figure=px.line(gapminder, x="year", y="lifeExp", color="continent")
+                            figure=px.line(stocks, x="date", y="GOOG")
                         )
                     ],
                )
@@ -71,21 +69,19 @@
 scatter = vm.Page(
     title="Scatter",
     layout=vm.Layout(
-        grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4,
-        col_gap="80px",
+        grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2,
     ),
     components=[
         vm.Card(
             text="""
 
-            ### What is a scatter?
-
+            #### What is a scatter?
 
             A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis.
 
              
 
-            ### When to use it?
+            #### When to use it?
 
             Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions.
         """

vizro-core/examples/_dev/utils/_magnitude.py

@@ -6,6 +6,7 @@
 from ._charts import CodeClipboard, FlexContainer, Markdown
 
 gapminder = px.data.gapminder()
+tips = px.data.tips()
 vm.Page.add_type("components", CodeClipboard)
 vm.Page.add_type("components", FlexContainer)
 vm.Container.add_type("components", Markdown)
@@ -14,22 +15,21 @@
 bar = vm.Page(
     title="Bar",
     layout=vm.Layout(
-        grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4,
-        col_gap="80px",
+        grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2,
     ),
     components=[
         vm.Card(
             text="""
 
-            ### What is a bar chart?
+            #### 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.
 
              
 
-            ### When to use the bar chart?
+            #### When to use the bar chart?
 
             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
@@ -40,7 +40,14 @@
         """
         ),
         vm.Graph(
-            figure=px.bar(data_frame=gapminder.query("country == 'China'"), y="year", x="lifeExp", orientation="h")
+            figure=px.bar(
+                data_frame=tips.groupby("day")
+                .agg({"total_bill": "sum"})
+                .reset_index(),
+                x="total_bill",
+                y="day",
+                orientation="h",
+            )
         ),
         CodeClipboard(
             text="""
@@ -49,12 +56,14 @@
                import vizro.plotly.express as px
                from vizro import Vizro
 
-               gapminder = px.data.gapminder()
+               tips = px.data.tips()
 
                page = vm.Page(
                    title="Bar",
                    components=[
-                      vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop"))
+                     vm.Graph(
+            figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h")
+        )
                    ]
                )
 
@@ -71,21 +80,20 @@
 column = vm.Page(
     title="Column",
     layout=vm.Layout(
-        grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4,
-        col_gap="80px",
+        grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2,
     ),
     components=[
         vm.Card(
             text="""
 
-            ### What is a column chart?
+            #### 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.
 
              
 
-            ### When to use the column chart?
+            #### When to use the column chart?
 
             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
@@ -95,7 +103,13 @@
 
         """
         ),
-        vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="lifeExp")),
+        vm.Graph(
+            figure=px.bar(
+                data_frame=gapminder.query("country == 'China'"),
+                x="year",
+                y="gdpPercap",
+            )
+        ),
         CodeClipboard(
             text="""
                ```python
@@ -108,7 +122,11 @@
                page = vm.Page(
                    title="Column",
                    components=[
-                      vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="pop"))
+                      vm.Graph(
+                          figure=px.bar(
+                              data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap"
+                          )
+                      )
                    ]
                )