doc: comments updated

petervidos · petervidos · commit 844aca6aabb5 · 2021-09-23T15:28:54.000+02:00
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/column_grouped_rectangle_negative_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/column_grouped_rectangle_negative_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             },
             title: 'Grouped Column Chart'
         },
-        style: { // This chart type needs special angle for small labels.
+        style: { // Labels have to be rotated on this chart.
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/column_stacked_rectangle_negative_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/column_stacked_rectangle_negative_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             },
             title: 'Stacked Column Chart'
         },
-        style: { // This chart type needs special angle for small labels.
+        style: { // Labels have to be rotated on this chart.
             plot: {
                 xAxis: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/histogram_rectangle_negative_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/histogram_rectangle_negative_1dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
       title: 'Histogram',
       align: 'none'
     },
-    style: { // This chart type no needs space between markes. 
+    style: { // Spaces between markers should be eliminated on this chart. 
       'plot.marker.rectangleSpacing': 0.07
     }
   })
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/waterfall_rectangle_negative_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/waterfall_rectangle_negative_1dis_1con.mjs
@@ -6,7 +6,7 @@ const testSteps = [
         config: {
             channels: {
                 x: { set: ['Year'] },
-                y: { set: ['Year', 'Value 5 (+/-)'] }, // Repeated data series (Year) on both axles builds up waterfall positions of the markers. 
+                y: { set: ['Year', 'Value 5 (+/-)'] }, // Adding the same dimension (Year) on both axes is how you create a Waterfall Chart in Vizzu. 
                 label: { set: ['Value 5 (+/-)'] }
             },
             title: 'Waterfall Chart',
diff --git a/test/integration/test_cases/web_content/sample_static/polar/coxcomb_stacked_rectangle_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/coxcomb_stacked_rectangle_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Nightingale (Coxcomb) Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs yAxis and yAxis-labels. 
+        style: { // y-axis and its labels are unnecessary on these types of charts.
             plot: {
                 yAxis: {
                     title: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/donut_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/donut_rectangle_1dis_1con.mjs
@@ -6,14 +6,14 @@ const testSteps = [
         config: {
             channels: {
                 x: { set: ['Joy factors', 'Value 2 (+)'] },
-                y: { range: { min: '-200%' } }, // Set the radius of the empty center-circle.
+                y: { range: { min: '-200%' } }, // Setting the radius of the empty circle in the centre.
                 color: { set: ['Joy factors'] },
                 label: { set: ['Value 2 (+)'] }
             },
             title: 'Donut Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs axles and axis labels, except bigger size marker-labels. 
+        style: { // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged. 
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/pie_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/pie_rectangle_1dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Pie Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs axles and axis labels, except bigger size marker-labels. 
+        style: { // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged. 
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/radial_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/radial_rectangle_1dis_1con.mjs
@@ -8,15 +8,15 @@ const testSteps = [
                 x: { set: ['Value 2 (+)'] },
                 y: {
                     set: ['Joy factors'],
-                    range: { min: '-30%' } // Set the radius of the empty center-circle.
+                    range: { min: '-30%' } // Setting the radius of the empty circle in the centre.
                 },
                 color: { set: ['Joy factors'] },
                 label: { set: ['Value 2 (+)'] }
             },
             title: 'Radial Bar Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs axles and axis labels, except yAxis-labels. 
+        style: { // All axes and axis labels are unnecessary on these types of charts, except for the labels of the y-axis.
             plot: {
                 yAxis: {
                     color: '#ffffff00',
diff --git a/test/integration/test_cases/web_content/sample_static/polar/radial_stacked_rectangle_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/radial_stacked_rectangle_2dis_1con.mjs
@@ -8,7 +8,7 @@ const testSteps = [
                 x: { set: ['Country', 'Value 2 (+)'] },
                 y: {
                     set: ['Year'],
-                    range: { min: '-20%' } // Set the radius of the empty center-circle.
+                    range: { min: '-20%' } // Setting the radius of the empty circle in the centre.
                 },
                 color: { set: ['Country'] },
                 lightness: { set: ['Year'] }
diff --git a/test/integration/test_cases/web_content/sample_static/polar/spiderweb_area_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/spiderweb_area_1dis_1con.mjs
@@ -8,15 +8,15 @@ const testSteps = [
                 x: { set: ['Year'] },
                 y: {
                     set: ['$exists', 'Value 2 (+)'],
-                    range: { max: '130%' } // Set enought space for tangential labels.
+                    range: { max: '130%' } // Set enough space for tangential labels.
                 },
                 label: { set: ['Value 2 (+)'] },
             },
             title: 'Polar Area Chart',
             geometry: 'area',
             coordSystem: 'polar',
         },
-        style: { // This chart type no needs yAxis and yAxis-labels. 
+        style: { // y-axis and its labels are unnecessary on these types of charts.
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/spiderweb_line_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/spiderweb_line_1dis_1con.mjs
@@ -8,15 +8,15 @@ const testSteps = [
                 x: { set: ['Year'] },
                 y: {
                     set: ['$exists', 'Value 2 (+)'],
-                    range: { max: '130%' } // Set enought space for tangential labels.
+                    range: { max: '130%' } // Set enough space for tangential labels.
                 },
                 label: { set: ['Value 2 (+)'] }
             },
             title: 'Polar Line Chart',
             geometry: 'line',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs yAxis and yAxis-labels. 
+        style: { // y-axis and its labels are unnecessary on these types of charts.
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/templates/composition_comparison_pie_coxcomb_column_2dis_2con.mjs b/test/integration/test_cases/web_content/templates/composition_comparison_pie_coxcomb_column_2dis_2con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Pie Chart',
             coordSystem: 'polar'
         },
-        style: { // These chart-types no need axles and axis labels, except bigger size marker-labels on special positions. 
+        style: { // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged and their position is set. 
             plot: {
                 marker: {       
                     label: {
@@ -51,7 +51,7 @@ const testSteps = [
                 x: { set: ['Value 1', 'Joy factors', 'Region', 'Country code'] },
                 y: { 
                     set: ['Value 3'], 
-                    range: { min: '-60%' } // Set the radius of the empty center-circle.
+                    range: { min: '-60%' } // Setting the radius of the empty circle in the centre.
                 },
             },
             title: 'Coxcomb Chart'
diff --git a/test/integration/test_cases/web_content/templates/composition_comparison_waterfall_column_2dis_1con.mjs b/test/integration/test_cases/web_content/templates/composition_comparison_waterfall_column_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
                 y: { set: ['Year', 'Value 5 (+/-)'] },
                 color: {
                     set: ['Value 5 (+/-)'],
-                    range: { // Set range of colorGradient.
+                    range: { // Setting the range of the colorGradient symmetrically so that the color changes at 0
                         min: '-45',
                         max: '45'
                     }
@@ -26,7 +26,7 @@ const testSteps = [
         style: {
             plot: {
                 marker: {
-                    colorGradient: '#3d51b8 0, #6389ec 0.15, #9fbffa 0.35, #d5d7d9 0.5, #f4b096 0.65, #e36c56 0.85, #ac1727 1', // Set the color palette of the colorGradient. 
+                    colorGradient: '#3d51b8 0, #6389ec 0.15, #9fbffa 0.35, #d5d7d9 0.5, #f4b096 0.65, #e36c56 0.85, #ac1727 1', // Setting the colors used for the measure on the color channel 
                     label: {
                         position: 'top'
                     }
diff --git a/test/integration/test_cases/web_content/templates/composition_percentage_column_stream_3dis_1con.mjs b/test/integration/test_cases/web_content/templates/composition_percentage_column_stream_3dis_1con.mjs
@@ -11,7 +11,7 @@ const testSteps = [
             channels: {
                 x: { set: ['Year'] },
                 y: { set: ['Value 2 (+)', 'Country'] },
-                noop: { set: ['Country'] } // noop (no operation) channel ...???
+                noop: { set: ['Country'] } //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
             },
             title: 'Column Chart',
             geometry: 'rectangle'
@@ -37,7 +37,7 @@ const testSteps = [
             channels: {
                 y: {
                     range: {
-                        max: '110%' // Set back the default yAxis-range.
+                        max: 'auto' // Setting back the y-axis range to the default value.
                     }
                 }
             },
diff --git a/test/integration/test_cases/web_content/templates/distribution_relationship_dotplot_dotplot.mjs b/test/integration/test_cases/web_content/templates/distribution_relationship_dotplot_dotplot.mjs
@@ -8,7 +8,7 @@ const testSteps = [
                 x: { set: ['Joy factors'] },
                 y: { set: ['Value 5 (+/-)'] },
                 color: { set: ['Joy factors'] },
-                noop: { set: ['Country_code'] } // noop (no operation) channel ...???
+                noop: { set: ['Country_code'] } //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
             },
             title: 'Distribution',
             geometry: 'circle'
diff --git a/test/integration/test_cases/web_content/templates/drilldown_aggregate_line.mjs b/test/integration/test_cases/web_content/templates/drilldown_aggregate_line.mjs
@@ -9,10 +9,10 @@ const testSteps = [
                 y: {
                     set: ['Value 3 (+)'],
                     range: {
-                        max: '6000000000' // Keep the yAxis-range during the next animation phase.
+                        max: '6000000000' // Making the chart elements fill the whole of the y-axis as the default value is now 110%
                     }
                 },
-                size: { set: ['Country'] } // Set the other categories of the chart.
+                size: { set: ['Country'] } // Add the dimension that we’ll use in the next state without splitting the lines in this state.
             },
             title: 'Line Chart',
             geometry: 'line'
@@ -22,7 +22,7 @@ const testSteps = [
         config: {
             channels: {
                 color: { set: ['Country'] },
-                size: { set: null } // You don't need the categories on this channel, because they are on the 'color' channel already.
+                size: { set: null } // We don’t need this dimension here anymore since it’s already on the 'color' channel.
             },
             title: 'Drill Down'
         }
@@ -32,7 +32,7 @@ const testSteps = [
             channels: {
                 y: {
                     range: {
-                        max: '110%' // Set back the default yAxis-range.
+                        max: 'auto' // Setting back the y-axis range to the default value.
                     }
                 },
             },
diff --git a/test/integration/test_cases/web_content/templates/merge_split_radial_stacked_rectangle_2dis_1con.mjs b/test/integration/test_cases/web_content/templates/merge_split_radial_stacked_rectangle_2dis_1con.mjs
@@ -9,7 +9,7 @@ const testSteps = [
                 y: { 
                     set: ['Year'], 
                     range: { 
-                        min: '-3' // Set the radius of the empty center-circle.
+                        min: '-3' // Setting the radius of the empty circle in the centre.
                     } 
                 },
                 color: { set: ['Country'] }
diff --git a/test/integration/test_cases/web_content/templates/orientation_circle.mjs b/test/integration/test_cases/web_content/templates/orientation_circle.mjs
@@ -8,7 +8,7 @@ const testSteps = [
                 x: { set: ['Value 5 (+/-)'] },
                 y: { set: ['Joy factors'] },
                 lightness: { set: ['Joy factors'] }, // Lightness channel not necessary but helps to fallow during the animation how spreading categories of the first chart.
-                noop: { set: ['Year'] } // noop (no operation) channel ...??? 
+                noop: { set: ['Year'] } //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance. 
             },
             title: 'Distribution by Y',
             geometry: 'circle'
diff --git a/test/integration/test_cases/web_content/templates/orientation_dot_circle.mjs b/test/integration/test_cases/web_content/templates/orientation_dot_circle.mjs
@@ -7,8 +7,8 @@ const testSteps = [
             channels: {
                 x: { set: ['Value 5 (+/-)'] },
                 y: { set: ['Value 6 (+/-)'] },
-                noop: { set: ['Joy factors'] }, // noop (no operation) channel ...???
-                lightness: { set: ['Year'] } // Lightness channel helps to fallow during the animation how spreading categories of the 'Year' data series.
+                noop: { set: ['Joy factors'] }, //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
+                lightness: { set: ['Year'] } // Lightness channel is used to assist the viewer in following the animation.
             },
             title: 'Relationship by X, Y',
             geometry: 'circle'
diff --git a/test/integration/test_cases/web_content/templates/orientation_rectangle.mjs b/test/integration/test_cases/web_content/templates/orientation_rectangle.mjs
@@ -26,7 +26,7 @@ const testSteps = [
   chart => chart.animate({
     config: {
       channels: {
-        x: { set: ['Values 1'] }, // Take off 'Timeseries' data series to show sum of the new stacked bars.
+        x: { set: ['Values 1'] }, // Taking the dimension off to show the sum of the newly stacked elements.
       }
     }
   })
diff --git a/test/integration/test_cases/web_content/templates/pie_donut2_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/templates/pie_donut2_rectangle_1dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Pie Chart',
             coordSystem: 'polar'
         },
-        style: {  // This chart type no needs axles and axis labels, except bigger size marker-labels. 
+        style: {  // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged. 
             plot: {
                 marker: {
                     label: {
@@ -39,7 +39,7 @@ const testSteps = [
     chart => chart.animate({
         config: {
             channels: {
-                y: { range: { min: '-200%' } } // Set the radius of the empty center-circle. 
+                y: { range: { min: '-200%' } } // Setting the radius of the empty circle in the centre. 
             },
             title: 'Donut Chart'
         }
diff --git a/test/integration/test_cases/web_content/templates/relationship_comparison_circle_2_bubble_plot.mjs b/test/integration/test_cases/web_content/templates/relationship_comparison_circle_2_bubble_plot.mjs
@@ -20,15 +20,15 @@ const testSteps = [
             channels: {
                 x: { set: null },
                 y: { set: null },
-                size: { set: ['Value 2 (+)', 'Country_code'] } // Put dimension data series on 'size' channel to stack by other dimension which is on 'color' channel. 
+                size: { set: ['Value 2 (+)', 'Country_code'] } // With a dimension on the size channel Vizzu will stack the elements by the categories on the other channels on charts without coordinates. Here the Country code dimension is used to stack the bubbles by the dimension on the color channel. 
             },
             title: 'Stacked Comparison'
         }
     }),
     chart => chart.animate({
         config: {
             channels: {
-                size: { set: ['Value 2 (+)'] } // Take dimension data series off from 'size' channel to terminate stacking. 
+                size: { set: ['Value 2 (+)'] } // The stacking is eliminated when we remove the extra dimension from the size channel. 
             },
             title: 'Comparison'
         }
diff --git a/test/integration/test_cases/web_content/templates/stack_group_area_line.mjs b/test/integration/test_cases/web_content/templates/stack_group_area_line.mjs
@@ -9,7 +9,7 @@ const testSteps = [
         y: {
           set: ['Values 1', 'Categ. Parent'],
           range: {
-            max: '400'  // Keep the yAxis-range during the next animation phase.
+            max: '400'  // Making the chart elements fill the whole of the y-axis as the default value is now 110%
           }
         },
         label: { set: ['Values 1'] },
@@ -33,7 +33,7 @@ const testSteps = [
       channels: {
         y: {
           range: {
-            max: '110%' // Set back the default yAxis-range.
+            max: 'auto' // Setting back the y-axis range to the default value.
           }
         }
       }
diff --git a/test/integration/test_cases/web_content/templates/stack_group_circle.mjs b/test/integration/test_cases/web_content/templates/stack_group_circle.mjs
@@ -23,7 +23,7 @@ const testSteps = [
         style: {
             plot: {
                 marker: {
-                    label: { fontSize: 10 } // Not necessary but easier to read on smaller circles.
+                    label: { fontSize: 10 } // Not a necessary step, makes it easier to read the labels on smaller circles.
                 }
             }
         }
diff --git a/test/integration/test_cases/web_content/templates/stack_group_treemap.mjs b/test/integration/test_cases/web_content/templates/stack_group_treemap.mjs
@@ -7,7 +7,7 @@ const testSteps = [
     config: {
       channels: {
         size: { set: ['Value 2 (+)'] },
-        noop: { set: ['Country_code'] }, // noop (no operation) channel ...???
+        noop: { set: ['Country_code'] }, //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
         color: { set: ['Joy factors'] },
         label: { set: ['Country_code'] }
       },
@@ -18,7 +18,7 @@ const testSteps = [
   chart => chart.animate({
     config: {
       channels: {
-        size: { set: ['Value 2 (+)', 'Country_code'] } // Put dimension data series on 'size' channel to stack by other dimension which is on 'color' channel. 
+        size: { set: ['Value 2 (+)', 'Country_code'] } // With a dimension on the size channel Vizzu will stack the elements by the categories on the other channels on charts without coordinates. Here the Country code dimension is used to stack the bubbles by the dimension on the color channel. 
       },
       title: 'Treemap Stacked.'
     }
diff --git a/test/integration/test_cases/web_content/templates/total_element_bubble_2_bar.mjs b/test/integration/test_cases/web_content/templates/total_element_bubble_2_bar.mjs
@@ -7,7 +7,7 @@ const testSteps = [
             channels: {
                 color: { set: ['Joy factors'] },
                 label: { set: ['Country_code'] },
-                size: { set: ['Country_code', 'Value 2 (+)'] } // Put dimension data series on 'size' channel to stack by other dimension which is on 'color' channel. 
+                size: { set: ['Country_code', 'Value 2 (+)'] } // With a dimension on the size channel Vizzu will stack the elements by the categories on the other channels on charts without coordinates. Here the Country code dimension is used to stack the bubbles by the dimension on the color channel. 
             },
             title: 'Elements',
             geometry: 'circle'
@@ -19,7 +19,7 @@ const testSteps = [
                 x: { set: ['Country_code', 'Value 2 (+)'] },
                 y: { set: ['Joy factors'] },
                 label: { set: null },
-                size: { set: null } // Take dimension data series off from 'size' channel to terminate stacking. 
+                size: { set: null } // The stacking is eliminated when we remove the extra dimension from the size channel. 
             },
             title: 'Total',
             geometry: 'rectangle',
diff --git a/test/integration/test_cases/web_content/templates/total_element_bubble_column.mjs b/test/integration/test_cases/web_content/templates/total_element_bubble_column.mjs
@@ -7,7 +7,7 @@ const testSteps = [
             channels: {
                 color: { set: ['Joy factors'] },
                 label: { set: ['Country_code'] },
-                size: { set: ['Country_code', 'Value 2 (+)'] }  // Put dimension data series on 'size' channel to stack by other dimension which is on 'color' channel. 
+                size: { set: ['Country_code', 'Value 2 (+)'] }  // With a dimension on the size channel Vizzu will stack the elements by the categories on the other channels on charts without coordinates. Here the Country code dimension is used to stack the bubbles by the dimension on the color channel. 
             },
             title: 'Elements',
             geometry: 'circle'
@@ -19,7 +19,7 @@ const testSteps = [
                 x: { set: ['Joy factors'] },
                 y: { set: ['Country_code', 'Value 2 (+)'] },
                 label: { set: null },
-                size: { set: null } // Take dimension data series off from 'size' channel to terminate stacking. 
+                size: { set: null } // The stacking is eliminated when we remove the extra dimension from the size channel. 
             },
             title: 'Total',
             geometry: 'rectangle',
diff --git a/test/integration/test_cases/web_content/templates/total_time_area_bar.mjs b/test/integration/test_cases/web_content/templates/total_time_area_bar.mjs
@@ -60,7 +60,7 @@ const testSteps = [
         }
     },
         {
-            geometry: { delay: 0, duration: 1 }, // Set timing for better animation.
+            geometry: { delay: 0, duration: 1 }, // Setting a custom rhythm for the animation to assist the viewer in following it.
             y: {
                 delay: 0,
                 duration: 1
diff --git a/test/integration/test_cases/web_content/templates/total_time_area_column.mjs b/test/integration/test_cases/web_content/templates/total_time_area_column.mjs
diff --git a/test/integration/test_cases/web_content/templates/total_time_column_line.mjs b/test/integration/test_cases/web_content/templates/total_time_column_line.mjs
diff --git a/test/integration/test_cases/web_content/templates/treemap_radial.mjs b/test/integration/test_cases/web_content/templates/treemap_radial.mjs
diff --git a/test/integration/test_cases/web_content/templates/zoom_area.mjs b/test/integration/test_cases/web_content/templates/zoom_area.mjs
diff --git a/test/integration/test_cases/web_content/templates/zoom_line.mjs b/test/integration/test_cases/web_content/templates/zoom_line.mjs

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const testSteps = [`
`12`	`12`	`title: 'Histogram',`
`13`	`13`	`align: 'none'`
`14`	`14`	`},`
`15`		`- style: { // This chart type no needs space between markes.`
	`15`	`+ style: { // Spaces between markers should be eliminated on this chart.`
`16`	`16`	`'plot.marker.rectangleSpacing': 0.07`
`17`	`17`	`}`
`18`	`18`	`})`