@d3plus/docs 3.0.5 → 3.0.6

package/args/core/components/Legend.args.jsx

@@ -24,6 +24,7 @@ export const argTypes = assign(
   {
     active: {
       control: {},
+      description: "If *value* is specified, sets the active method for all shapes to the specified function and returns the current class instance. If *value* is not specified, returns the current active method.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -39,7 +40,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "center",
-      description: "Supports `\"left\"` and `\"center\"` and `\"right\"`.",
+      description: "If *value* is specified, sets the horizontal alignment to the specified value and returns the current class instance. If *value* is not specified, returns the current horizontal alignment.",
       table: {
         defaultValue: {
           summary: "center"
@@ -52,12 +53,13 @@ export const argTypes = assign(
     },
     data: {
       control: {
-        type: "array"
+        type: "object"
       },
-      defaultValue: "[\n\n]",
+      defaultValue: "[  ]",
+      description: "If *data* is specified, sets the data array to the specified array and returns the current class instance. If *data* is not specified, returns the current data array. A shape key will be drawn for each object in the array.",
       table: {
         defaultValue: {
-          summary: "[\n\n]"
+          summary: "[  ]"
         }
       },
       type: {
@@ -70,6 +72,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "row",
+      description: "Sets the flow of the items inside the legend. If no value is passed, the current flow will be returned.",
       table: {
         defaultValue: {
           summary: "row"
@@ -85,6 +88,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 600,
+      description: "If *value* is specified, sets the transition duration of the legend and returns the current class instance. If *value* is not specified, returns the current duration.",
       table: {
         defaultValue: {
           summary: 600
@@ -100,6 +104,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 200,
+      description: "If *value* is specified, sets the overall height of the legend and returns the current class instance. If *value* is not specified, returns the current height value.",
       table: {
         defaultValue: {
           summary: 200
@@ -112,6 +117,7 @@ export const argTypes = assign(
     },
     hover: {
       control: {},
+      description: "If *value* is specified, sets the hover method for all shapes to the specified function and returns the current class instance. If *value* is not specified, returns the current hover method.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -125,6 +131,7 @@ export const argTypes = assign(
     id: {
       control: {},
       defaultValue: "d => d[\"id\"]",
+      description: "If *value* is specified, sets the id accessor to the specified function and returns the current class instance. If *value* is not specified, returns the current id accessor.",
       table: {
         defaultValue: {
           detail: "d => d[\"id\"]",
@@ -141,6 +148,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "d => d[\"id\"]",
+      description: "If *value* is specified, sets the label accessor to the specified function or string and returns the current class instance. If *value* is not specified, returns the current label accessor, which is the [id](#shape.id) accessor by default.",
       table: {
         defaultValue: {
           detail: "d => d[\"id\"]",
@@ -157,6 +165,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 5,
+      description: "If *value* is specified, sets the padding between each key to the specified number and returns the current class instance. If *value* is not specified, returns the current padding value.",
       table: {
         defaultValue: {
           summary: 5
@@ -169,6 +178,7 @@ export const argTypes = assign(
     },
     render: {
       control: {},
+      description: "Renders the current Legend to the page. If a *callback* is specified, it will be called once the legend is done drawing.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -184,6 +194,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "d3.select(\"body\").append(\"svg\")",
+      description: "If *selector* is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If *selector* is not specified, returns the current SVG container element.",
       table: {
         defaultValue: {
           summary: "d3.select(\"body\").append(\"svg\")"
@@ -199,6 +210,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "Rect",
+      description: "If *value* is specified, sets the shape accessor to the specified function or string and returns the current class instance. If *value* is not specified, returns the current shape accessor.",
       table: {
         defaultValue: {
           summary: "Rect"
@@ -214,6 +226,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "{fill: d => d[\"color\"], height: 12, hitArea: (dd, i) => {\n  const d = this._lineData[i], h = max([\n      d.height,\n      d.shapeHeight\n  ]);\n  return {\n      width: d.width + d.shapeWidth,\n      height: h,\n      x: -d.shapeWidth / 2,\n      y: -h / 2\n  };\n}, labelBounds: (dd, i) => {\n  const d = this._lineData[i];\n  let x = d.shapeWidth / 2;\n  if (d.shape === \"Circle\") x -= d.shapeR / 2;\n  const height = max([\n      d.shapeHeight,\n      d.height\n  ]);\n  const rtlMod = this._rtl ? d.shapeWidth + d.width + this._padding * 2 : 0;\n  return {\n      width: d.width,\n      height,\n      x: x + padding - rtlMod,\n      y: -height / 2\n  };\n}, labelConfig: {fontColor: colorDefaults.dark, fontFamily: this._titleClass.fontFamily(), fontResize: false, fontSize: 10, verticalAlign: middle}, opacity: 1, r: 6, width: 12, x: (d, i) => {\n  const datum = this._lineData[i];\n  const y = datum.y;\n  const pad = this._align === \"left\" || this._align === \"right\" && this._direction === \"column\" ? 0 : this._align === \"center\" ? (this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y))) / 2 : this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y));\n  const prevWords = this._lineData.slice(0, i).filter((l)=>y === l.y);\n  const rtlMod = this._rtl ? datum.width + this._padding : 0;\n  return this._rowWidth(prevWords) + this._padding * (prevWords.length ? datum.sentence ? 2 : 1 : 0) + this._outerBounds.x + datum.shapeWidth / 2 + pad + rtlMod;\n}, y: (d, i) => {\n  const ld = this._lineData[i];\n  return ld.y + this._titleHeight + this._outerBounds.y + max(this._lineData.filter((l)=>ld.y === l.y).map((l)=>l.height).concat(this._data.map((l, x)=>this._fetchConfig(\"height\", l, x)))) / 2;\n}}",
+      description: "If *config* is specified, sets the methods that correspond to the key/value pairs for each shape and returns the current class instance. If *config* is not specified, returns the current shape configuration.",
       table: {
         defaultValue: {
           detail: "{fill: d => d[\"color\"], height: 12, hitArea: (dd, i) => {\n  const d = this._lineData[i], h = max([\n      d.height,\n      d.shapeHeight\n  ]);\n  return {\n      width: d.width + d.shapeWidth,\n      height: h,\n      x: -d.shapeWidth / 2,\n      y: -h / 2\n  };\n}, labelBounds: (dd, i) => {\n  const d = this._lineData[i];\n  let x = d.shapeWidth / 2;\n  if (d.shape === \"Circle\") x -= d.shapeR / 2;\n  const height = max([\n      d.shapeHeight,\n      d.height\n  ]);\n  const rtlMod = this._rtl ? d.shapeWidth + d.width + this._padding * 2 : 0;\n  return {\n      width: d.width,\n      height,\n      x: x + padding - rtlMod,\n      y: -height / 2\n  };\n}, labelConfig: {fontColor: colorDefaults.dark, fontFamily: this._titleClass.fontFamily(), fontResize: false, fontSize: 10, verticalAlign: middle}, opacity: 1, r: 6, width: 12, x: (d, i) => {\n  const datum = this._lineData[i];\n  const y = datum.y;\n  const pad = this._align === \"left\" || this._align === \"right\" && this._direction === \"column\" ? 0 : this._align === \"center\" ? (this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y))) / 2 : this._outerBounds.width - this._rowWidth(this._lineData.filter((l)=>y === l.y));\n  const prevWords = this._lineData.slice(0, i).filter((l)=>y === l.y);\n  const rtlMod = this._rtl ? datum.width + this._padding : 0;\n  return this._rowWidth(prevWords) + this._padding * (prevWords.length ? datum.sentence ? 2 : 1 : 0) + this._outerBounds.x + datum.shapeWidth / 2 + pad + rtlMod;\n}, y: (d, i) => {\n  const ld = this._lineData[i];\n  return ld.y + this._titleHeight + this._outerBounds.y + max(this._lineData.filter((l)=>ld.y === l.y).map((l)=>l.height).concat(this._data.map((l, x)=>this._fetchConfig(\"height\", l, x)))) / 2;\n}}",
@@ -229,6 +242,7 @@ export const argTypes = assign(
       control: {
         type: "text"
       },
+      description: "If *value* is specified, sets the title of the legend and returns the current class instance. If *value* is not specified, returns the current title.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -244,6 +258,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "{fontSize: 12}",
+      description: "If *value* is specified, sets the title configuration of the legend and returns the current class instance. If *value* is not specified, returns the current title configuration.",
       table: {
         defaultValue: {
           summary: "{fontSize: 12}"
@@ -259,7 +274,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "middle",
-      description: "Supports `\"top\"` and `\"middle\"` and `\"bottom\"`.",
+      description: "If *value* is specified, sets the vertical alignment to the specified value and returns the current class instance. If *value* is not specified, returns the current vertical alignment.",
       table: {
         defaultValue: {
           summary: "middle"
@@ -275,6 +290,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 400,
+      description: "If *value* is specified, sets the overall width of the legend and returns the current class instance. If *value* is not specified, returns the current width value.",
       table: {
         defaultValue: {
           summary: 400

package/args/core/components/TextBox.args.jsx

@@ -27,6 +27,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "false",
+      description: "If *value* is specified, sets the aria-hidden attribute to the specified function or string and returns the current class instance.",
       table: {
         defaultValue: {
           summary: "false"
@@ -39,9 +40,10 @@ export const argTypes = assign(
     },
     data: {
       control: {
-        type: "array"
+        type: "object"
       },
       defaultValue: "[]",
+      description: "Sets the data array to the specified array. A text box will be drawn for each object in the array.",
       table: {
         defaultValue: {
           summary: "[]"
@@ -57,6 +59,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 0,
+      description: "Sets the animation delay to the specified number in milliseconds.",
       table: {
         defaultValue: {
           summary: 0
@@ -72,6 +75,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 0,
+      description: "Sets the animation duration to the specified number in milliseconds.",
       table: {
         defaultValue: {
           summary: 0
@@ -87,6 +91,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "(text, line) => line ? `${text.replace(/\\.|,$/g, )}...` : ",
+      description: "Sets the function that handles what to do when a line is truncated. It should return the new value for the line, and is passed 2 arguments: the String of text for the line in question, and the number of the line. By default, an ellipsis is added to the end of any line except if it is the first word that cannot fit (in that case, an empty string is returned).",
       table: {
         defaultValue: {
           detail: "(text, line) => line ? `${text.replace(/\\.|,$/g, )}...` : ",
@@ -103,6 +108,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "black",
+      description: "Sets the font color to the specified accessor function or static string, which is inferred from the [DOM selection](#textBox.select) by default.",
       table: {
         defaultValue: {
           summary: "black"
@@ -115,9 +121,10 @@ export const argTypes = assign(
     },
     fontFamily: {
       control: {
-        type: "array"
+        type: "object"
       },
       defaultValue: "fontFamily",
+      description: "Defines the font-family to be used. The value passed can be either a *String* name of a font, a comma-separated list of font-family fallbacks, an *Array* of fallbacks, or a *Function* that returns either a *String* or an *Array*. If supplying multiple fallback fonts, the [fontExists](#fontExists) function will be used to determine the first available font on the client's machine.",
       table: {
         defaultValue: {
           summary: "fontFamily"
@@ -133,6 +140,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 50,
+      description: "Sets the maximum font size to the specified accessor function or static number (which corresponds to pixel units), which is used when [dynamically resizing fonts](#textBox.fontResize).",
       table: {
         defaultValue: {
           summary: 50
@@ -148,6 +156,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 8,
+      description: "Sets the minimum font size to the specified accessor function or static number (which corresponds to pixel units), which is used when [dynamically resizing fonts](#textBox.fontResize).",
       table: {
         defaultValue: {
           summary: 8
@@ -163,6 +172,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 1,
+      description: "Sets the font opacity to the specified accessor function or static number between 0 and 1.",
       table: {
         defaultValue: {
           summary: 1
@@ -178,6 +188,7 @@ export const argTypes = assign(
         type: "boolean"
       },
       defaultValue: false,
+      description: "Toggles font resizing, which can either be defined as a static boolean for all data points, or an accessor function that returns a boolean. See [this example](http://d3plus.org/examples/d3plus-text/resizing-text/) for a side-by-side comparison.",
       table: {
         defaultValue: {
           summary: false
@@ -193,6 +204,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 10,
+      description: "Sets the font size to the specified accessor function or static number (which corresponds to pixel units), which is inferred from the [DOM selection](#textBox.select) by default.",
       table: {
         defaultValue: {
           summary: 10
@@ -208,6 +220,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "transparent",
+      description: "Sets the font stroke color for the rendered text.",
       table: {
         defaultValue: {
           summary: "transparent"
@@ -223,6 +236,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 0,
+      description: "Sets the font stroke width for the rendered text.",
       table: {
         defaultValue: {
           summary: 0
@@ -238,6 +252,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 400,
+      description: "Sets the font weight to the specified accessor function or static number, which is inferred from the [DOM selection](#textBox.select) by default.",
       table: {
         defaultValue: {
           summary: 400
@@ -253,6 +268,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "d => d[\"height\"] || 200",
+      description: "Sets the height for each box to the specified accessor function or static number.",
       table: {
         defaultValue: {
           detail: "d => d[\"height\"] || 200",
@@ -269,6 +285,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "defaultHtmlLookup",
+      description: "Configures the ability to render simple HTML tags. Defaults to supporting `<b>`, `<strong>`, `<i>`, and `<em>`, set to false to disable or provide a mapping of tags to svg styles",
       table: {
         defaultValue: {
           summary: "defaultHtmlLookup"
@@ -284,6 +301,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "(d, i) => d.id || `${i}`",
+      description: "Defines the unique id for each box to the specified accessor function or static number.",
       table: {
         defaultValue: {
           detail: "(d, i) => d.id || `${i}`",
@@ -300,6 +318,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "(d, i) => this._fontSize(d, i) * 1.2",
+      description: "Sets the line height to the specified accessor function or static number, which is 1.2 times the [font size](#textBox.fontSize) by default.",
       table: {
         defaultValue: {
           detail: "(d, i) => this._fontSize(d, i) * 1.2",
@@ -316,6 +335,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "null",
+      description: "Restricts the maximum number of lines to wrap onto, which is null (unlimited) by default.",
       table: {
         defaultValue: {
           summary: "null"
@@ -331,6 +351,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "{}",
+      description: "Adds or removes a *listener* to each object for the specified event *typenames*. If a *listener* is not specified, returns the currently assigned listener for the specified event *typename*. Mirrors the core [d3-selection](https://github.com/d3/d3-selection#selection_on) behavior.",
       table: {
         defaultValue: {
           summary: "{}"
@@ -346,6 +367,7 @@ export const argTypes = assign(
         type: "boolean"
       },
       defaultValue: false,
+      description: "Sets the text overflow to the specified accessor function or static boolean.",
       table: {
         defaultValue: {
           summary: false
@@ -361,6 +383,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 0,
+      description: "Sets the padding to the specified accessor function, CSS shorthand string, or static number, which is 0 by default.",
       table: {
         defaultValue: {
           summary: 0
@@ -376,6 +399,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "auto",
+      description: "Sets the pointer-events to the specified accessor function or static string.",
       table: {
         defaultValue: {
           summary: "auto"
@@ -388,6 +412,7 @@ export const argTypes = assign(
     },
     render: {
       control: {},
+      description: "Renders the text boxes. If a *callback* is specified, it will be called once the shapes are done drawing.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -403,6 +428,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 0,
+      description: "Sets the rotate percentage for each box to the specified accessor function or static string.",
       table: {
         defaultValue: {
           summary: 0
@@ -414,13 +440,12 @@ export const argTypes = assign(
       }
     },
     rotateAnchor: {
-      control: {
-        type: "array.<number>"
-      },
-      defaultValue: "(d) => [\nd.w / 2,\nd.h / 2\n]",
+      control: {},
+      defaultValue: "(d) => [\n  d.w / 2,\nd.h / 2\n]",
+      description: "Sets the anchor point around which to rotate the text box.",
       table: {
         defaultValue: {
-          detail: "(d) => [\nd.w / 2,\nd.h / 2\n]",
+          detail: "(d) => [\n  d.w / 2,\nd.h / 2\n]",
           summary: "function"
         }
       },
@@ -433,6 +458,7 @@ export const argTypes = assign(
       control: {
         type: "text"
       },
+      description: "Sets the SVG container element to the specified d3 selector or DOM element. If not explicitly specified, an SVG element will be added to the page for use.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -446,6 +472,7 @@ export const argTypes = assign(
     split: {
       control: {},
       defaultValue: "textSplit",
+      description: "Sets the word split behavior to the specified function, which when passed a string is expected to return that string split into an array of words.",
       table: {
         defaultValue: {
           summary: "textSplit"
@@ -461,6 +488,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "d => d[\"text\"]",
+      description: "Sets the text for each box to the specified accessor function or static string.",
       table: {
         defaultValue: {
           detail: "d => d[\"text\"]",
@@ -477,6 +505,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "start",
+      description: "Sets the horizontal text anchor to the specified accessor function or static string, whose values are analagous to the SVG [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor) property.",
       table: {
         defaultValue: {
           summary: "start"
@@ -492,6 +521,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "top",
+      description: "Sets the vertical alignment to the specified accessor function or static string. Accepts `\"top\"`, `\"middle\"`, and `\"bottom\"`.",
       table: {
         defaultValue: {
           summary: "top"
@@ -507,6 +537,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "d => d[\"width\"] || 200",
+      description: "Sets the width for each box to the specified accessor function or static number.",
       table: {
         defaultValue: {
           detail: "d => d[\"width\"] || 200",
@@ -523,6 +554,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "d => d[\"x\"]",
+      description: "Sets the x position for each box to the specified accessor function or static number. The number given should correspond to the left side of the textBox.",
       table: {
         defaultValue: {
           detail: "d => d[\"x\"]",
@@ -539,6 +571,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: "d => d[\"y\"]",
+      description: "Sets the y position for each box to the specified accessor function or static number. The number given should correspond to the top side of the textBox.",
       table: {
         defaultValue: {
           detail: "d => d[\"y\"]",

package/args/core/components/Timeline.args.jsx

@@ -27,6 +27,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "assign({}, this._barConfig, {stroke: () => this._buttonBehaviorCurrent === buttons ? transparent : colorMid, stroke-width: () => this._buttonBehaviorCurrent === buttons ? 0 : 1})",
+      description: "If *value* is specified, sets the axis line style and returns the current class instance.",
       table: {
         defaultValue: {
           detail: "assign({}, this._barConfig, {stroke: () => this._buttonBehaviorCurrent === buttons ? transparent : colorMid, stroke-width: () => this._buttonBehaviorCurrent === buttons ? 0 : 1})",
@@ -41,6 +42,7 @@ export const argTypes = assign(
     brushFilter: {
       control: {},
       defaultValue: "(event) => !event.button && event.detail < 2",
+      description: "If *value* is specified, sets the brush event filter and returns the current class instance. If *value* is not specified, returns the current brush event filter.",
       table: {
         defaultValue: {
           detail: "(event) => !event.button && event.detail < 2",
@@ -57,6 +59,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 1,
+      description: "Sets the minimum number of \"ticks\" to allow to be highlighted when using \"ticks\" buttonBehavior. Helpful when using x/y plots where you don't want the user to select less than 2 time periods. Value passed can either be a static Number, or a function that is expected to return a Number.",
       table: {
         defaultValue: {
           summary: 1
@@ -72,6 +75,7 @@ export const argTypes = assign(
         type: "boolean"
       },
       defaultValue: true,
+      description: "If *value* is specified, toggles the brushing value and returns the current class instance. If *value* is not specified, returns the current brushing value.",
       table: {
         defaultValue: {
           summary: true
@@ -87,6 +91,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "middle",
+      description: "If *value* is specified, toggles the horizontal alignment of the button timeline. Accepted values are `\"start\"`, `\"middle\"` and `\"end\"`. If *value* is not specified, returns the current button value.",
       table: {
         defaultValue: {
           summary: "middle"
@@ -102,6 +107,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "auto",
+      description: "If *value* is specified, toggles the style of the timeline. Accepted values are `\"auto\"`, `\"buttons\"` and `\"ticks\"`. If *value* is not specified, returns the current button value.",
       table: {
         defaultValue: {
           summary: "auto"
@@ -117,6 +123,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 24,
+      description: "If *value* is specified, sets the button height and returns the current class instance. If *value* is not specified, returns the current button height.",
       table: {
         defaultValue: {
           summary: 24
@@ -132,6 +139,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 10,
+      description: "If *value* is specified, sets the button padding and returns the current class instance. If *value* is not specified, returns the current button padding.",
       table: {
         defaultValue: {
           summary: 10
@@ -144,12 +152,13 @@ export const argTypes = assign(
     },
     domain: {
       control: {
-        type: "array"
+        type: "object"
       },
-      defaultValue: "[\n2001,\n2010\n]",
+      defaultValue: "[\n  2001,\n2010\n]",
+      description: "If *value* is specified, sets the scale domain of the axis and returns the current class instance.",
       table: {
         defaultValue: {
-          summary: "[\n2001,\n2010\n]"
+          summary: "[\n  2001,\n2010\n]"
         }
       },
       type: {
@@ -162,6 +171,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 0,
+      description: "If *value* is specified, sets the grid size of the axis and returns the current class instance.",
       table: {
         defaultValue: {
           summary: 0
@@ -177,6 +187,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "{fill: colorDefaults.light, stroke: #228be6, stroke-width: 2, rx: 2, ry: 2}",
+      description: "If *value* is specified, sets the handle style and returns the current class instance. If *value* is not specified, returns the current handle style.",
       table: {
         defaultValue: {
           summary: "{fill: colorDefaults.light, stroke: #228be6, stroke-width: 2, rx: 2, ry: 2}"
@@ -192,6 +203,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 6,
+      description: "If *value* is specified, sets the handle size and returns the current class instance. If *value* is not specified, returns the current handle size.",
       table: {
         defaultValue: {
           summary: 6
@@ -207,6 +219,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 100,
+      description: "If *value* is specified, sets the overall height of the axis and returns the current class instance.",
       table: {
         defaultValue: {
           summary: 100
@@ -222,6 +235,7 @@ export const argTypes = assign(
         type: "boolean"
       },
       defaultValue: false,
+      description: "If *value* is specified, sets whether offsets will be used to position some labels further away from the axis in order to allow space for the text.",
       table: {
         defaultValue: {
           summary: false
@@ -237,6 +251,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "{}",
+      description: "Adds or removes a *listener* to each object for the specified event *typenames*. If a *listener* is not specified, returns the currently assigned listener for the specified event *typename*. Mirrors the core [d3-selection](https://github.com/d3/d3-selection#selection_on) behavior.",
       table: {
         defaultValue: {
           summary: "{}"
@@ -252,7 +267,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "bottom",
-      description: "Supports `\"top\"`, `\"right\"`, `\"bottom\"`, and `\"left\"` orientations.",
+      description: "If *orient* is specified, sets the orientation of the shape and returns the current class instance. If *orient* is not specified, returns the current orientation.",
       table: {
         defaultValue: {
           summary: "bottom"
@@ -268,6 +283,7 @@ export const argTypes = assign(
         type: "boolean"
       },
       defaultValue: true,
+      description: "Determines the visibility of the play button to the left the of timeline, which will cycle through the available periods at a rate defined by the playButtonInterval method.",
       table: {
         defaultValue: {
           summary: true
@@ -283,6 +299,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "{fontColor: colorDefaults.dark, fontSize: 15, text: () => this._playTimer ? &#x23f8;&#xFE0E; : ⏵, textAnchor: middle, verticalAlign: middle}",
+      description: "The config Object for the Rect class used to create the playButton.",
       table: {
         defaultValue: {
           detail: "{fontColor: colorDefaults.dark, fontSize: 15, text: () => this._playTimer ? &#x23f8;&#xFE0E; : ⏵, textAnchor: middle, verticalAlign: middle}",
@@ -299,6 +316,7 @@ export const argTypes = assign(
         type: "number"
       },
       defaultValue: 1000,
+      description: "The value, in milliseconds, to use when cycling through the available time periods when the user clicks the playButton.",
       table: {
         defaultValue: {
           summary: 1000
@@ -311,6 +329,7 @@ export const argTypes = assign(
     },
     render: {
       control: {},
+      description: "Draws the timeline.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -323,8 +342,9 @@ export const argTypes = assign(
     },
     selection: {
       control: {
-        type: "array"
+        type: "object"
       },
+      description: "If *value* is specified, sets the selection and returns the current class instance. If *value* is not specified, returns the current selection. Defaults to the most recent year in the timeline.",
       table: {
         defaultValue: {
           summary: "undefined"
@@ -340,6 +360,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "{fill: #228be6, fill-opacity: () => this._buttonBehaviorCurrent === buttons ? 0.3 : 1, stroke-width: 0}",
+      description: "If *value* is specified, sets the selection style and returns the current class instance. If *value* is not specified, returns the current selection style.",
       table: {
         defaultValue: {
           detail: "{fill: #228be6, fill-opacity: () => this._buttonBehaviorCurrent === buttons ? 0.3 : 1, stroke-width: 0}",
@@ -356,6 +377,7 @@ export const argTypes = assign(
         type: "text"
       },
       defaultValue: "Rect",
+      description: "If *value* is specified, sets the tick shape constructor and returns the current class instance.",
       table: {
         defaultValue: {
           summary: "Rect"
@@ -371,6 +393,7 @@ export const argTypes = assign(
         type: "object"
       },
       defaultValue: "assign({}, this._shapeConfig, {labelBounds: (d) => this._buttonBehaviorCurrent === buttons ? {x: d.labelBounds.x, y: -this._buttonHeight / 2 + 1, width: d.labelBounds.width, height: this._buttonHeight} : d.labelBounds, labelConfig: {fontColor: colorDefaults.dark, fontSize: () => 12, verticalAlign: () => this._buttonBehaviorCurrent === buttons ? middle : top}, fill: () => this._buttonBehaviorCurrent === buttons ? #fff : colorMid, stroke: () => this._buttonBehaviorCurrent === buttons ? colorMid : transparent, height: (d) => this._buttonBehaviorCurrent === buttons ? this._buttonHeight : d.tick ? this._handleSize : 0, width: (d) => this._buttonBehaviorCurrent === buttons ? this._ticksWidth / this._availableTicks.length : d.tick ? this._domain.map(Number).includes(d.id) ? 2 : 1 : 0, y: (d) => this._buttonBehaviorCurrent === buttons ? this._align === middle ? this._height / 2 : this._align === start ? this._margin.top + this._buttonHeight / 2 : this._height - this._buttonHeight / 2 - this._margin.bottom : d.y, rx: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0, ry: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0})",
+      description: "If *value* is specified, sets the tick style of the axis and returns the current class instance.",
       table: {
         defaultValue: {
           detail: "assign({}, this._shapeConfig, {labelBounds: (d) => this._buttonBehaviorCurrent === buttons ? {x: d.labelBounds.x, y: -this._buttonHeight / 2 + 1, width: d.labelBounds.width, height: this._buttonHeight} : d.labelBounds, labelConfig: {fontColor: colorDefaults.dark, fontSize: () => 12, verticalAlign: () => this._buttonBehaviorCurrent === buttons ? middle : top}, fill: () => this._buttonBehaviorCurrent === buttons ? #fff : colorMid, stroke: () => this._buttonBehaviorCurrent === buttons ? colorMid : transparent, height: (d) => this._buttonBehaviorCurrent === buttons ? this._buttonHeight : d.tick ? this._handleSize : 0, width: (d) => this._buttonBehaviorCurrent === buttons ? this._ticksWidth / this._availableTicks.length : d.tick ? this._domain.map(Number).includes(d.id) ? 2 : 1 : 0, y: (d) => this._buttonBehaviorCurrent === buttons ? this._align === middle ? this._height / 2 : this._align === start ? this._margin.top + this._buttonHeight / 2 : this._height - this._buttonHeight / 2 - this._margin.bottom : d.y, rx: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0, ry: (d) => this._buttonBehaviorCurrent === buttons ? 0 : this._domain.map(Number).includes(d.id) ? 1 : 0})",
@@ -387,6 +410,7 @@ export const argTypes = assign(
         type: "boolean"
       },
       defaultValue: true,
+      description: "If *value* is specified, toggles the snapping value and returns the current class instance. If *value* is not specified, returns the current snapping value.",
       table: {
         defaultValue: {
           summary: true