From 6c8967dc902b51d8cc73b1b8db220f3b8448d680 Mon Sep 17 00:00:00 2001
From: Connor Cameron <ctc@ncgr.org>
Date: Tue, 14 May 2024 19:39:48 +0000
Subject: [PATCH] change examples based on comments from #386

---
 dev/viz/lis-histogram-element.html |  2 +-
 src/viz/lis-histogram-element.ts   | 61 ++++++++++++++++--------------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/dev/viz/lis-histogram-element.html b/dev/viz/lis-histogram-element.html
index a7544fb..890e0a4 100644
--- a/dev/viz/lis-histogram-element.html
+++ b/dev/viz/lis-histogram-element.html
@@ -31,8 +31,8 @@ <h1>&lt;lis-histogram-element&gt;</h1>
   </div> 
   <!--Set all attributes/properties via JavaScript for lis-simple-table-element-->
   <script type="text/javascript">
-    // get the simple table element
    window.onload = (event) => {
+    // get the simple table element
     const tableElement = document.getElementById('table');
     // set the element's properties
     tableElement.caption = 'My cheesy table';
diff --git a/src/viz/lis-histogram-element.ts b/src/viz/lis-histogram-element.ts
index 412da1c..d652d9f 100644
--- a/src/viz/lis-histogram-element.ts
+++ b/src/viz/lis-histogram-element.ts
@@ -7,26 +7,39 @@ import * as d3 from 'd3';
 /**
  * @htmlElement `<lis-histogram-element>`
  *
- * is a custom web component for creating histograms using D3.js.
+ * A custom web component for creating histograms using D3.js.
+ * 
+ * The following attributes/properties can be set using HTML or JavaScript:
+ * - {@link data | `data`}
+ * - {@link xlabel | `xlabel`}
+ * - {@link ylabel | `ylabel`}
+ * - {@link width | `width`}
+ * - {@link height | `height`}
+ * - {@link orientation | `orientation`}
  *
  * @example
- * Attributes:
- * - {@link data | `data`}: An array of objects where each object represents a bar in the histogram. Each object should have a `name` and `count` property.
- * - {@link xlabel | `xlabel`}: The label for the x-axis.
- * - {@link ylabel | `ylabel`}: The label for the y-axis.
- * - {@link width | `width`}: The width of the histogram in pixels.
- * - {@link height | `height`}: The height of the histogram in pixels.
- * - {@link orientation | `orientation`}: The orientation of the histogram. Can be either 'horizontal' or 'vertical'. Default is 'horizontal'.
- *
- * Example using JavaScript and HTML driven using `<lis-simple-table-element>`:
+ * Example using only HTML:
+ * 
+ * ```html
+ * <lis-histogram-element
+ *   data='[{"name": "A", "count": 10}, {"name": "B", "count": 20}]'
+ *   xlabel='Category'
+ *   ylabel='Count'
+ *   width='500'
+ *   height='500'>
+ * </lis-histogram-element>
+ * ```
+ * 
+ * @example 
+ * Example using JavaScript and HTML that sets data using values from a `<lis-simple-table-element>`:
  *
  * ```html
  * <lis-simple-table-element id="table"></lis-simple-table-element>
  * <lis-histogram-element id="histogram"></lis-histogram-element>
  *
  * <script type="text/javascript">
- *     // get the simple table element
  *    window.onload = (event) => {
+ *     // get the simple table element
  *     const tableElement = document.getElementById('table');
  *     // set the element's properties
  *     tableElement.caption = 'My cheesy table';
@@ -41,28 +54,18 @@ import * as d3 from 'd3';
  *       {cheese: 'Goat', region: 'America', rating: 2}
  *     ];
  *
- *     const histoElement = document.getElementById('histogram');
- *     histoElement.width = 500;
- *     histoElement.height = 500;
- *     histoElement.xlabel = 'Cheese';
- *     histoElement.ylabel = 'Rating';
- *     histoElement.orientation = 'vertical';
- *     histoElement.data = tableElement.data.map((d) => ({"name": d.cheese, "count": d.rating}));
+ *     const histogramData = tableElement.data.map((d) => ({"name": d.cheese, "count": d.rating}));
+       const histogramElement = document.getElementById('histogram');
+       histogramElement.width = 500;
+       histogramElement.height = 500;
+       histogramElement.xlabel = 'Cheese';
+       histogramElement.ylabel = 'Rating';
+       histogramElement.orientation = 'vertical';
+       histogramElement.data = histogramData;
  *    }
  *   </script>
  * ```
  *
- * Example using only html:
- * ```html
- * <lis-histogram-element
- *   data='[{"name": "A", "count": 10}, {"name": "B", "count": 20}]'
- *   xlabel='Category'
- *   ylabel='Count'
- *   width='500'
- *   height='500'
- *   orientation='vertical'>
- * </lis-histogram-element>
- * ```
  */
 @customElement('lis-histogram-element')
 export class LisHistogramElement extends LitElement {