Merge pull request #79 from vizzuhq/petervidos_patch-11

Switch Types to Kinds in tutorial example to avoid confusion

Author: simzer

docs/content/tutorial/1-data.md

@@ -26,7 +26,7 @@ add '' as a value to have a category without a name.
 
 In the first two cases, data has to be in first normal form. Here is an example of that:
 
-|Genres|Types|Popularity|
+|Genres|Kinds|Popularity|
 |------|-----|----------|
 |Pop|Hard|114|
 |Rock|Hard|96|
@@ -62,7 +62,7 @@ let data = {
       ]
     },
     {
-      name: 'Types', 
+      name: 'Kinds', 
       type: 'dimension', 
       values: [
         'Hard', 'Hard', 'Hard', 'Hard', 
@@ -85,7 +85,7 @@ Data specified by records:
 let data = {
   series: [
     { name: 'Genres', type: 'dimension' },
-    { name: 'Types', type: 'dimension' },
+    { name: 'Kinds', type: 'dimension' },
     { name: 'Popularity', type: 'measure' }
   ],
   records: [
@@ -110,7 +110,7 @@ Data cube:
 <table>
   <tr><th colspan="2" rowspan="2"></th>               <th colspan="4">Genres</th></tr>
   <tr>                                                <td>Pop</td> <td>Rock</td> <td>Jazz</td> <td>Metal</td></tr>
-  <tr><th rowspan="3">Types</th><td>Hard</td>         <td>114</td>  <td>96</td>   <td>78</td>  <td>52</td></tr>
+  <tr><th rowspan="3">Kinds</th><td>Hard</td>         <td>114</td>  <td>96</td>   <td>78</td>  <td>52</td></tr>
   <tr>                          <td>Smooth</td>       <td>56</td>  <td>36</td>   <td>74</td>   <td>121</td></tr>
   <tr>                          <td>Experimental</td> <td>127</td>  <td>83</td>   <td>94</td>  <td>58</td></tr>
   <tr><td colspan="2"></td>                           <th colspan="4">Popularity</th></tr>
@@ -120,7 +120,7 @@ Data cube:
 let data = {
 	dimensions: [ 
 		{ name: 'Genres', values: [ 'Pop', 'Rock', 'Jazz', 'Metal' ] },
-		{ name: 'Types', values: [ 'Hard', 'Smooth', 'Experimental' ] }
+		{ name: 'Kinds', values: [ 'Hard', 'Smooth', 'Experimental' ] }
 	],
 	measures: [
 		{

docs/content/tutorial/10-filtering.md

@@ -19,14 +19,14 @@ chart.animate({
 })
 ```
 
-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.
+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.
 
 ```javascript { "title": "Filter by two dimensions" }
 chart.animate({
 	data: {
 		filter: record => 
 			(record["Genres"] == 'Pop' || record["Genres"] == 'Metal') 
-			&& record["Types"] == 'Smooth'
+			&& record["Kinds"] == 'Smooth'
 	}
 })
 ```

docs/content/tutorial/14-animoptions.md

@@ -12,8 +12,8 @@ the default animation options.
 chart.animate({
 	config: {
 		channels: {
-			y: { detach: ['Types'] },
-			x: { attach: ['Types'] }
+			y: { detach: ['Kinds'] },
+			x: { attach: ['Kinds'] }
 		}
 	}
 })
@@ -25,8 +25,8 @@ We stack the columns, still with the default options.
 chart.animate({
 	config: {
 		channels: {
-			x: { detach: ['Types'] },
-			y: { attach: ['Types'] }
+			x: { detach: ['Kinds'] },
+			y: { attach: ['Kinds'] }
 		}
 	}
 })
@@ -40,8 +40,8 @@ move from the center of the chart elements to the top of them.
 chart.animate({
 	config: {
 		channels: {
-			y: { detach: ['Types'] },
-			x: { attach: ['Types'] }
+			y: { detach: ['Kinds'] },
+			x: { attach: ['Kinds'] }
 		}
 	}
 }, 
@@ -63,8 +63,8 @@ This is an example of changing the settings for the whole animation at once.
 chart.animate({
 	config: {
 		channels: {
-			x: { detach: ['Types'] },
-			y: { attach: ['Types'] }
+			x: { detach: ['Kinds'] },
+			y: { attach: ['Kinds'] }
 		}
 	}
 }, 
@@ -84,8 +84,8 @@ chart.animate(
 {
 	config: {
 		channels: {
-			x: { attach: ['Types'] },
-			y: { detach: ['Types'] }
+			x: { attach: ['Kinds'] },
+			y: { detach: ['Kinds'] }
 		}
 	}
 },
@@ -111,8 +111,8 @@ chart.animate(
 {
 	config: {
 		channels: {
-			x: { detach: ['Types'] },
-			y: { attach: ['Types'] }
+			x: { detach: ['Kinds'] },
+			y: { attach: ['Kinds'] }
 		}
 	}
 }, '500ms')

docs/content/tutorial/15-animcontrol.md

@@ -10,8 +10,8 @@ there.
 let animation = chart.animate({
 	config: {
 		channels: {
-			x: { attach: ['Types'] },
-			y: { detach: ['Types'] }
+			x: { attach: ['Kinds'] },
+			y: { detach: ['Kinds'] }
 		}
 	}
 });

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

@@ -26,9 +26,9 @@ If you set/attach/detach just one series on a channel, you don't have to put tha
 ```javascript { "title": "When just one series is used" }
 chart.animate({
 	channels: {
-		// x: { attach: [ 'Types' ] },
-		x: { attach: 'Types' },
-		y: { detach: 'Types' }
+		// x: { attach: [ 'Kinds' ] },
+		x: { attach: 'Kinds' },
+		y: { detach: 'Kinds' }
 	},
 	align: 'none'
 })
@@ -39,8 +39,8 @@ If you use set on a channel and no other options like range, you don't have to e
 ```javascript { "title": "When you use set and no other channel options" }
 chart.animate({
 	channels: {
-		// y: { set: [ 'Types', 'Popularity' ] },
-		y: [ 'Types', 'Popularity' ],
+		// y: { set: [ 'Kinds', 'Popularity' ] },
+		y: [ 'Kinds', 'Popularity' ],
 		x: 'Genres'
 	}
 })
@@ -51,7 +51,7 @@ In any case, you can simply omit the the channel object, Vizzu will automaticall
 ```javascript { "title": "You don't have to use the channel object" }
 chart.animate({
 // channels: {
-	y: 'Types',
+	y: 'Kinds',
 	x: ['Genres','Popularity']
 // }
 })

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

@@ -13,8 +13,8 @@ unclear for the viewer because of the fading.
 chart.animate({
 	config: {
 		channels: {
-			x: { set: ['Genres', 'Types'] },
-			color: { attach: ['Types'] }
+			x: { set: ['Genres', 'Kinds'] },
+			color: { attach: ['Kinds'] }
 		}
 	}
 })
@@ -27,7 +27,7 @@ will also simply fade between these states.
 chart.animate({
 	config: {
 		channels: {
-			x: { detach: ['Types'] },
+			x: { detach: ['Kinds'] },
 			color: { set: null }
 		}
 	}
@@ -43,8 +43,8 @@ same dimension (Type) to the color channel.
 chart.animate({
 	config: {
 		channels: {
-			y: { attach: ['Types'] },
-			color: { attach: ['Types'] }
+			y: { attach: ['Kinds'] },
+			color: { attach: ['Kinds'] }
 		}
 	}
 })
@@ -58,8 +58,8 @@ that is easy to follow for the viewer.
 chart.animate({
 	config: {
 		channels: {
-			y: { detach: ['Types'] },
-			x: { attach: ['Types'] }
+			y: { detach: ['Kinds'] },
+			x: { attach: ['Kinds'] }
 		}
 	}
 })
@@ -72,8 +72,8 @@ around: detach the dimension from the x-axis and attach it to the y-axis.
 chart.animate({
 	config: {
 		channels: {
-			x: { detach: ['Types'] },
-			y: { attach: ['Types'] }
+			x: { detach: ['Kinds'] },
+			y: { attach: ['Kinds'] }
 		}
 	}
 })

docs/content/tutorial/6-sorting.md

@@ -45,8 +45,8 @@ the elements are grouped.
 chart.animate({
 	config: {
 		channels: {
-			y: { detach: ['Types'] },
-			x: { set: ['Genres', 'Types'] }
+			y: { detach: ['Kinds'] },
+			x: { set: ['Genres', 'Kinds'] }
 		}
 	}
 })
@@ -59,7 +59,7 @@ elements according to this new logic.
 chart.animate({
 	config: {
 		channels: {
-			x: { set: ['Types', 'Genres'] },
+			x: { set: ['Kinds', 'Genres'] },
 		}
 	}
 })

docs/script/tutorial/base.js

@@ -94,9 +94,9 @@ const base = {
 		chart.feature('tooltip', false);
 		return chart.animate(defaultConfig(
 		{
-			y: defaultChannel(['Popularity', 'Types']),
+			y: defaultChannel(['Popularity', 'Kinds']),
 			x: defaultChannel('Genres'),
-			color: defaultChannel('Types'),
+			color: defaultChannel('Kinds'),
 			lightness: defaultChannel(),
 			label: defaultChannel('Popularity'),
 			size: defaultChannel(),

docs/script/tutorial/data.js

@@ -10,7 +10,7 @@ const data = {
 			]
 		},
 		{
-			name: 'Types',
+			name: 'Kinds',
 			type: 'dimension',
 			values: [
 				'Hard', 'Hard', 'Hard', 'Hard',