Skip to content

Commit 84a7a32

Browse files
committed
Merge branch 'main' of github.com:vizzuhq/vizzu-lib into main
2 parents e5d5e56 + 881021a commit 84a7a32

File tree

13 files changed

+68
-61
lines changed

13 files changed

+68
-61
lines changed

FAQ.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
# FAQ
22

3-
## How to use Vizzu with React?
3+
## How to use Vizzu with Webpack, React, Vite and other bundlers/frameworks?
44

5-
Here you can find a tutorial and a complete example on how to use Vizzu with React:
5+
Here's a tutorial and an example:
66

7-
https://github.com/vizzuhq/vizzu-react-example
7+
https://github.com/vizzuhq/vizzu-lib/blob/main/docs/content/tutorial/0-intro.md#working-with-bundlers-changing-the-location-of-the-wasm-module
88

9-
https://vizzuhq.github.io/vizzu-react-example/
9+
## Why on(), off(), feature() methods fail after constructor call?
10+
11+
The Vizzu constructor has to load Vizzu's WebAssembly module asynchronously to prevent blocking the whole page.
12+
Because of this, any method except `animate()` will throw an exception while the library is not initialized.
13+
14+
There is an `initializing` promise in the Vizzu class, which will resolve when initialization is finished. You can call all methods after
15+
this promise is resolved.
16+
17+
## How to load data from CSV into Vizzu?
18+
19+
This example reads the data from a CSV: https://lib.vizzuhq.com/0.3.0/content/howtos/csv-input/
20+
21+
You can find the source here; the CSV loading part is in the csv-input.js file: https://github.com/vizzuhq/vizzu-lib-doc/tree/main/docs/0.3.0/content/howtos/csv-input

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
</a>
55
<p align="center"><b>Vizzu</b> - Library for animated data visualizations and data stories.</p>
66
<p align="center">
7-
<a href="https://lib.vizzuhq.com/0.4/">Tutorial & Examples</a>
8-
· <a href="https://lib.vizzuhq.com/0.4/reference">Reference</a>
7+
<a href="https://lib.vizzuhq.com/latest/">Tutorial & Examples</a>
8+
· <a href="https://lib.vizzuhq.com/latest/reference">Reference</a>
99
· <a href="https://github.com/vizzuhq/vizzu-lib">Repository</a>
1010
</p>
1111
</p>
@@ -83,7 +83,7 @@ chart.animate({
8383
geometry: 'circle'
8484
});
8585
```
86-
[Try it!](https://jsfiddle.net/VizzuHQ/dk7b86vc/51/)
86+
[Try it!](https://jsfiddle.net/VizzuHQ/dk7b86vc)
8787

8888
![Example chart](https://vizzuhq.github.io/vizzu-lib-doc/readme/example.gif)
8989

@@ -113,4 +113,4 @@ We welcome contributions to the project, visit our [wiki page](https://github.co
113113

114114
Copyright © 2022 [Vizzu Kft.](https://vizzuhq.com).
115115

116-
Released under the [Apache 2.0 License](LICENSE).
116+
Released under the [Apache 2.0 License](https://github.com/vizzuhq/vizzu-lib/blob/main/LICENSE).

docs/content/tutorial/0-intro.md

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,26 +48,20 @@ chart.initializing.then(
4848
)
4949
```
5050

51-
### Working with Bundlers, changing the location of the WASM module
51+
### Working with bundlers & frameworks
5252

5353
The published Vizzu package contains a Javascript (*vizzu.min.js*) and a
54-
WebAssembly (*cvizzu.wasm*) module. By default, the Javascript module tries to
55-
load the wasm module from the same path, it was imported from.
54+
WebAssembly (*cvizzu.wasm*) module. By default, the Javascript module tries to load the wasm module from the same path it was imported from.
5655

57-
This behaviour won't work well with bundlers, if they move the wasm file to a
58-
different folder. To handle this case, the location of the wasm module can be
59-
set for the library.
56+
This behavior won't work with bundlers if they move the wasm file to a different folder. To handle this issue, you can manually set the wasm module's location.
6057

6158
```Javascript { "run": false }
6259
Vizzu.options({ wasmUrl: "/path/to/cvizzu.wasm" })
6360
```
6461

65-
> Note: this should be set before the Vizzu constructor called, since it will
66-
> load the wasm module.
62+
> Note: you should set this path before the Vizzu constructor is called because it loads the wasm module.
6763
68-
Different Bundlers will need additional bundler specific settings to recognize
69-
the wasm file as dependency and to handle it correctly. For setting up Vizzu
70-
with a specific bundler or framework, see the corresponding howto/example below:
64+
Different bundlers will need additional, specific settings to recognize the wasm file as a dependency and handle it correctly. For setting up Vizzu with a specific bundler or framework, check the corresponding how-to/example below:
7165

