Merge pull request carbon-design-system#430 from connor-leech/data-vi…

…z-fixes

docs: small fixes to chart content

src/data/nav-items.yaml

@@ -170,8 +170,8 @@
       path: /data-visualization/axes-and-labels
     - title: Legends
       path: /data-visualization/legends
-    - title: Dashboard
-      path: /data-visualization/dashboard
+    - title: Dashboards
+      path: /data-visualization/dashboards
 - title: Resources
   pages:
     - path: /resources

src/pages/data-visualization/axes-and-labels/index.mdx

@@ -26,9 +26,7 @@ Axes and labels provide critical context for the information within a chart. Use
 
 ## Starting at zero
 
-#### When when not to start at zero
-
-Always start numerical axis at zero for part-to-whole and comparisons charts, such as bar and area charts. A truncated Y axis can distort the perceived scale of a chart, making a small difference look more significant than it is.
+**Always start numerical axes at zero for part-to-whole and comparisons charts.** For bar and area charts, a truncated Y-axis can distort the perceived scale of a chart, making a small difference appear more significant than it is.
 
 <Row>
 <Column  colLg={4} colMd={4} colSm={4}>
@@ -50,9 +48,7 @@ Always start numerical axis at zero for part-to-whole and comparisons charts, su
 </Column>
 </Row>
 
-#### When to start at zero
-
-Line charts and scatter plots are less sensitive to this distortion because they are intended to communicate trends and not relative size of the difference. In these cases, cropping the Y axis helps users better identify the direction of change.
+**It's acceptable to start line charts and scatter plots at a value higher than zero.** These types of visualizations are less sensitive to distortion because they communicate trends rather than difference in size or quantity. In these cases, cropping the Y-axis helps users better identify the direction of change.
 
 <Row>
 <Column  colLg={8} colMd={4} colSm={4}>
@@ -83,7 +79,7 @@ Use the designated texture to denote the range or period when data is not availa
 
 Sometimes it's useful to skip part of the axis to bring data on the extreme ends into view without distortion. When axes contain a break, use a sinusoidal line to replace the straight axis line.
 
-On the X axis, the break may be fluid with graph area size, with a minimum width of 16px. On the Y axis, we recommend fixing the distance break at 16px.
+On the X-axis, the break may be fluid with graph area size, with a minimum width of 16px. On the Y-axis, we recommend fixing the distance break at 16px.
 
 <Row>
 <Column  colLg={8} colMd={4} colSm={4}>
@@ -117,22 +113,22 @@ If data isn't available between break points, denote the data gap with a texutre
 
 #### Consistent increments
 
