Skip to content

Commit 220070c

Browse files
veghdevveghdev
authored
Merge pull request #274 from vizzuhq/release
Release 0.8
2 parents af76c30 + 79d1fc7 commit 220070c

File tree

6 files changed

+355
-11
lines changed

6 files changed

+355
-11
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
## [Unreleased]
44

5+
## [0.8.0] - 2023-07-12
6+
57
### Fixed
68

79
- Missing Area/line marker rewireing (on orientation change,

‎README.md‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,6 @@ We have a comprehensive list of features we plan to implement, on our
134134
We welcome contributions to the project, visit our
135135
[wiki page](https://github.com/vizzuhq/vizzu-lib/wiki) for further info.
136136

137-
Shortcuts:
138-
139-
- [Report an issue](https://github.com/vizzuhq/vizzu-lib/issues),
140-
- [Building](https://github.com/vizzuhq/vizzu-lib/blob/main/project/build.md)
141-
and [testing](https://github.com/vizzuhq/vizzu-lib/blob/main/test/test.md) the
142-
project.
143-
144137
## Contact
145138

146139
- Join our Slack:

‎docs/tutorial/aggregating_data.js‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
const dataLoaded = import("../assets/data/music_data.js");
2+
const mdChartLoaded = import("../assets/javascripts/mdchart.js");
3+
4+
Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
5+
const data = results[0].default;
6+
const MdChart = results[1].default;
7+
const mdchart = new MdChart(data, "./vizzu.js", "tutorial");
8+
9+
mdchart.create([
10+
{
11+
anims: [
12+
(chart) => {
13+
return chart.animate({
14+
config: {
15+
title: "Sum of all Popularity Values",
16+
},
17+
});
18+
},
19+
(chart) => {
20+
return chart.animate({
21+
config: {
22+
channels: {
23+
y: { set: "Popularity" },
24+
},
25+
},
26+
});
27+
},
28+
(chart) => {
29+
return chart.animate({
30+
config: {
31+
title: "Sum of Popularity by Genre",
32+
},
33+
});
34+
},
35+
(chart) => {
36+
return chart.animate({
37+
config: {
38+
channels: {
39+
x: { set: "Genres" },
40+
},
41+
},
42+
});
43+
},
44+
],
45+
},
46+
{
47+
anims: [
48+
(chart) => {
49+
return chart.animate({
50+
config: {
51+
title: "Minimum of Popularity by Genre",
52+
},
53+
});
54+
},
55+
(chart) => {
56+
return chart.animate({
57+
config: {
58+
channels: {
59+
y: { set: "min(Popularity)" },
60+
},
61+
},
62+
});
63+
},
64+
],
65+
},
66+
{
67+
anims: [
68+
(chart) => {
69+
return chart.animate({
70+
config: {
71+
title: "Maximum of Popularity by Genre",
72+
},
73+
});
74+
},
75+
(chart) => {
76+
return chart.animate({
77+
config: {
78+
channels: {
79+
y: { set: "max(Popularity)" },
80+
},
81+
},
82+
});
83+
},
84+
],
85+
},
86+
{
87+
anims: [
88+
(chart) => {
89+
return chart.animate({
90+
config: {
91+
title: "Mean of Popularity by Genre",
92+
},
93+
});
94+
},
95+
(chart) => {
96+
return chart.animate({
97+
config: {
98+
channels: {
99+
y: { set: "mean(Popularity)" },
100+
},
101+
},
102+
});
103+
},
104+
],
105+
},
106+
{
107+
anims: [
108+
(chart) => {
109+
return chart.animate({
110+
config: {
111+
title: "Count of items by Genre",
112+
},
113+
});
114+
},
115+
(chart) => {
116+
return chart.animate({
117+
config: {
118+
channels: {
119+
y: { set: "count()" },
120+
},
121+
},
122+
});
123+
},
124+
],
125+
},
126+
{
127+
anims: [
128+
(chart) => {
129+
return chart.animate({
130+
config: {
131+
title: "Distinct Kinds by Genre",
132+
},
133+
});
134+
},
135+
(chart) => {
136+
return chart.animate({
137+
config: {
138+
channels: {
139+
y: { set: "distinct(Kinds)" },
140+
},
141+
},
142+
});
143+
},
144+
],
145+
},
146+
{
147+
anims: [
148+
(chart) => {
149+
return chart.animate({
150+
config: {
151+
title: "Sum of Popularity by Genre",
152+
},
153+
});
154+
},
155+
(chart) => {
156+
return chart.animate({
157+
config: {
158+
channels: {
159+
y: { set: "sum(Popularity)" },
160+
},
161+
},
162+
});
163+
},
164+
],
165+
},
166+
]);
167+
});

‎docs/tutorial/aggregating_data.md‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
data_url: ../../assets/data/music_data.js
3+
---
4+
5+
# Aggregating data
6+
7+
The default logic of `Vizzu` is to show the sum of values that are in the
8+
categories added to a chart. So if we create a simple vertical bar chart by
9+
adding the `Popularity` measure to the y-axis, the height of the bar will be the
10+
sum of all `Popularity` values and when we add `Genres` to the x-axis, the
11+
height of the bars will be the sum of `Popularity` values in each category
12+
within `Genres`.
13+
14+
<div id="tutorial_01"></div>
15+
16+
??? info "Info - How to setup Vizzu"
17+
In `HTML`, create a placeholder element that will contain the rendered
18+
chart.
19+
20+
```html
21+
<html>
22+
<body>
23+
<div id="myVizzu">
24+
</div>
25+
</body>
26+
</html>
27+
28+
```
29+
30+
In `JavaScript`, initialize and configure the chart:
31+
32+
```javascript
33+
import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js'
34+
import data from 'https://lib.vizzuhq.com/latest/assets/data/music_data.js'
35+
36+
let chart = new Vizzu('myVizzu')
37+
38+
chart.initializing
39+
40+
chart.animate({
41+
data
42+
})
43+
```
44+
45+
```javascript
46+
chart.animate({
47+
config: {
48+
channels: {
49+
y: {
50+
set: ['Popularity']
51+
}
52+
}
53+
}
54+
})
55+
56+
chart.animate({
57+
config: {
58+
channels: {
59+
x: {
60+
set: ['Genres']
61+
}
62+
}
63+
}
64+
})
65+
```
66+
67+
Next to the default logic of sum, there are a handful of other aggregation
68+
logics that are available in `Vizzu`: `min`, `max`, `mean`, `count` and
69+
`distinct`. Let's go through them to see how they work.
70+
71+
Minimum value: the height of the bars show the minimum value in the `Popularity`
72+
measure in each of the `Genres`.
73+
74+
<div id="tutorial_02"></div>
75+
76+
```javascript
77+
chart.animate({
78+
config: {
79+
channels: {
80+
y: {
81+
set: ['min(Popularity)']
82+
}
83+
}
84+
}
85+
})
86+
```
87+
88+
Maximum value: the height of the bars show the maximum value in the `Popularity`
89+
measure in each of the `Genres`.
90+
91+
<div id="tutorial_03"></div>
92+
93+
```javascript
94+
chart.animate({
95+
config: {
96+
channels: {
97+
y: {
98+
set: ['max(Popularity)']
99+
}
100+
}
101+
}
102+
})
103+
```
104+
105+
Mean value: the height of the bars show the mean value of the `Popularity`
106+
measure in each of the `Genres`.
107+
108+
<div id="tutorial_04"></div>
109+
110+
```javascript
111+
chart.animate({
112+
config: {
113+
channels: {
114+
y: {
115+
set: ['mean(Popularity)']
116+
}
117+
}
118+
}
119+
})
120+
```
121+
122+
Count: the height of the bars show the number of items (rows if you will) in
123+
each of the `Genres`.
124+
125+
<div id="tutorial_05"></div>
126+
127+
```javascript
128+
chart.animate({
129+
config: {
130+
channels: {
131+
y: {
132+
set: ["count()"]
133+
}
134+
}
135+
}
136+
})
137+
```
138+
139+
Distinct: the height of the bars show the number of distinct categories of
140+
`Kinds` in each of the `Genres`.
141+
142+
!!! note
143+
Distinct aggregation logic relates to dimensions like `Genres` and not to
144+
measures like `Popularity`.
145+
146+
<div id="tutorial_06"></div>
147+
148+
```javascript
149+
chart.animate({
150+
config: {
151+
channels: {
152+
y: {
153+
set: ["distinct(Kinds)"]
154+
}
155+
}
156+
}
157+
})
158+
```
159+
160+
Sum: this is how you can get back to the default aggregation logic of `Vizzu`
161+
that sums the `Popularity` values in each of the `Genres`.
162+
163+
<div id="tutorial_07"></div>
164+
165+
```javascript
166+
chart.animate({
167+
config: {
168+
channels: {
169+
y: {
170+
set: ['sum(Popularity)']
171+
}
172+
}
173+
}
174+
})
175+
```
176+
177+
<script src="../aggregating_data.js"></script>

0 commit comments

Comments
 (0)