Add doc annotations

src/render/barchart.ts

@@ -25,6 +25,18 @@ import {getDrawArea, nextFrame, shallowEquals} from './render_utils';
 /**
  * Renders a barchart.
  *
+ * ```js
+ * const data = [
+ *   { index: 0, value: 50 },
+ *   { index: 1, value: 100 },
+ *   { index: 2, value: 150 },
+ *  ];
+ *
+ * // Render to visor
+ * const surface = { name: 'Bar chart', tab: 'Charts' };
+ * tfvis.render.barchart(data, surface, {});
+ * ```
+ *
  * @param data Data in the following format, (an array of objects)
  *    [ {index: number, value: number} ... ]
  * @param container An `HTMLElement` or `Surface` in which to draw the bar
@@ -39,7 +51,10 @@ import {getDrawArea, nextFrame, shallowEquals} from './render_utils';
  * @param opts.fontSize fontSize in pixels for text in the chart
  *
  * @returns Promise - indicates completion of rendering
+ *
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export async function renderBarchart(
     data: Array<{index: number; value: number;}>, container: Drawable,
     opts: VisOptions = {}): Promise<void> {

src/render/confusion_matrix.ts

@@ -28,6 +28,41 @@ import {getDrawArea} from './render_utils';
  * is perfect (i.e. only the diagonal has values) then the diagonal will always
  * be shaded.
  *
+ * ```js
+ * const rows = 5;
+ * const cols = 5;
+ * const values = [];
+ * for (let i = 0; i < rows; i++) {
+ *   const row = []
+ *   for (let j = 0; j < cols; j++) {
+ *     row.push(Math.round(Math.random() * 50));
+ *   }
+ *   values.push(row);
+ * }
+ * const data = { values };
+ *
+ * // Render to visor
+ * const surface = { name: 'Confusion Matrix', tab: 'Charts' };
+ * tfvis.render.confusionMatrix(data, surface);
+ * ```
+ *
+ * ```js
+ * // The diagonal can be excluded from shading.
+ *
+ * const data = {
+ *   values: [[4, 2, 8], [1, 7, 2], [3, 3, 20]],
+ * }
+ *
+ * // Render to visor
+ * const surface = {
+ *  name: 'Confusion Matrix with Excluded Diagonal', tab: 'Charts'
+ * };
+ *
+ * tfvis.render.confusionMatrix(data, surface, {
+ *   shadeDiagonal: false
+ * });
+ * ```
+ *
  * @param data Data consists of an object with a 'values' property
  *  and a 'labels' property.
  *  {
@@ -52,7 +87,9 @@ import {getDrawArea} from './render_utils';
  * @param opts.width width of chart in px
  * @param opts.height height of chart in px
  * @param opts.fontSize fontSize in pixels for text in the chart
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export async function renderConfusionMatrix(
     data: ConfusionMatrixData, container: Drawable,
     opts: VisOptions&

src/render/heatmap.ts

@@ -26,6 +26,36 @@ import {getDrawArea} from './render_utils';
 /**
  * Renders a heatmap.
  *
+ * ```js
+ * const rows = 50;
+ * const cols = 20;
+ * const values = [];
+ * for (let i = 0; i < rows; i++) {
+ *   const row = []
+ *   for (let j = 0; j < cols; j++) {
+ *     row.push(i * j)
+ *   }
+ *   values.push(row);
+ * }
+ * const data = { values };
+ *
+ * // Render to visor
+ * const surface = { name: 'Heatmap', tab: 'Charts' };
+ * tfvis.render.heatmap(data, surface);
+ * ```
+ *
+ * ```js
+ * const data = {
+ *   values: [[4, 2, 8, 20], [1, 7, 2, 10], [3, 3, 20, 13]],
+ *   xLabels: ['cheese', 'pig', 'font'],
+ *   yLabels: ['speed', 'smoothness', 'dexterity', 'mana'],
+ * }
+ *
+ * // Render to visor
+ * const surface = { name: 'Heatmap w Custom Labels', tab: 'Charts' };
+ * tfvis.render.heatmap(data, surface);
+ * ```
+ *
  * @param data Data consists of an object with a 'values' property
  *  and a 'labels' property.
  *  {
@@ -54,7 +84,9 @@ import {getDrawArea} from './render_utils';
  * @param opts.width width of chart in px
  * @param opts.height height of chart in px
  * @param opts.fontSize fontSize in pixels for text in the chart
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export async function renderHeatmap(
     data: HeatmapData, container: Drawable,
     opts: HeatmapOptions = {}): Promise<void> {

src/render/histogram.ts

@@ -32,6 +32,19 @@ const defaultOpts = {
 /**
  * Renders a histogram of values
  *
+ * ```js
+ * const data = Array(100).fill(0)
+ *   .map(x => Math.random() * 100 - (Math.random() * 50))
+ *
+ * // Push some special values for the stats table.
+ * data.push(Infinity);
+ * data.push(NaN);
+ * data.push(0);
+ *
+ * const surface = { name: 'Histogram', tab: 'Charts' };
+ * tfvis.render.histogram(data, surface);
+ * ```
+ *
  * @param data Data in the following format:
  *  `[ {value: number}, ... ]` or `[number]` or `TypedArray`
  * @param container An `HTMLElement`|`Surface` in which to draw the histogram
@@ -53,7 +66,9 @@ const defaultOpts = {
  *      numZeros?: number,
  *      numNans?: number
  *    }
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export async function renderHistogram(
     data: Array<{value: number}>|number[]|TypedArray, container: HTMLElement,
     opts: HistogramOpts = {}) {

src/render/linechart.ts

@@ -24,6 +24,34 @@ import {getDrawArea} from './render_utils';
 /**
  * Renders a line chart
  *
+ * ```js
+ * const series1 = Array(100).fill(0)
+ *   .map(y => Math.random() * 100 - (Math.random() * 50))
+ *   .map((y, x) => ({ x, y, }));
+ *
+ * const series2 = Array(100).fill(0)
+ *   .map(y => Math.random() * 100 - (Math.random() * 150))
+ *   .map((y, x) => ({ x, y, }));
+ *
+ * const series = ['First', 'Second'];
+ * const data = { values: [series1, series2], series }
+ *
+ * const surface = tfvis.visor().surface({ name: 'Line chart', tab: 'Charts' });
+ * tfvis.render.linechart(data, surface);
+ * ```
+ *
+ * ```js
+ * const series1 = Array(100).fill(0)
+ *   .map(y => Math.random() * 100 + 50)
+ *   .map((y, x) => ({ x, y, }));
+ *
+ * const data = { values: [series1] }
+ *
+ * // Render to visor
+ * const surface = { name: 'Zoomed Line Chart', tab: 'Charts' };
+ * tfvis.render.linechart(data, surface, { zoomToFit: true });
+ * ```
+ *
  * @param data Data in the following format
  *  {
  *    // A nested array of objects each with an x and y property,
@@ -48,7 +76,9 @@ import {getDrawArea} from './render_utils';
  * the plot.
  * @param opts.yAxisDomain array of two numbers indicating the domain of the y
  * axis. This is overriden by zoomToFit
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export async function renderLinechart(
     data: {values: Point2D[][]|Point2D[], series?: string[]},
     container: Drawable, opts: XYPlotOptions = {}): Promise<void> {

src/render/scatterplot.ts

@@ -24,6 +24,22 @@ import {getDrawArea} from './render_utils';
 /**
  * Renders a scatter plot
  *
+ * ```js
+ * const series1 = Array(100).fill(0)
+ *   .map(y => Math.random() * 100 - (Math.random() * 50))
+ *   .map((y, x) => ({ x, y, }));
+ *
+ * const series2 = Array(100).fill(0)
+ *   .map(y => Math.random() * 100 - (Math.random() * 150))
+ *   .map((y, x) => ({ x, y, }));
+ *
+ * const series = ['First', 'Second'];
+ * const data = { values: [series1, series2], series }
+ *
+ * const surface = { name: 'Scatterplot', tab: 'Charts' };
+ * tfvis.render.scatterplot(data, surface);
+ * ```
+ *
  * @param data Data in the following format
  *  {
  *    // A nested array of objects each with an x and y property,
@@ -50,7 +66,9 @@ import {getDrawArea} from './render_utils';
  * axis. This is overriden by zoomToFit
  * @param opts.yAxisDomain array of two numbers indicating the domain of the y
  * axis. This is overriden by zoomToFit
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export async function renderScatterplot(
     data: {values: Point2D[][]|Point2D[], series?: string[]},
     container: Drawable, opts: XYPlotOptions = {}): Promise<void> {

src/render/table.ts

@@ -25,6 +25,23 @@ import {getDrawArea} from './render_utils';
 /**
  * Renders a table
  *
+ * ```js
+ * const headers = [
+ *  'Col 1',
+ *  'Col 2',
+ *  'Col 3',
+ * ];
+ *
+ * const values = [
+ *  [1, 2, 3],
+ *  ['4', '5', '6'],
+ *  ['strong>7</strong>', true, false],
+ * ];
+ *
+ * const surface = { name: 'Table', tab: 'Charts' };
+ * tfvis.render.table({ headers, values }, surface);
+ * ```
+ *
  * @param data Data in the following format
  *    {
  *      headers: string[],
@@ -41,7 +58,9 @@ import {getDrawArea} from './render_utils';
  *    the contents of the container and can clear its contents
  *    at will.
  * @param opts.fontSize fontSize in pixels for text in the chart.
+ *
  */
+/** @doc {heading: 'Charts', namespace: 'render'} */
 export function renderTable(
     // tslint:disable-next-line:no-any
     data: {headers: string[], values: any[][]}, container: Drawable,