diff --git a/CHANGELOG.md b/CHANGELOG.md index db009896f..981057ace 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## [Unreleased] +## [0.8.0] - 2023-07-12 + ### Fixed - Missing Area/line marker rewireing (on orientation change, diff --git a/README.md b/README.md index c5a96933d..b807b319c 100644 --- a/README.md +++ b/README.md @@ -134,13 +134,6 @@ We have a comprehensive list of features we plan to implement, on our We welcome contributions to the project, visit our [wiki page](https://github.com/vizzuhq/vizzu-lib/wiki) for further info. -Shortcuts: - -- [Report an issue](https://github.com/vizzuhq/vizzu-lib/issues), -- [Building](https://github.com/vizzuhq/vizzu-lib/blob/main/project/build.md) - and [testing](https://github.com/vizzuhq/vizzu-lib/blob/main/test/test.md) the - project. - ## Contact - Join our Slack: diff --git a/docs/tutorial/aggregating_data.js b/docs/tutorial/aggregating_data.js new file mode 100644 index 000000000..353e57b25 --- /dev/null +++ b/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)" }, + }, + }, + }); + }, + ], + }, + ]); +}); diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md new file mode 100644 index 000000000..53facd514 --- /dev/null +++ b/docs/tutorial/aggregating_data.md @@ -0,0 +1,177 @@ +--- +data_url: ../../assets/data/music_data.js +--- + +# Aggregating data + +The default logic of `Vizzu` 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`. + +
+ +??? info "Info - How to setup Vizzu" + In `HTML`, create a placeholder element that will contain the rendered + chart. + + ```html + + +
+
+ + + + ``` + + In `JavaScript`, initialize and configure the chart: + + ```javascript + import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js' + import data from 'https://lib.vizzuhq.com/latest/assets/data/music_data.js' + + let chart = new Vizzu('myVizzu') + + chart.initializing + + chart.animate({ + data + }) + ``` + +```javascript +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 `Vizzu`: `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`. + +
+ +```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`. + +
+ +```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`. + +
+ +```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`. + +
+ +```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`. + +
+ +```javascript +chart.animate({ + config: { + channels: { + y: { + set: ["distinct(Kinds)"] + } + } + } +}) +``` + +Sum: this is how you can get back to the default aggregation logic of `Vizzu` +that sums the `Popularity` values in each of the `Genres`. + +
+ +```javascript +chart.animate({ + config: { + channels: { + y: { + set: ['sum(Popularity)'] + } + } + } +}) +``` + + diff --git a/docs/tutorial/data.md b/docs/tutorial/data.md index 21f4ba10d..4e795e015 100644 --- a/docs/tutorial/data.md +++ b/docs/tutorial/data.md @@ -36,7 +36,7 @@ of that: | Jazz | Hard | 78 | | Metal | Hard | 52 | | Pop | Smooth | 56 | -| Rock | Smooth | 36 | +| Rock | Experimental | 36 | | Jazz | Smooth | 174 | | Metal | Smooth | 121 | | Pop | Experimental | 127 | @@ -67,7 +67,7 @@ let data = { type: 'dimension', values: [ 'Hard', 'Hard', 'Hard', 'Hard', - 'Smooth', 'Smooth', 'Smooth', 'Smooth', + 'Smooth', 'Experimental', 'Smooth', 'Smooth', 'Experimental', 'Experimental', 'Experimental', 'Experimental' ] }, { @@ -98,7 +98,7 @@ let data = { ['Jazz', 'Hard', 78], ['Metal', 'Hard', 52], ['Pop', 'Smooth', 56], - ['Rock', 'Smooth', 36], + ['Rock', 'Experimental', 36], ['Jazz', 'Smooth', 174], ['Metal', 'Smooth', 121], ['Pop', 'Experimental', 127], @@ -126,6 +126,11 @@ Where records can be arrays as shown above or objects: Using data cube form: +!!! note + In the example below, the record `Rock,Experimental,36` has been replaced + with `Rock,Smooth,36` in order to illustrate that only data with same + dimensions can be used in the data cube form. + diff --git a/src/chart/main/version.cpp b/src/chart/main/version.cpp index b8e2d0378..7a512d846 100644 --- a/src/chart/main/version.cpp +++ b/src/chart/main/version.cpp @@ -1,5 +1,5 @@ #include "version.h" -const App::Version Vizzu::Main::version(0, 7, 2); +const App::Version Vizzu::Main::version(0, 8, 0); const char *Vizzu::Main::siteUrl = "https://vizzuhq.com/";
Genres