feat: Language/image edits to custom viz course

src/data/nav.yml

@@ -67,7 +67,6 @@
     - title: Add, query, and mutate data using NerdStorage
       url: '/build-apps/add-query-mutate-data-nerdstorage'
     - title: Display your data in different ways with a custom visualization
-      url: '/build-apps/custom-viz-alternate-charts'
       pages:
         - title: Custom visualizations and the New Relic One SDK
           url: '/build-apps/custom-visualizations-and-the-new-relic-one-sdk'

src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx

@@ -5,20 +5,14 @@ title: 'Add custom visualizations to your dashboards'
 template: 'GuideTemplate'
 description: 'Add your custom visualization to a New Relic dashboard'
 resources:
-  - title: Build custom visualizations for dashboards
+  - title: Build a custom visualization for dashboards
     url: '/build-apps/build-visualization'
-  - title: Custom visualizations and the New Relic One SDK
-    url: '/build-apps/custom-visualizations-and-the-new-relic-one-sdk'
-  - title: Customize visualizations with configuration
-    url: '/build-apps/customize-visualizations-with-configuration'
-  - title: Add custom visualizations to your dashboards
-    url: '/build-apps/add-visualizations-to-dashboard'
-  - title: 'Build on New Relic One'
-    url: https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/new-relic-one-build-your-own-custom-new-relic-one-application
-  - title: New Relic One VSCode extension
-    url: https://marketplace.visualstudio.com/items?itemName=new-relic.nr1
-  - title: New Relic VSCode extension pack
-    url: https://marketplace.visualstudio.com/items?itemName=new-relic.new-relic-extension-pack
+  - title: Dashboards and Custom Visualizations
+    url: https://www.youtube.com/watch?v=_F61mxtKfGA
+  - title: 'Configuring custom visualizations for dashboards'
+    url: https://www.youtube.com/watch?v=sFpG_iG7Xa8
+  - title: Custom Data Visualizations on New Relic
+    url: https://www.youtube.com/watch?v=HuR0EdHGz24
 tags:
   - nr1 cli
   - NR One Catalog
@@ -27,136 +21,138 @@ tags:
 
 <Intro>
 
-This lesson builds off of the previous [Customize visualizations with configuration](/build-apps/customize-visualizations-with-configuration) lesson. If you haven't followed that lesson, please start there as this lesson assumes you have the code you built there to get started.
+In the previous lesson, you added a configuration option to your visualization that allows you to choose how you want to represent your data. This was different from the previous version of your code because, while you can still choose your chart type, you can now only only do it before you create an instance of your visualization. But what does it mean to create an instance of your  visualization? How do you use a visualization once you've configured it?
 
-If you don't have a visualization to follow the examples in this gude, a accompanying example visualization is available on [GitHub](https://github.com/newrelic/nru-custom-visualization-course)
+In this lesson, you'll learn how to create an instance of your visualization and add that instance to dashboard.
 
