@d3plus/docs 3.0.0-alpha.3

package/args/text/fontFamilyStringify.args.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  family: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string | array.<string>"
+    }
+  }
+};

package/args/text/stringify.args.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  value: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/text/strip.args.jsx

@@ -0,0 +1,38 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  spacer: {
+    control: {
+      type: "text"
+    },
+    defaultValue: "\"-\"",
+    table: {
+      defaultValue: {
+        summary: "\"-\""
+      }
+    },
+    type: {
+      required: false,
+      summary: "string"
+    }
+  },
+  value: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/text/textSplit.args.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  sentence: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/text/textWrap.args.jsx

@@ -0,0 +1,8 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {};

package/args/text/titleCase.args.jsx

@@ -0,0 +1,24 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  str: {
+    control: {
+      type: "text"
+    },
+    description: "The string to apply the title case logic.",
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/text/trim.args.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  str: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/text/trimLeft.args.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  str: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/args/text/trimRight.args.jsx

@@ -0,0 +1,23 @@
+// WARNING: do not edit this file directly, it is generated dynamically from
+// the source JSDOC comments using the npm run docs script.
+
+import React from "react";
+
+
+
+export const argTypes = {
+  str: {
+    control: {
+      type: "text"
+    },
+    table: {
+      defaultValue: {
+        summary: "undefined"
+      }
+    },
+    type: {
+      required: true,
+      summary: "string"
+    }
+  }
+};

package/docs/Accessibility.mdx

@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Accessibility" />
+
+# Accessibility
+
+D3plus is a collection of tools built on top of the low-level helper functions made available by D3 to help aid in the generation of charts. While D3 itself can be considered accessible out of the box, as it doesn't actively add any elements to a webpage (see [this discussion](https://github.com/d3/d3-shape/issues/102)), D3plus tries its best to make sure that the SVG elements that get added to the page include accessibility features automatically. This page outlines those features.
+
+## SVG "role" Attribute
+
+All SVG elements created by D3plus contain a role attribute with the value "img". This ensures that all visualizations are identified as a graphic.
+
+```html
+<svg role="img"> ... </svg>
+```
+
+## Shape "role" and "aria-label" Attributes
+
+All shape DOM elements created by D3plus contain a `role` attribute with the value "presentation". They also contain an `aria-label` which describes the data related to the shape. At it's minimum, the value will contain the text label of the data point, but additional information (such as rank and/or value) is provided depending on the visualization.
+
+```html
+<rect
+  aria-label="2. United States, 34%."
+  role="presentation"
+  width="300"
+  height="371"
+  x="-150"
+  y="-185.5"
+  fill="#b22200" />
+```
+
+## SVG "title" and "desc" (Optional)
+
+The `svgTitle` and `svgDesc` methods can be set to include additional information about a chart for screen assistive technologies.
+
+```html
+<svg aria-labelledby="title desc" aria-hidden="false">
+
+  <title id="title">
+    Bar Chart of Income Over Time
+  </title>
+
+  <desc id="desc">
+    The income in Texas has been rising steadily over the past 10 years.
+  </desc>
+
+  ...
+
+</svg>
+```
+
+## Inline Data Table (Optional)
+
+If `ariaHidden` is set to `"false"`, a visually hidden data table will be rendered inside of the SVG. This makes the data readable by screen assistive technologies, but may overload the DOM in larger websites.
+
+```html
+<g role="table">
+  <text role="row">
+    <tspan role="columnheader" dy="-1000px">Year</tspan>
+    <tspan role="columnheader" dy="-1000px">State</tspan>
+    <tspan role="columnheader" dy="-1000px">Income</tspan>
+  </text>
+  <text role="row">
+    <tspan role="cell" dy="-1000px">2010</tspan>
+    <tspan role="cell" dy="-1000px">Texas</tspan>
+    <tspan role="cell" dy="-1000px">43218</tspan>
+  </text>
+  ...
+</g>
+```

package/docs/HomeChart.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {Treemap} from "@d3plus/react";
+import {Source} from '@storybook/blocks';
+import stringify from "../helpers/stringify";
+
+const Logo = () => {
+
+  const config = {
+    data: [
+      {id: "alpha", value: 29},
+      {id: "beta", value: 10},
+      {id: "gamma", value: 2},
+      {id: "delta", value: 29},
+      {id: "eta", value: 25}
+    ],
+    groupBy: "id",
+    sum: "value"
+  };
+
+  const code = `<Treemap config={${stringify(config)}} />`;
+
+  return (
+    <div style={{
+      alignItems: "stretch",
+      display: "flex",
+      height: "300px"
+    }}>
+      <div style={{marginRight: "20px", width: "300px"}}>
+        <Source code={code} />
+      </div>
+      <div style={{flex: "1 1 auto"}}>
+        <Treemap config={config} />
+      </div>
+    </div>
+  );
+};
+
+export default Logo;

package/docs/Introduction.mdx

@@ -0,0 +1,130 @@
+import {Meta} from '@storybook/blocks';
+import Logo from "./Logo.jsx";
+import HomeChart from "./HomeChart.jsx";
+
+<Meta title="Introduction" />
+
+<div style={{
+  display: "flex",
+  justifyContent: "center",
+  width: "100%"
+}}>
+  <Logo />
+</div>
+
+D3plus is an open-source visualization library, written in JavaScript, that streamlines the creation of SVG data visualizations. After providing a configuration object that details the specifics of the data at hand, D3plus will create a visualization that includes all of the repeatable, generic things out of the box, such as setting up tooltips, color assignments, and label placements.
+
+<HomeChart />
+
+## React Components
+
+While the underlying library is written in JavaScript, we supply a wrapper package for rendering charts and components in a React environment:
+
+```sh
+npm install @d3plus/react
+```
+
+An _Object_ containing configuration information about the data and visual representation at hand then needs to be passed to the `config` prop of every visualization. The options available in this configuration _Object_ vary by visualization type, and the most commonly used methods are shown in the examples on this site. Full documentation of all available methods is available in each packages README file.
+
+```jsx
+import {Treemap} from "@d3plus/react";
+
+const methods = {
+  data: [
+    {id: "alpha", value: 29},
+    {id: "beta",  value: 10}
+  ],
+  groupBy: "id",
+  size: "value"
+};
+
+<Treemap config={methods} />
+```
+
+Additionally, a global set of styles can be set using the `D3plusContext` Provider. This allows you to set base styles on all of your visualizations in one place, often in an external file. A component's `config` set by props will override global defaults key-by-key using a deep cloning function.
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import {D3plusContext} from "@d3plus/react";
+import App from "src/App.jsx";
+
+const globalConfig = {
+  title: "Shared Title for All Visualizations"
+};
+
+ReactDOM.createRoot(document.getElementById("viz")).render(
+  <React.StrictMode>
+    <D3plusContext.Provider value={globalConfig}>
+      <App />
+    </D3plusContext.Provider>
+  </React.StrictMode>
+);
+```
+
+## ES Modules
+
+Under the hood, D3plus is broken out into multiple packages based on the functionality offered by the exported code. These packages include:
+
+* [@d3plus/react](https://www.npmjs.com/package/@d3plus/react)
+* [@d3plus/core](https://www.npmjs.com/package/@d3plus/core)
+* [@d3plus/color](https://www.npmjs.com/package/@d3plus/color)
+* [@d3plus/data](https://www.npmjs.com/package/@d3plus/data)
+* [@d3plus/dom](https://www.npmjs.com/package/@d3plus/dom)
+* [@d3plus/export](https://www.npmjs.com/package/@d3plus/export)
+* [@d3plus/format](https://www.npmjs.com/package/@d3plus/format)
+* [@d3plus/locales](https://www.npmjs.com/package/@d3plus/locales)
+* [@d3plus/math](https://www.npmjs.com/package/@d3plus/math)
+* [@d3plus/text](https://www.npmjs.com/package/@d3plus/text)
+
+For example, if you are interested in using the `formatAbbreviate` function used internally for prettifying numbers:
+
+```sh
+npm install @d3plus/format
+```
+
+You can then import named functions and classes as ES modules:
+
+```js
+import {formatAbbreviate} from "@d3plus/format";
+```
+
+## Script Tags
+
+Additionally, each module is available from a CDN for vanilla JavaScript environments (bundled with all dependencies):
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/d3plus-core@3"></script>
+```
+
+A global `d3plus` object is exported, which contains all of the available methods and classes:
+
+```html
+<script>
+  new d3plus.Treemap()
+    .config({
+      data: [
+        {id: "alpha", value: 29},
+        {id: "beta",  value: 10}
+      ],
+      groupBy: "id",
+      size: "value"
+    })
+    .render();
+</script>
+```
+
+## Sites that use D3plus
+
+ * [OEC.world](https://oec.world/)
+ * [Data USA](https://datausa.io/)
+ * [DataSaudi](https://datasaudi.sa/)
+ * [Healthy Communities NC](https://healthycommunitiesnc.org/)
+ * [Puerto Rico: Family Data Center](https://data.youthpr.org/en)
+ * [CNY Vitals Pro](https://pro.cnyvitals.org/)
+ * [CDC AR&PSP](https://arpsp.cdc.gov/)
+ * [DataMPE Brasil](https://datampe.sebrae.com.br/)
+ * [La Complejidad Económica en España - COTEC](https://complejidadeconomica.cotec.es/)
+ * [Data Africa](https://dataafrica.io/)
+ * [Pantheon](https://pantheon.world/)
+ * [Estonia Statistics](https://data.stat.ee/profile/country/ee/)