7266
- Webpack: https://github.com/vizzuhq/vizzu-webpack-demo
7367
- React: https://vizzuhq.github.io/vizzu-react-example/

docs/content/tutorial/1-data.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ add '' as a value to have a category without a name.
2626

2727
In the first two cases, data has to be in first normal form. Here is an example of that:
2828

29-
|Genres|Types|Popularity|
29+
|Genres|Kinds|Popularity|
3030
|------|-----|----------|
3131
|Pop|Hard|114|
3232
|Rock|Hard|96|
@@ -62,7 +62,7 @@ let data = {
6262
]
6363
},
6464
{
65-
name: 'Types',
65+
name: 'Kinds',
6666
type: 'dimension',
6767
values: [
6868
'Hard', 'Hard', 'Hard', 'Hard',
@@ -85,7 +85,7 @@ Data specified by records:
8585
let data = {
8686
series: [
8787
{ name: 'Genres', type: 'dimension' },
88-
{ name: 'Types', type: 'dimension' },
88+
{ name: 'Kinds', type: 'dimension' },
8989
{ name: 'Popularity', type: 'measure' }
9090
],
9191
records: [
@@ -110,7 +110,7 @@ Data cube:
110110
<table>
111111
<tr><th colspan="2" rowspan="2"></th> <th colspan="4">Genres</th></tr>
112112
<tr> <td>Pop</td> <td>Rock</td> <td>Jazz</td> <td>Metal</td></tr>
113-
<tr><th rowspan="3">Types</th><td>Hard</td> <td>114</td> <td>96</td> <td>78</td> <td>52</td></tr>
113+
<tr><th rowspan="3">Kinds</th><td>Hard</td> <td>114</td> <td>96</td> <td>78</td> <td>52</td></tr>
114114
<tr> <td>Smooth</td> <td>56</td> <td>36</td> <td>74</td> <td>121</td></tr>
115115
<tr> <td>Experimental</td> <td>127</td> <td>83</td> <td>94</td> <td>58</td></tr>
116116
<tr><td colspan="2"></td> <th colspan="4">Popularity</th></tr>
@@ -120,7 +120,7 @@ Data cube:
120120
let data = {
121121
dimensions: [
122122
{ name: 'Genres', values: [ 'Pop', 'Rock', 'Jazz', 'Metal' ] },
123-
{ name: 'Types', values: [ 'Hard', 'Smooth', 'Experimental' ] }
123+
{ name: 'Kinds', values: [ 'Hard', 'Smooth', 'Experimental' ] }
124124
],
125125
measures: [
126126
{

docs/content/tutorial/10-filtering.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ chart.animate({
1919
})
2020
```
2121

22-
Now we add a cross-filter that includes items from both the Genres and the Types dimensions. This way we override the filter from the previous state. If we weren't update the filter, Vizzu would use it in subsequent states.
22+
Now we add a cross-filter that includes items from both the Genres and the Kinds dimensions. This way we override the filter from the previous state. If we weren't update the filter, Vizzu would use it in subsequent states.
2323

2424
```javascript { "title": "Filter by two dimensions" }
2525
chart.animate({
2626
data: {
2727
filter: record =>
2828
(record["Genres"] == 'Pop' || record["Genres"] == 'Metal')
29-
&& record["Types"] == 'Smooth'
29+
&& record["Kinds"] == 'Smooth'
3030
}
3131
})
3232
```

docs/content/tutorial/14-animoptions.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ the default animation options.
1212
chart.animate({
1313
config: {
1414
channels: {
15-
y: { detach: ['Types'] },
16-
x: { attach: ['Types'] }
15+
y: { detach: ['Kinds'] },
16+
x: { attach: ['Kinds'] }
1717
}
1818
}
1919
})
@@ -25,8 +25,8 @@ We stack the columns, still with the default options.
2525
chart.animate({
2626
config: {
2727
channels: {
28-
x: { detach: ['Types'] },
29-
y: { attach: ['Types'] }
28+
x: { detach: ['Kinds'] },
29+
y: { attach: ['Kinds'] }
3030
}
3131
}
3232
})
@@ -40,8 +40,8 @@ move from the center of the chart elements to the top of them.
4040
chart.animate({
4141
config: {
4242
channels: {
43-
y: { detach: ['Types'] },
44-
x: { attach: ['Types'] }
43+
y: { detach: ['Kinds'] },
44+
x: { attach: ['Kinds'] }
4545
}
4646
}
4747
},
@@ -63,8 +63,8 @@ This is an example of changing the settings for the whole animation at once.
6363
chart.animate({
6464
config: {
6565
channels: {
66-
x: { detach: ['Types'] },
67-
y: { attach: ['Types'] }
66+
x: { detach: ['Kinds'] },
67+
y: { attach: ['Kinds'] }
6868
}
6969
}
7070
},
@@ -84,8 +84,8 @@ chart.animate(
8484
{
8585
config: {
8686
channels: {
87-
x: { attach: ['Types'] },
88-
y: { detach: ['Types'] }
87+
x: { attach: ['Kinds'] },
88+
y: { detach: ['Kinds'] }
8989
}
9090
}
9191
},
@@ -111,8 +111,8 @@ chart.animate(
111111
{
112112
config: {
113113
channels: {
114-
x: { detach: ['Types'] },
115-
y: { attach: ['Types'] }
114+
x: { detach: ['Kinds'] },
115+
y: { attach: ['Kinds'] }
116116
}
117117
}
118118
}, '500ms')

docs/content/tutorial/15-animcontrol.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ there.
1010
let animation = chart.animate({
1111
config: {
1212
channels: {
13-
x: { attach: ['Types'] },
14-
y: { detach: ['Types'] }
13+
x: { attach: ['Kinds'] },
14+
y: { detach: ['Kinds'] }
1515
}
1616
}
1717
});

docs/content/tutorial/17-shorthands-store.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ If you set/attach/detach just one series on a channel, you don't have to put tha
2626
```javascript { "title": "When just one series is used" }
2727
chart.animate({
2828
channels: {
29-
// x: { attach: [ 'Types' ] },
30-
x: { attach: 'Types' },
31-
y: { detach: 'Types' }
29+
// x: { attach: [ 'Kinds' ] },
30+
x: { attach: 'Kinds' },
31+
y: { detach: 'Kinds' }
3232
},
3333
align: 'none'
3434
})
@@ -39,8 +39,8 @@ If you use set on a channel and no other options like range, you don't have to e
3939
```javascript { "title": "When you use set and no other channel options" }
4040
chart.animate({
4141
channels: {
42-
// y: { set: [ 'Types', 'Popularity' ] },
43-
y: [ 'Types', 'Popularity' ],
42+
// y: { set: [ 'Kinds', 'Popularity' ] },
43+
y: [ 'Kinds', 'Popularity' ],
4444
x: 'Genres'
4545
}
4646
})
@@ -51,7 +51,7 @@ In any case, you can simply omit the the channel object, Vizzu will automaticall
5151
```javascript { "title": "You don't have to use the channel object" }
5252
chart.animate({
5353
// channels: {
54-
y: 'Types',
54+
y: 'Kinds',
5555
x: ['Genres','Popularity']
5656
// }
5757
})

docs/content/tutorial/5-group-stack.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ unclear for the viewer because of the fading.
1313
chart.animate({
1414
config: {
1515
channels: {
16-
x: { set: ['Genres', 'Types'] },
17-
color: { attach: ['Types'] }
16+
x: { set: ['Genres', 'Kinds'] },
17+
color: { attach: ['Kinds'] }
1818
}
1919
}
2020
})
@@ -27,7 +27,7 @@ will also simply fade between these states.
2727
chart.animate({
2828
config: {
2929
channels: {
30-
x: { detach: ['Types'] },
30+
x: { detach: ['Kinds'] },
3131
color: { set: null }
3232
}
3333
}
@@ -43,8 +43,8 @@ same dimension (Type) to the color channel.
4343
chart.animate({
4444
config: {
4545
channels: {
46-
y: { attach: ['Types'] },
47-
color: { attach: ['Types'] }
46+
y: { attach: ['Kinds'] },
47+
color: { attach: ['Kinds'] }
4848
}
4949
}
5050
})
@@ -58,8 +58,8 @@ that is easy to follow for the viewer.
5858
chart.animate({
5959
config: {
6060
channels: {
61-
y: { detach: ['Types'] },
62-
x: { attach: ['Types'] }
61+
y: { detach: ['Kinds'] },
62+
x: { attach: ['Kinds'] }
6363
}
6464
}
6565
})
@@ -72,8 +72,8 @@ around: detach the dimension from the x-axis and attach it to the y-axis.
7272
chart.animate({
7373
config: {
7474
channels: {
75-
x: { detach: ['Types'] },
76-
y: { attach: ['Types'] }
75+
x: { detach: ['Kinds'] },
76+
y: { attach: ['Kinds'] }
7777
}
7878
}
7979
})

docs/content/tutorial/6-sorting.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ the elements are grouped.
4545
chart.animate({
4646
config: {
4747
channels: {
48-
y: { detach: ['Types'] },
49-
x: { set: ['Genres', 'Types'] }
48+
y: { detach: ['Kinds'] },
49+
x: { set: ['Genres', 'Kinds'] }
5050
}
5151
}
5252
})
@@ -59,7 +59,7 @@ elements according to this new logic.
5959
chart.animate({
6060
config: {
6161
channels: {
62-
x: { set: ['Types', 'Genres'] },
62+
x: { set: ['Kinds', 'Genres'] },
6363
}
6464
}
6565
})

0 commit comments

Comments
 (0)