-Following the previous lesson, you reconfigured your visualization to use the platform configurations panel removing the unneeded `SegmentedControl` component. Now that you can customize your visualization using nr1.json configuration, in the following steps, you will configure and add your custom visualization to a New Relic dashboard.
+<Callout variant="tip">
+
+If you got lost in the previous steps and would like to see what your files should look like to start this lesson, check out the [course project](https://github.com/newrelic/nru-custom-visualization-course) on Github.
+
+</Callout>
 
 </Intro>
 
-## Before you begin
+## Add your custom visualization to a dashboard
+
+Once you've published your custom visualization to your account, in the following steps you'll configure your visualization and add it to a dashboard. You can add a visualization to a new or existing dashboard within your New Relic account.
+
+<Steps>
+
+<Step>
 
-To get started, follow the [Customize visualizations with configuration](/build-apps/customize-visualizations-with-configuration) lesson. Then, [publish and subscribe to your Nerdpack](/build-apps/publish-deploy).
+From the root directory of your Nerdpack, [publish and subscribe](/build-apps/publish-deploy) to your visualization:
 
-<Callout variant="tip"  title="Note">
+```sh
+nr1 nerdpack:publish
+nr1 nerdpack:subscribe
+```
 
-To publish a Nerdpack you must be a Full user and granted the Nerdpacks “modify” privilege (which is granted by default).
+<Callout variant="important">
 
-Read our documentation to learn more about [Nerdpacks privileges](https://developer.newrelic.com/build-apps/permission-manage-apps/).
+To publish a Nerdpack you must be a Full user with the Nerdpacks “modify” privilege (this is granted by default).
+
+Read our [Nerdpacks privileges](https://developer.newrelic.com/build-apps/permission-manage-apps/) documentation to learn more.
 
 </Callout>
 
-## Add your custom visualization to a dashboard
+Next, find your published visualization in the New Relic One app catalog.
 
-Once you've published your custom visualization to your account, in the following steps you'll configure your visualization and add it to a dashboard. You can add a visualization to a new or existing dashboard within your New Relic account.
+</Step>
 
-<Steps>
+<Step>
+
+From the [New Relic homepage](https://one.newrelic.com), select the **Apps** button in the top right navigation bar:
 
-  <Step>
+![Click the apps button in New Relic One](../../images/build-an-app/nav-to-apps.png)
 
-  To find the **My Awesome Visualization** that you have deployed, you need to look for your visualization in the app catalog. From the [New Relic One homepage](https://one.newrelic.com), select the **Apps** button in the top right navigation bar:
+</Step>
 
-  <img
-    src="../../images/build-an-app/click-app-button.png"
-    alt="Click the apps button in New Relic One"
-  />
+<Step>
+
+From the **Apps** page, click the **Custom Visualizations** launcher:
+
+![Select the custom visualization launcher](../../images/build-an-app/nav-to-custom-viz.png)
 
 </Step>
 
 <Step>
 
-  Once on the **Apps** page, click the **Custom Visualizations** launcher:
+Select **RadarOrTreemap**:
 
-  <img
-    src="../../images/build-an-app/click-viz-launcher.png"
-    alt="Select the custom visualization launcher"
-  /><br />
+![Select your desired visualization](../../images/custom-viz/select-published-radar-or-treemap-viz.png)
 
+</Step>
 
-  <Callout variant="tip"  title="Note">
+<Step>
 
-  If you don't see the **Custom Visualizations** tile, use the search to locate it.
+In the previous lesson, you changed your visualization to use the platform configurations panel for selecting a chart type. Use this panel options to configure your chart:
 
-  </Callout>
+![Configure your visualization](../../images/custom-viz/configure-radar-or-treemap.png)
 
-  </Step>
+</Step>
 
-  <Step>
+<Step>
 
-  In **Custom Visualizations**, you will see all of the visualization that have been deployed to your account and any visualizations you are serving locally.
+Click **Add to dashboard** and then select a dashboard from the list of available dashboards, or select **New dashboard**:
 
-  Select the **My Awesome Visualization** to add to a dashboard and then enable it:
+![Click the add to dashboard button](../../images/custom-viz/add-radar-or-treemap-to-dashboard.png)
 
-  <img
-    src="../../images/build-an-app/select-viz.png"
-    alt="Select your desired visualization"
-  />
+If you decide to create a new dashboard, select an account and a name:
 
-  </Step>
+![Select the dashboard](../../images/custom-viz/create-sweet-new-dashboard.png)
 
-  <Step>
+Click **Add to dashboard**.
 
-  In the previous lesson, you reconfigured your visualization to use the platform configurations panel. Use the configuration options to select your desired chart, select your account, insert a NRQL query, and any other configurations you desire.
+</Step>
 
-  As you make your selections, the visualization will update with your changes:
+<Step>
 
-  <img
-    src="../../images/build-an-app/configure-viz.png"
-    alt="Configure your visualization"
-  />
+Go to your dashboard to see your custom visualization:
 
-  </Step>
+![View the dashboard](../../images/custom-viz/view-sweet-new-dashboard.png)
 
-  <Step>
+</Step>
 
-  Click **Add to dashboard** and then select a dashboard from the list of available dashboards, or select **New dashboard**:
+</Steps>
 
-  <img
-    src="../../images/build-an-app/click-add-to-dashboard.png"
-    alt="Click the add to dashboard button"
-  /><br />
+## Delete your visualization
 
-  If you decide to create a new dashboard, select the account where you want to run the dashboard, and give the dashboard a name:
+Once you've added your visualization to a dashboard, you can't edit it. You can't change the underyling query, account ID, chart type, or any other previously configurable option. So, if you're not happy with your visualization, delete it from your dashboard and walk through the steps in this guide again to add a new instance.
 
-  <img
-    src="../../images/build-an-app/select-dashboard.png"
-    alt="Select the dashboard"
-  />
+<Steps>
 
-  </Step>
+<Step>
 
-  <Step>
+Click the ellipses button in the right-hand corner of the visualization, and click **Delete**:
 
-  Click **Add to dashboard**, then click the link to your dashboard to see the custom visualization:
+![Delete your visualization](../../images/custom-viz/delete-radar-viz.png)
 
-  <img
-    src="../../images/build-an-app/review-dashboard.png"
-    alt="Final custom visualization outcome from this guide"
-  />
+</Step>
 
-  </Step>
+<Step>
 
-</Steps>
+Confirm that you want to delete your visualization:
 
-## Manage your dashboard visualizations
-**Deleting:** To remove a visualization from a dashboard, click the ellipses button in the right-hand corner of the visualization and click delete.
+![Confirm](../../images/custom-viz/confirm-delete-radar-viz.png)
 
-<img
-    src="../../images/build-an-app/delete-viz.png"
-    alt="Delete your custom visualization"
-/><br />
+</Step>
 
-**Editing:** If your visualization needs some tweaking, delete the visualization, then follow the steps above to re-add the visualization, making any updates in Custom Visualizations.
+</Steps>
 
 ## Summary
 
-Congratulations on completing this final lesson and adding your custom visualization to a New Relic dashboard. In the previous lessons, you've used the tools in the New Relic SDK to create a new custom visualization, configured the visualization using the SDK and using the platform configuration panel.
+Congratulations on completing this final lesson! Throughout this course, you:
+
+- Created a new custom visualization with the New Relic One SDK
+- Configured your visualization using the SDK and configuration options
+- Added your visualization to a dashboard
 
-## Additional resources
+To learn more about custom visualizations, check out the following resources:
 
 - New Relic Quick Tips video: [Dashboards and Custom Visualizations](https://www.youtube.com/watch?v=_F61mxtKfGA) (6 minutes)
 - New Relic NerdBytes video: [Configuring custom visualizations for dashboards](https://www.youtube.com/watch?v=sFpG_iG7Xa8) (7 minutes)
 - New Relic Nerdlog live stream: [Custom Data Visualizations on New Relic](https://www.youtube.com/watch?v=HuR0EdHGz24) (30 minutes)
 - New Relic One SDK components: <Link to="explore-docs/intro-to-sdk">Intro to New Relic One SDK Component library</Link>
 
+Or, to learn more about other cool things you can build with the New Relic One SDK, check out our [apps course](/ab-test)!

src/markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx

@@ -19,11 +19,9 @@ tags:
   - Subscribe visualizations
 ---
 
-<Callout variant="tip" title="Course">
+<Callout variant="course">
 
-This lesson is part of a course that teaches you how to build a New Relic One custom visualization from the ground up. If you haven't already, check out the [course introduction](/build-apps/ab-test).
-
-Each lesson in the course builds upon the last, so make sure you've completed the last lesson, [_Present an end test confirmation modal_](../confirmation-modal), before starting this one.
+This lesson is part of a course that teaches you how to build a custom visualization in the New Relic One platform
 
 </Callout>
 
@@ -33,6 +31,12 @@ Use New Relic One custom visualizations to display your data, whether it's from
 
 In this lesson, you build a visualization that displays your data in one of two chart types: [`RadarChart`](https://recharts.org/en-US/api/RadarChart) or [`Treemap`](https://recharts.org/en-US/api/Treemap). You then implement a `SegmentedControl` component from the New Relic One SDK, which allows you to alternate between the two chart types. Ultimately, this gives you freedom to view your data in a dynamic way that isn't possible with New Relic's base offerings.
 
+<Callout variant="tip">
+
+If you get lost in the code project and would like to see what the files should look like when you're done with each lesson, check out the [course project](https://github.com/newrelic/nru-custom-visualization-course) on Github.
+
+</Callout>
+
 </Intro>
 
 ## Before you begin
@@ -2045,7 +2049,7 @@ Use `state.selectedChart` to determine which chart to show: the `RadarChart` or
 
 <Step>
 
-Compare `state.selectedChart` to `CHART_TYPES.Radar`. If they are the same, render a `RadarChart`. Otherwise, render a `Treemap`:
+Destructure `this.state` to access `selectedChart` as a separate constant. Then, compare `selectedChart` to `CHART_TYPES.Radar`. If they are the same, render a `RadarChart`. Otherwise, render a `Treemap`:
 
 ```js fileName=visualizations/radar-or-treemap/index.js
 import React from 'react';
@@ -2131,6 +2135,7 @@ export default class RadarOrTreemapVisualization extends React.Component {
 
   render() {
     const {nrqlQueries, stroke, fill} = this.props;
+    const {selectedChart} = this.state;
 
     const nrqlQueryPropsAvailable =
       nrqlQueries &&
@@ -2175,7 +2180,7 @@ export default class RadarOrTreemapVisualization extends React.Component {
                     label="Treemap chart"
                   />
                 </SegmentedControl>
-                {this.state.selectedChart === CHART_TYPES.Radar ? (
+                {selectedChart === CHART_TYPES.Radar ? (
                 <RadarChart
                   width={width}
                   height={height}