Changed: set Vizzu's version to 0.8.x, able to use data aggregating functions

docs/assets/data/music_data.csv

@@ -4,7 +4,7 @@ Rock,Hard,96
 Jazz,Hard,78
 Metal,Hard,52
 Pop,Smooth,56
-Rock,Smooth,36
+Rock,Experimental,36
 Jazz,Smooth,174
 Metal,Smooth,121
 Pop,Experimental,127

docs/assets/data/music_data.js

@@ -27,7 +27,7 @@ const data = {
         "Hard",
         "Hard",
         "Smooth",
-        "Smooth",
+        "Experimental",
         "Smooth",
         "Smooth",
         "Experimental",

docs/installation.md

@@ -25,8 +25,10 @@ pip install -U ipyvizzu
 ```
 
 !!! note
-    If you want to work with `pandas` `DataFrame` and `ipyvizzu`, you need to
-    install `pandas` or install it as an extra:
+    `ipyvizzu` has some extra dependencies such as `pandas` and `fugue`.
+
+    For example if you would like to work with `pandas` `DataFrame` and
+    `ipyvizzu`, you can install `pandas` as an extra:
 
     ```sh
     pip install ipyvizzu[pandas]

docs/tutorial/aggregating_data.js

@@ -0,0 +1,167 @@
+const dataLoaded = import("../assets/data/music_data.js");
+const mdChartLoaded = import("../assets/javascripts/mdchart.js");
+
+Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
+  const data = results[0].default;
+  const MdChart = results[1].default;
+  const mdchart = new MdChart(data, "./vizzu.js", "tutorial");
+
+  mdchart.create([
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Sum of all Popularity Values",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "Popularity" },
+              },
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Sum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                x: { set: "Genres" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Minimum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "min(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Maximum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "max(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Mean of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "mean(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Count of items by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "count()" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Distinct Kinds by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "distinct(Kinds)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "Sum of Popularity by Genre",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              channels: {
+                y: { set: "sum(Popularity)" },
+              },
+            },
+          });
+        },
+      ],
+    },
+  ]);
+});

docs/tutorial/aggregating_data.md

@@ -0,0 +1,147 @@
+---
+data_url: ../../assets/data/music_data.js
+---
+
+# Aggregating data
+
+The default logic of `ipyvizzu` is to show the sum of values that are in the
+categories added to a chart. So if we create a simple vertical bar chart by
+adding the `Popularity` measure to the y-axis, the height of the bar will be the
+sum of all `Popularity` values and when we add `Genres` to the x-axis, the
+height of the bars will be the sum of `Popularity` values in each category
+within `Genres`.
+
+<div id="tutorial_01"></div>
+
+??? info "Info - How to setup Chart"
+    ```python
+    import pandas as pd
+    from ipyvizzu import Chart, Data, Config
+
+    df = pd.read_csv(
+        "https://ipyvizzu.vizzuhq.com/latest/assets/data/music_data.csv"
+    )
+    data = Data()
+    data.add_df(df)
+
+    chart = Chart()
+
+    chart.animate(data)
+    ```
+
+```python
+chart.animate(Config({"channels": {"y": {"set": ["Popularity"]}}}))
+
+chart.animate(Config({"channels": {"x": {"set": ["Genres"]}}}))
+```
+
+Next to the default logic of sum, there are a handful of other aggregation
+logics that are available in `ipyvizzu`: `min`, `max`, `mean`, `count` and
+`distinct`. Let's go through them to see how they work.
+
+Minimum value: the height of the bars show the minimum value in the `Popularity`
+measure in each of the `Genres`.
+
+<div id="tutorial_02"></div>
+
+```javascript
+chart.animate(
+    Config({
+        "channels": {
+            "y": {
+                "set": ["min(Popularity)"]
+            }
+        }
+    })
+)
+```
+
+Maximum value: the height of the bars show the maximum value in the `Popularity`
+measure in each of the `Genres`.
+
+<div id="tutorial_03"></div>
+
+```javascript
+chart.animate(
+    Config({
+        "channels": {
+            "y": {
+                "set": ["max(Popularity)"]
+            }
+        }
+    })
+)
+```
+
+Mean value: the height of the bars show the mean value of the `Popularity`
+measure in each of the `Genres`.
+
+<div id="tutorial_04"></div>
+
+```javascript
+chart.animate(
+    Config({
+        "channels": {
+            "y": {
+                "set": ["mean(Popularity)"]
+            }
+        }
+    })
+)
+```
+
+Count: the height of the bars show the number of items (rows if you will) in
+each of the `Genres`.
+
+<div id="tutorial_05"></div>
+
+```javascript
+chart.animate(
+    Config({
+        "channels": {
+            "y": {
+                "set": ["count()"]
+            }
+        }
+    })
+)
+```
+
+Distinct: the height of the bars show the number of distinct categories of
+`Kinds` in each of the `Genres`.
+
+!!! note
+    Distinct aggregation logic relates to dimensions like `Genres` and not to
+    measures like `Popularity`.
+
+<div id="tutorial_06"></div>
+
+```javascript
+chart.animate(
+    Config({
+        "channels": {
+            "y": {
+                "set": ["distinct(Kinds)"]
+            }
+        }
+    })
+)
+```
+
+Sum: this is how you can get back to the default aggregation logic of `ipyvizzu`
+that sums the `Popularity` values in each of the `Genres`.
+
+<div id="tutorial_07"></div>
+
+```javascript
+chart.animate(
+        Config({
+            "channels": {
+                "y": {
+                    "set": ["sum(Popularity)"]
+                }
+            }
+        })
+```
+
+<script src="../aggregating_data.js"></script>

docs/tutorial/color_palette_fonts.md

@@ -110,6 +110,6 @@ chart.animate(Style(None))
 
 For information on all available style parameters see the [Style](./style.md)
 chapter or the
-[Vizzu Code reference](https://lib.vizzuhq.com/latest/reference/interfaces/vizzu.Styles.Chart/#properties).
+[Vizzu Code reference](https://lib.vizzuhq.com/latest/reference/interfaces/Styles.Chart/#properties).
 
 <script src="../color_palette_fonts.js"></script>