-Never change axis ticks increments to accomodate data availability. If any form of axis compression is required, use provided [axis break](#breaks-in-axes) styling to visually denote.
+If any form of axis compression is required, use the provided [axis break](#breaks-in-axes) styling to visually denote the compression.
 
 #### Localization
 
 In time series, X-axis labels reflect the time increment in the data. When possible, use localized date and time format, or user preference. Otherwise, the chart defaults to the format presented below.
 
 #### Landmark labels
 
-Whenever data crosses into a new time cycle, such as a new day, month, or year, semibold the label to make it a “landmark” label to provide additional context for the labels following it.
+Whenever data cross into a new time cycle, such as a new day, month, or year, semibold the label to emphasize the transition.
 
 <Row>
 <Column  colLg={12} colMd={4} colSm={4}>
 
 ![Gap in data denoted by texture](images/axislabel-timeseries.png)
 
-<Caption>Example of time series plotted at 15 seconds intervals.</Caption>
+<Caption>Example of a time series plotted at 15 seconds intervals.</Caption>
 
 </Column>
 </Row>

src/pages/data-visualization/basic-charts/index.mdx

@@ -52,7 +52,7 @@ import {
 
 ### Default
 
-Bar charts use vertical or horizontal data markers to compare individual values. You can use it to compare discrete data or show trends over time.
+Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time.
 
 <BarChart
   data={simpleBarData}

src/pages/data-visualization/chart-types/index.mdx

@@ -5,11 +5,13 @@ description: Overview of all chart types available.
 
 import OverviewCard from 'components/OverviewCard';
 
-## Purposeful visualizations
+<PageDescription>
 
-Start by identifying the purpose of the visualization and choose a chart type appropriately. Below are some categories of purposes we file our charts under.
+Start by identifying the purpose of the visualization and choose a chart type appropriately.
 
-### Comparisons
+</PageDescription>
+
+## Comparisons
 
 <Row className="overview-card-group">
 <Column  colLg={3} colMd={2} colSm={2} noGutterSm>
@@ -65,7 +67,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 </Column>
 </Row>
 
-### Trends
+## Trends
 
 <Row className="overview-card-group">
 <Column  colLg={3} colMd={2} colSm={2} noGutterSm>
@@ -111,7 +113,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 </Column>
 </Row>
 
-### Part-to-whole
+## Part-to-whole
 
 <Row className="overview-card-group">
 <Column  colLg={3} colMd={2} colSm={2} noGutterSm>
@@ -168,7 +170,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 </Column>
 </Row>
 
-### Corelations
+## Corelations
 
 <Row className="overview-card-group">
 <Column  colLg={3} colMd={2} colSm={2} noGutterSm>
@@ -203,7 +205,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 </Column>
 </Row>
 
-### Connections
+## Connections
 
 <Row className="overview-card-group">
 <Column  colLg={3} colMd={2} colSm={2} noGutterSm>
@@ -230,7 +232,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 </Column>
 </Row>
 
-### Geospatial: overlays
+## Geospatial: overlays
 
 <Row className="overview-card-group">
 <Column  colLg={3} colMd={2} colSm={2} noGutterSm>

src/pages/data-visualization/color-palettes/index.mdx

@@ -41,7 +41,7 @@ The color palette for data visualizations is a select subset of the IBM Design L
 
 Categorical (or qualitative) palettes are best when you want to distinguish discrete categories of data that do not have an inherent correlation.
 
-The colors of this palette should be applied in sequence strictly as described below. The sequence is careful curated to maximize contrast between neighboring colors to help with visual differentiation.
+The colors of this palette should be applied in sequence strictly as described below. The sequence is carefully curated to maximize contrast between neighboring colors to help with visual differentiation.
 
 <Row>
 <Column  colLg={8} colMd={6} colSm={4}>
@@ -61,7 +61,7 @@ Complete default categorical palette in light and dark themes.
 </Column>
 </Row>
 
-When an exact number of categories of data is predictable, you may choose to override the categorical sequence with one of the following alternatives.
+You can override the categorical sequence with one of the following palettes if the exact number of data categories is predictable.
 
 ### Light theme alternatives
 

src/pages/data-visualization/dashboard/index.mdx → src/pages/data-visualization/dashboards/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: Dashboard
+title: Dashboards
 description: Context is everything. Dashboards will vary widely depending on the context they are designed for and must be carefully considered.
 ---
 
@@ -39,7 +39,7 @@ Always use consistent colors for the each data set within a dashboard.
 
 #### Use white space to enhance clarity
 
-White space sets elements apart or brings them together to distinguish a point's priority. Space acts as a visual separator and guides a user's eye through a page. It provides relief and breathing room. According to [research](http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp) conducted by Human Factors International, white space increases comprehension by almost 20 percent.
+White space either sets elements apart or brings them together to distinguish a point's priority. Space acts as a visual separator and guides a user's eye through a page. It provides relief and breathing room. According to [research](http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp) conducted by Human Factors International, white space increases comprehension by almost 20 percent.
 
 ## Exploration dashboard
 
@@ -51,7 +51,7 @@ Examples include financial reports with roll up and drill down capabilities or i
 
 #### Consistency is key
 
-All charts should use the same layout and spacing, and have legends at the same position relative to charting area. Charts should also behave predictably to user interaction. Do not switch measurement systems, like imperial to metric.
+All charts should use the same layout and spacing, and have legends at the same position relative to charting area. Do not switch measurement systems, like imperial to metric.
 
 #### Linked charts
 

src/pages/data-visualization/getting-started/angular.mdx

@@ -117,7 +117,7 @@ We recommend the use of [Angular Storybook](https://github.com/storybookjs/story
 <br />
 
 ```bash
-cd packages/react
+cd packages/angular
 yarn run storybook
 ```
 

src/pages/data-visualization/getting-started/react.mdx

@@ -114,7 +114,7 @@ We recommend the use of [React Storybook](https://github.com/storybookjs/storybo
 <br />
 
 ```bash
-cd packages/angular
+cd packages/react
 yarn run storybook
 ```
 

src/pages/data-visualization/getting-started/shared-data-options-section.mdx

@@ -2,7 +2,7 @@
 
 Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
 
-For instance in the case of pie & donut charts, you would only provide 1 dataset, and in the case of donut you could pass in an additional field called `center` in your options configuring the donut center.
+For instance, in the case of pie and donut charts, you would only provide one data set. In the case of donut charts, you can pass in an additional field called `center` in your options configuring the donut center.
 
 There are also additional options available depending on the chart type being used, for more examples please see [here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/demo-data).
 

src/pages/data-visualization/legends/index.mdx

@@ -29,7 +29,7 @@ Legends summarize the distinguishing visual properties such as colors or texture
 
 **Your chart doesn't need a legend if it only presents one data category.** Only use a legend if you can't safely assume there will be enough space to apply labels directly.
 
-**Use clear language and avoid acronyms in legends.** This applies to titles and axis labels as well.
+**Use clear language and avoid acronyms in legends.** This also applies to titles and axis labels.
 
 <Row>
 <Column  colLg={6} colMd={4} colSm={4}>
@@ -95,7 +95,7 @@ Position the legend at the top or bottom of a chart in situations where space is
 
 #### Right
 
-Position the legend right of the chart when space is plentiful, or when you would like to provide the maximum context.
+Position the legend to the right of the chart when space is plentiful, or when you would like to provide the maximum context.
 
 <Row>
 <Column  colLg={8} colMd={6} colSm={4}>
@@ -111,7 +111,7 @@ Position the legend right of the chart when space is plentiful, or when you woul
 
 #### Left
 
-Position the legend on the left of chart when better type alignment is needed. This is an unusual layout so be sure the surrounding elements of the chart are not too closely clustered.
+Position the legend on the left of the chart when better type alignment is needed. Be sure the surrounding elements of the chart are not too closely clustered.
 
 <Row>
 <Column  colLg={8} colMd={6} colSm={4}>
@@ -232,7 +232,7 @@ Please note that hiding legends is discouraged in data visualizations unless onl
 
 ### Legend overflow
 
-Up to two lines of legends are displayed by default. Clicking on `View more` expands the legend area to show all legends. Max height of a legend area is 30 percent of its chart.
+Up to two lines of legends are displayed by default. Clicking on **View more** expands the legend area to show all legends. A legend should not be taller than 30 percent of the chart's height.
 
 <Row>
 <Column  colLg={6} colMd={4} colSm={4}>