diff --git a/packages/vx-demo/src/components/PackageList.tsx b/packages/vx-demo/src/components/PackageList.tsx index 4b4f1a02a..2610c4808 100644 --- a/packages/vx-demo/src/components/PackageList.tsx +++ b/packages/vx-demo/src/components/PackageList.tsx @@ -47,8 +47,8 @@ export default function PackageList({ {!compact &&

Annotation lines with text

}
  • - @vx/scale - {!compact &&

    d3 scales to map data to visual attributes

    } + @vx/scale + {!compact &&

    Map data to visual dimensions

    }
  • @vx/shape @@ -80,8 +80,8 @@ export default function PackageList({ {!compact &&

    Represent data values using color

    }
  • - @vx/hierarchy - {!compact &&

    Multiple layouts for hierarchical or nested data

    } + @vx/hierarchy + {!compact &&

    Components to visualize hierarchical or nested data

    }
  • @vx/network diff --git a/packages/vx-demo/src/pages/docs/Hierarchy.tsx b/packages/vx-demo/src/pages/docs/Hierarchy.tsx new file mode 100644 index 000000000..68dfa8533 --- /dev/null +++ b/packages/vx-demo/src/pages/docs/Hierarchy.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import HierarchyReadme from '!!raw-loader!../../../../vx-hierarchy/Readme.md'; +import Cluster from '../../../../vx-hierarchy/src/hierarchies/Cluster'; +import Pack from '../../../../vx-hierarchy/src/hierarchies/Pack'; +import Partition from '../../../../vx-hierarchy/src/hierarchies/Partition'; +import Tree from '../../../../vx-hierarchy/src/hierarchies/Tree'; +import Treemap from '../../../../vx-hierarchy/src/hierarchies/Treemap'; +import DocPage from '../../components/DocPage'; +import { DocGenInfo } from '../../types'; + +const components = [Cluster, Pack, Partition, Tree, Treemap].map( + c => + // @ts-ignore + c.__docgenInfo, +) as DocGenInfo[]; + +export default () => ( + +); diff --git a/packages/vx-demo/src/pages/docs/Scale.tsx b/packages/vx-demo/src/pages/docs/Scale.tsx new file mode 100644 index 000000000..6bf0fbc74 --- /dev/null +++ b/packages/vx-demo/src/pages/docs/Scale.tsx @@ -0,0 +1,5 @@ +import React from 'react'; +import ScaleReadme from '!!raw-loader!../../../../vx-scale/Readme.md'; +import DocPage from '../../components/DocPage'; + +export default () => ; diff --git a/packages/vx-demo/src/static/docs/vx-hierarchy.html b/packages/vx-demo/src/static/docs/vx-hierarchy.html deleted file mode 100644 index 6dd3adf40..000000000 --- a/packages/vx-demo/src/static/docs/vx-hierarchy.html +++ /dev/null @@ -1,147 +0,0 @@ - - - - - -
    -
    -
    - - - Star -
    -
    -
    -
    -
    - -
    -
    -

    @vx/hierarchy

    -

    - -

    -

    This package contains two components, <Tree /> and <Cluster />, both of which render trees as a node-link diagram.

    -

    The <Tree /> component uses the d3 tree layout, which produces a tidy node-link diagram.

    -

    The <Cluster /> component uses the d3 cluster layout, which produces the leaf nodes of the tree at the same depth. This is also known as a dendrogram.

    -

    Both components use the same properties. The data must be a root node, as specified in the d3-hierarchy module. Note that you can use d3.hierarchy() to generate a root node from hierarchical data.

    -

    Furthermore, they take in nodeComponent and linkComponent as props, which are required to render the tree.

    -

    See this example for additional details.

    -

    Installation

    -
    npm install --save @vx/hierarchy
-

    Components

    - -

    API

    -

    <HierarchyDefaultLink />

    - - - -

    # HierarchyDefaultLink.link<object>

    -

    <HierarchyDefaultNode />

    - - - -

    # HierarchyDefaultNode.node<object>

    -

    <Cluster />

    - - - -

    # Cluster.children<func>

    -

    # Cluster.className<string>

    -

    # Cluster.left<number>

    -

    # Cluster.linkComponent<any>
    DefaultDefaultLink

    -

    # Cluster.nodeComponent<any>
    DefaultDefaultNode

    -

    # Cluster.nodeSize<arrayOf[object Object]>

    -

    # Cluster.root<object> required

    -

    # Cluster.separation<func>

    -

    # Cluster.size<arrayOf[object Object]>

    -

    # Cluster.top<number>

    -

    <Pack />

    - - - -

    # Pack.children<func>

    -

    # Pack.className<string>

    -

    # Pack.left<number>

    -

    # Pack.nodeComponent<any>
    DefaultDefaultNode

    -

    # Pack.padding<number>

    -

    # Pack.radius<func>

    -

    # Pack.root<object> required

    -

    # Pack.size<arrayOf[object Object]>

    -

    # Pack.top<number>

    -

    <Partition />

    - - - -

    # Partition.children<func>

    -

    # Partition.className<string>

    -

    # Partition.left<number>

    -

    # Partition.nodeComponent<any>
    DefaultDefaultNode

    -

    # Partition.padding<number>

    -

    # Partition.root<object> required

    -

    # Partition.round<bool>

    -

    # Partition.size<arrayOf[object Object]>

    -

    # Partition.top<number>

    -

    <Tree />

    - - - -

    # Tree.children<func>

    -

    # Tree.className<string>

    -

    # Tree.left<number>

    -

    # Tree.linkComponent<any>
    DefaultDefaultLink

    -

    # Tree.nodeComponent<any>
    DefaultDefaultNode

    -

    # Tree.nodeSize<arrayOf[object Object]>

    -

    # Tree.root<object> required

    -

    # Tree.separation<func>

    -

    # Tree.size<arrayOf[object Object]>

    -

    # Tree.top<number>

    -

    <Treemap />

    - - - -

    # Treemap.children<func>

    -

    # Treemap.className<string>

    -

    # Treemap.left<number>

    -

    # Treemap.nodeComponent<any>
    DefaultDefaultNode

    -

    # Treemap.padding<union(number|func)>

    -

    # Treemap.paddingBottom<union(number|func)>

    -

    # Treemap.paddingInner<union(number|func)>

    -

    # Treemap.paddingLeft<union(number|func)>

    -

    # Treemap.paddingOuter<union(number|func)>

    -

    # Treemap.paddingRight<union(number|func)>

    -

    # Treemap.paddingTop<union(number|func)>

    -

    # Treemap.root<object> required

    -

    # Treemap.round<bool>

    -

    # Treemap.size<arrayOf[object Object]>

    -

    # Treemap.tile<func>

    -

    # Treemap.top<number>

    - -
    -
    - - \ No newline at end of file diff --git a/packages/vx-demo/src/static/docs/vx-scale.html b/packages/vx-demo/src/static/docs/vx-scale.html deleted file mode 100644 index b8307e8ff..000000000 --- a/packages/vx-demo/src/static/docs/vx-scale.html +++ /dev/null @@ -1,184 +0,0 @@ - - - - - -
    -
    -
    - - - Star -
    -
    -
    -
    -
    - -
    -
    -

    @vx/scale

    -
    npm install --save @vx/scale
-

    Overview of Scaling

    -

    The @vx/scale package aims to provide a wrapper around existing d3 scaling originally defined in the d3-scale package.

    -

    Scales are functions that help you map your data to the physical pixel size that your graph requires. For example, let's say you wanted to create a bar chart to show populations per country. If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about 321.4 million pixels high!

    -

    Instead, you can tell vx a function to use that takes a value (like your population per country) and spits out another value.

    -

    For example, we could create a linear scale like this:

    -
    const graphHeight = 500; // We'll have a 500 pixel high graph
-const maxPopulation = getMostPopulatedCountryInTheWorld();
-
-const yScale = Scale.scaleLinear({
-  rangeRound: [graphHeight, 0],
-  domain: [0, maxPopulation],
-});
-
-// ...
-
-const bars = data.map((d, i) => {
-  const barHeight = graphHeight - yScale(d.y);
-  return <Shape.Bar height={barHeight} y={graphHeight - barHeight} />
-})
-
    -

    Note: This example represents how to use a yScale, but skipped a lot of details about how to make a bar chart. If you're trying to do that, you should check out this example.

    -

    Current Scaling Options

    -

    Band Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scaleBand({
-  /*
-    range,
-    rangeRound,
-    domain,
-    padding,
-    nice = false
-  */
-});
-
    -

    Linear Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scaleLinear({
-  /*
-    range,
-    rangeRound,
-    domain,
-    nice = false,
-    clamp = false,
-  */
-});
-
    -

    Log Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scaleLog({
-  /*
-    range,
-    rangeRound,
-    domain,
-    base,
-    nice = false,
-    clamp = false,
-  */
-});
-
    -

    Ordinal Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scaleOrdinal({
-  /*
-    range,
-    domain,
-    unknown,
-  */
-});
-
    -

    Point Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scalePoint({
-  /*
-    range,
-    rangeRound,
-    domain,
-    padding,
-    align,
-    nice = false,
-  */
-});
-
    -

    Power Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scalePower({
-  /*
-    range,
-    rangeRound,
-    domain,
-    exponent,
-    nice = false,
-    clamp = false,
-  */
-});
-
    -

    Time Scaling

    -

    Original d3 docs

    -

    Example:

    -
    const scale = Scale.scaleTime({
-  /*
-    range,
-    rangeRound,
-    domain,
-    nice = false,
-    clamp = false,
-   */
-});
-
    -

    You also can scale time with Coordinated Universal Time via scaleUtc.

    -

    Example:

    -
    const scale = Scale.scaleUtc({
-  /*
-    range,
-    rangeRound,
-    domain,
-    nice = false,
-    clamp = false,
-   */
-});
-
    -

    Color Scales

    -

    D3 scales offer the ability to map points to colors. You can use d3-scale-chromatic in conjunction with vx's scaleOrdinal to make color scales.

    -

    You can install d3-scale-chromatic with npm:

    -
    npm install --save d3-scale-chromatic
-

    You create a color scale like so:

    -
    import { scaleOrdinal } from '@vx/scale';
-import { schemeSet1 } from 'd3-scale-chromatic';
-
-const colorScale = scaleOrdinal({
-  domain: arrayOfThings,
-  range: schemeSet1
-});
-
    -

    This generates a color scale with the following colors:

    -

    d3-scale-chromatic schemeSet1

    -

    There are a number of other categorical color schemes available, along with other continuous color schemes.

    - -
    -
    - - \ No newline at end of file diff --git a/packages/vx-hierarchy/Readme.md b/packages/vx-hierarchy/Readme.md index fddc63d64..6d414d56f 100644 --- a/packages/vx-hierarchy/Readme.md +++ b/packages/vx-hierarchy/Readme.md @@ -4,178 +4,32 @@ -This package contains two components, `` and ``, both of which render trees as a node-link diagram. - -The `` component uses the [d3 tree layout](https://github.com/d3/d3-hierarchy#tree), which produces a tidy node-link diagram. - -The `` component uses the [d3 cluster layout](https://github.com/d3/d3-hierarchy#cluster), which produces the leaf nodes of the tree at the same depth. This is also known as a [dendrogram](https://en.wikipedia.org/wiki/Dendrogram). - -Both components use the same properties. The data must be a root node, as specified in the [d3-hierarchy](https://github.com/d3/d3-hierarchy) module. Note that you can use [`d3.hierarchy()`](https://github.com/d3/d3-hierarchy#hierarchy) to generate a root node from hierarchical data. - -Furthermore, they take in `nodeComponent` and `linkComponent` as props, which are required to render the tree. - -See [this example](https://vx-demo.now.sh/trees) for additional details. - +Many datasets are intrinsically hierarchical. This package contains several `react` components for +visualizing hierarchical data and largely mirrors +[`d3-hierarchy`](https://github.com/d3/d3-hierarchy). + +Many components take the same input `hierarchy` data root node as defined in as specified in the +[`d3-hierarchy`](https://github.com/d3/d3-hierarchy) module. For convenience, this package also +exports the [`d3-hierarchy`](https://github.com/d3/d3-hierarchy)utility to generate this format. + +```js +// equivalent to `import { hierarchy } from 'd3-hierarchy';` +import { hierarchy } from '@vx/hierarchy'; + +const root = hierarchy({ + name: 'root', + children: [ + { name: 'child #1' }, + { + name: 'child #2', + children: [{ name: 'grandchild #1' }, { name: 'grandchild #2' }, { name: 'grandchild #3' }], + }, + ], +}); +``` ## Installation ``` npm install --save @vx/hierarchy ``` - - -## Components - - - - - [HierarchyDefaultLink](#hierarchydefaultlink-) - - [HierarchyDefaultNode](#hierarchydefaultnode-) - - [Cluster](#cluster-) - - [Pack](#pack-) - - [Partition](#partition-) - - [Tree](#tree-) - - [Treemap](#treemap-) - -## API - - - -

    <HierarchyDefaultLink />

    - - - -# *HierarchyDefaultLink*.**link**<object> - -

    <HierarchyDefaultNode />

    - - - -# *HierarchyDefaultNode*.**node**<object> - -

    <Cluster />

    - - - -# *Cluster*.**children**<func> - -# *Cluster*.**className**<string> - -# *Cluster*.**left**<number> - -# *Cluster*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Cluster*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Cluster*.**nodeSize**<arrayOf[object Object]> - -# *Cluster*.**root**<object> `required` - -# *Cluster*.**separation**<func> - -# *Cluster*.**size**<arrayOf[object Object]> - -# *Cluster*.**top**<number> - -

    <Pack />

    - - - -# *Pack*.**children**<func> - -# *Pack*.**className**<string> - -# *Pack*.**left**<number> - -# *Pack*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Pack*.**padding**<number> - -# *Pack*.**radius**<func> - -# *Pack*.**root**<object> `required` - -# *Pack*.**size**<arrayOf[object Object]> - -# *Pack*.**top**<number> - -

    <Partition />

    - - - -# *Partition*.**children**<func> - -# *Partition*.**className**<string> - -# *Partition*.**left**<number> - -# *Partition*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Partition*.**padding**<number> - -# *Partition*.**root**<object> `required` - -# *Partition*.**round**<bool> - -# *Partition*.**size**<arrayOf[object Object]> - -# *Partition*.**top**<number> - -

    <Tree />

    - - - -# *Tree*.**children**<func> - -# *Tree*.**className**<string> - -# *Tree*.**left**<number> - -# *Tree*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Tree*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Tree*.**nodeSize**<arrayOf[object Object]> - -# *Tree*.**root**<object> `required` - -# *Tree*.**separation**<func> - -# *Tree*.**size**<arrayOf[object Object]> - -# *Tree*.**top**<number> - -

    <Treemap />

    - - - -# *Treemap*.**children**<func> - -# *Treemap*.**className**<string> - -# *Treemap*.**left**<number> - -# *Treemap*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Treemap*.**padding**<union(number|func)> - -# *Treemap*.**paddingBottom**<union(number|func)> - -# *Treemap*.**paddingInner**<union(number|func)> - -# *Treemap*.**paddingLeft**<union(number|func)> - -# *Treemap*.**paddingOuter**<union(number|func)> - -# *Treemap*.**paddingRight**<union(number|func)> - -# *Treemap*.**paddingTop**<union(number|func)> - -# *Treemap*.**root**<object> `required` - -# *Treemap*.**round**<bool> - -# *Treemap*.**size**<arrayOf[object Object]> - -# *Treemap*.**tile**<func> - -# *Treemap*.**top**<number> diff --git a/packages/vx-hierarchy/docs/api.md b/packages/vx-hierarchy/docs/api.md deleted file mode 100644 index 9baf834a2..000000000 --- a/packages/vx-hierarchy/docs/api.md +++ /dev/null @@ -1,139 +0,0 @@ -

    <HierarchyDefaultLink />

    - - - -# *HierarchyDefaultLink*.**link**<object> - -

    <HierarchyDefaultNode />

    - - - -# *HierarchyDefaultNode*.**node**<object> - -

    <Cluster />

    - - - -# *Cluster*.**children**<func> - -# *Cluster*.**className**<string> - -# *Cluster*.**left**<number> - -# *Cluster*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Cluster*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Cluster*.**nodeSize**<arrayOf[object Object]> - -# *Cluster*.**root**<object> `required` - -# *Cluster*.**separation**<func> - -# *Cluster*.**size**<arrayOf[object Object]> - -# *Cluster*.**top**<number> - -

    <Pack />

    - - - -# *Pack*.**children**<func> - -# *Pack*.**className**<string> - -# *Pack*.**left**<number> - -# *Pack*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Pack*.**padding**<number> - -# *Pack*.**radius**<func> - -# *Pack*.**root**<object> `required` - -# *Pack*.**size**<arrayOf[object Object]> - -# *Pack*.**top**<number> - -

    <Partition />

    - - - -# *Partition*.**children**<func> - -# *Partition*.**className**<string> - -# *Partition*.**left**<number> - -# *Partition*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Partition*.**padding**<number> - -# *Partition*.**root**<object> `required` - -# *Partition*.**round**<bool> - -# *Partition*.**size**<arrayOf[object Object]> - -# *Partition*.**top**<number> - -

    <Tree />

    - - - -# *Tree*.**children**<func> - -# *Tree*.**className**<string> - -# *Tree*.**left**<number> - -# *Tree*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Tree*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Tree*.**nodeSize**<arrayOf[object Object]> - -# *Tree*.**root**<object> `required` - -# *Tree*.**separation**<func> - -# *Tree*.**size**<arrayOf[object Object]> - -# *Tree*.**top**<number> - -

    <Treemap />

    - - - -# *Treemap*.**children**<func> - -# *Treemap*.**className**<string> - -# *Treemap*.**left**<number> - -# *Treemap*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Treemap*.**padding**<union(number|func)> - -# *Treemap*.**paddingBottom**<union(number|func)> - -# *Treemap*.**paddingInner**<union(number|func)> - -# *Treemap*.**paddingLeft**<union(number|func)> - -# *Treemap*.**paddingOuter**<union(number|func)> - -# *Treemap*.**paddingRight**<union(number|func)> - -# *Treemap*.**paddingTop**<union(number|func)> - -# *Treemap*.**root**<object> `required` - -# *Treemap*.**round**<bool> - -# *Treemap*.**size**<arrayOf[object Object]> - -# *Treemap*.**tile**<func> - -# *Treemap*.**top**<number> diff --git a/packages/vx-hierarchy/docs/description.md b/packages/vx-hierarchy/docs/description.md deleted file mode 100644 index 47f6c6cef..000000000 --- a/packages/vx-hierarchy/docs/description.md +++ /dev/null @@ -1,17 +0,0 @@ -# @vx/hierarchy - - - - - -This package contains two components, `` and ``, both of which render trees as a node-link diagram. - -The `` component uses the [d3 tree layout](https://github.com/d3/d3-hierarchy#tree), which produces a tidy node-link diagram. - -The `` component uses the [d3 cluster layout](https://github.com/d3/d3-hierarchy#cluster), which produces the leaf nodes of the tree at the same depth. This is also known as a [dendrogram](https://en.wikipedia.org/wiki/Dendrogram). - -Both components use the same properties. The data must be a root node, as specified in the [d3-hierarchy](https://github.com/d3/d3-hierarchy) module. Note that you can use [`d3.hierarchy()`](https://github.com/d3/d3-hierarchy#hierarchy) to generate a root node from hierarchical data. - -Furthermore, they take in `nodeComponent` and `linkComponent` as props, which are required to render the tree. - -See [this example](https://vx-demo.now.sh/trees) for additional details. diff --git a/packages/vx-hierarchy/docs/docs.md b/packages/vx-hierarchy/docs/docs.md deleted file mode 100644 index fddc63d64..000000000 --- a/packages/vx-hierarchy/docs/docs.md +++ /dev/null @@ -1,181 +0,0 @@ -# @vx/hierarchy - - - - - -This package contains two components, `` and ``, both of which render trees as a node-link diagram. - -The `` component uses the [d3 tree layout](https://github.com/d3/d3-hierarchy#tree), which produces a tidy node-link diagram. - -The `` component uses the [d3 cluster layout](https://github.com/d3/d3-hierarchy#cluster), which produces the leaf nodes of the tree at the same depth. This is also known as a [dendrogram](https://en.wikipedia.org/wiki/Dendrogram). - -Both components use the same properties. The data must be a root node, as specified in the [d3-hierarchy](https://github.com/d3/d3-hierarchy) module. Note that you can use [`d3.hierarchy()`](https://github.com/d3/d3-hierarchy#hierarchy) to generate a root node from hierarchical data. - -Furthermore, they take in `nodeComponent` and `linkComponent` as props, which are required to render the tree. - -See [this example](https://vx-demo.now.sh/trees) for additional details. - - -## Installation - -``` -npm install --save @vx/hierarchy -``` - - -## Components - - - - - [HierarchyDefaultLink](#hierarchydefaultlink-) - - [HierarchyDefaultNode](#hierarchydefaultnode-) - - [Cluster](#cluster-) - - [Pack](#pack-) - - [Partition](#partition-) - - [Tree](#tree-) - - [Treemap](#treemap-) - -## API - - - -

    <HierarchyDefaultLink />

    - - - -# *HierarchyDefaultLink*.**link**<object> - -

    <HierarchyDefaultNode />

    - - - -# *HierarchyDefaultNode*.**node**<object> - -

    <Cluster />

    - - - -# *Cluster*.**children**<func> - -# *Cluster*.**className**<string> - -# *Cluster*.**left**<number> - -# *Cluster*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Cluster*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Cluster*.**nodeSize**<arrayOf[object Object]> - -# *Cluster*.**root**<object> `required` - -# *Cluster*.**separation**<func> - -# *Cluster*.**size**<arrayOf[object Object]> - -# *Cluster*.**top**<number> - -

    <Pack />

    - - - -# *Pack*.**children**<func> - -# *Pack*.**className**<string> - -# *Pack*.**left**<number> - -# *Pack*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Pack*.**padding**<number> - -# *Pack*.**radius**<func> - -# *Pack*.**root**<object> `required` - -# *Pack*.**size**<arrayOf[object Object]> - -# *Pack*.**top**<number> - -

    <Partition />

    - - - -# *Partition*.**children**<func> - -# *Partition*.**className**<string> - -# *Partition*.**left**<number> - -# *Partition*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Partition*.**padding**<number> - -# *Partition*.**root**<object> `required` - -# *Partition*.**round**<bool> - -# *Partition*.**size**<arrayOf[object Object]> - -# *Partition*.**top**<number> - -

    <Tree />

    - - - -# *Tree*.**children**<func> - -# *Tree*.**className**<string> - -# *Tree*.**left**<number> - -# *Tree*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Tree*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Tree*.**nodeSize**<arrayOf[object Object]> - -# *Tree*.**root**<object> `required` - -# *Tree*.**separation**<func> - -# *Tree*.**size**<arrayOf[object Object]> - -# *Tree*.**top**<number> - -

    <Treemap />

    - - - -# *Treemap*.**children**<func> - -# *Treemap*.**className**<string> - -# *Treemap*.**left**<number> - -# *Treemap*.**nodeComponent**<any>
    DefaultDefaultNode
    - -# *Treemap*.**padding**<union(number|func)> - -# *Treemap*.**paddingBottom**<union(number|func)> - -# *Treemap*.**paddingInner**<union(number|func)> - -# *Treemap*.**paddingLeft**<union(number|func)> - -# *Treemap*.**paddingOuter**<union(number|func)> - -# *Treemap*.**paddingRight**<union(number|func)> - -# *Treemap*.**paddingTop**<union(number|func)> - -# *Treemap*.**root**<object> `required` - -# *Treemap*.**round**<bool> - -# *Treemap*.**size**<arrayOf[object Object]> - -# *Treemap*.**tile**<func> - -# *Treemap*.**top**<number> diff --git a/packages/vx-hierarchy/docs/install.md b/packages/vx-hierarchy/docs/install.md deleted file mode 100644 index d71f8d7c3..000000000 --- a/packages/vx-hierarchy/docs/install.md +++ /dev/null @@ -1,5 +0,0 @@ -## Installation - -``` -npm install --save @vx/hierarchy -``` diff --git a/packages/vx-hierarchy/package.json b/packages/vx-hierarchy/package.json index 5abe5b80c..07ce09ca7 100644 --- a/packages/vx-hierarchy/package.json +++ b/packages/vx-hierarchy/package.json @@ -10,9 +10,6 @@ "lib", "esm" ], - "scripts": { - "docs": "cd ./docs && ../../../node_modules/.bin/react-docgen --exclude index.js ../src | ../../../scripts/buildDocs.sh" - }, "repository": { "type": "git", "url": "git+https://github.com/hshoff/vx.git" diff --git a/packages/vx-scale/Readme.md b/packages/vx-scale/Readme.md index e4f1feb87..e3db38533 100644 --- a/packages/vx-scale/Readme.md +++ b/packages/vx-scale/Readme.md @@ -1,45 +1,65 @@ # @vx/scale + + + + +## Installation + ```sh npm install --save @vx/scale ``` -## Overview of Scaling -The `@vx/scale` package aims to provide a wrapper around existing d3 scaling originally defined in the [d3-scale](https://github.com/d3/d3-scale) package. +## Overview of scales + +The `@vx/scale` package aims to provide a wrapper around existing `d3` scaling originally defined in +the [d3-scale](https://github.com/d3/d3-scale) package. -Scales are functions that help you map your data to the physical pixel size that your graph requires. For example, let's say you wanted to create a bar chart to show populations per country. If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about 321.4 million pixels high! +Scales are functions that help you map your data values to the physical pixel size that your graph +requires. For example, let's say you wanted to create a bar chart to show populations per country. +If you were to use a 1-to-1 scale (IE: 1 pixel per y value) your bar for the USA would be about +321.4 million pixels high! -Instead, you can tell vx a function to use that takes a value (like your population per country) and spits out another value. +Instead, you can tell `vx` a function to use that takes a data value (like your population per +country) and quantitatively maps to another dimensional space, like pixels. For example, we could create a linear scale like this: -``` javascript -const graphHeight = 500; // We'll have a 500 pixel high graph -const maxPopulation = getMostPopulatedCountryInTheWorld(); +```js +const graphWidth = 500; +const graphHeight = 200; +const [minX, maxX] = getXMinAndMax(); +const [minY, maxY] = getYMinAndMax(); + +const xScale = Scale.scaleLinear({ + domain: [minX, maxX], // x-coordinate data values + rangeRound: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right +}); const yScale = Scale.scaleLinear({ + domain: [minY, maxY], // y-coordinate data values + // svg y-coordinates, these increase from top to bottom so we reverse the order + // so that minY in data space maps to graphHeight in svg y-coordinate space rangeRound: [graphHeight, 0], - domain: [0, maxPopulation], }); // ... -const bars = data.map((d, i) => { +const points = data.map((d, i) => { const barHeight = graphHeight - yScale(d.y); - return -}) + return ; +}); ``` -**Note:** This example represents how to use a yScale, but skipped a lot of details about how to make a bar chart. If you're trying to do that, you should check out [this example](https://github.com/hshoff/vx/blob/master/packages/vx-demo/src/components/charts/SimpleBar.ts). - -## Current Scaling Options +## Different types of scales -### Band Scaling +### Band scale [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#_band) Example: -``` javascript + +```js const scale = Scale.scaleBand({ /* range, @@ -51,12 +71,13 @@ const scale = Scale.scaleBand({ }); ``` -### Linear Scaling +### Linear scale [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear) Example: -``` javascript + +```js const scale = Scale.scaleLinear({ /* range, @@ -68,12 +89,13 @@ const scale = Scale.scaleLinear({ }); ``` -### Log Scaling +### Log scale [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleLog) Example: -``` javascript + +```js const scale = Scale.scaleLog({ /* range, @@ -86,11 +108,13 @@ const scale = Scale.scaleLog({ }); ``` -### Ordinal Scaling +### Ordinal scale + [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) Example: -``` javascript + +```js const scale = Scale.scaleOrdinal({ /* range, @@ -100,11 +124,13 @@ const scale = Scale.scaleOrdinal({ }); ``` -### Point Scaling +### Point scale + [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scalePoint) Example: -``` javascript + +```js const scale = Scale.scalePoint({ /* range, @@ -117,11 +143,13 @@ const scale = Scale.scalePoint({ }); ``` -### Power Scaling +### Power scale + [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scalePow) Example: -``` javascript + +```js const scale = Scale.scalePower({ /* range, @@ -134,13 +162,13 @@ const scale = Scale.scalePower({ }); ``` -### Square Root Scaling +### Square Root scale [Original d3 docs](https://github.com/d3/d3-scale#scaleSqrt) Example: -```javascript +```js // No need to set the exponent, It is always 0.5 const scale = Scale.scaleSqrt({ /* @@ -153,11 +181,13 @@ const scale = Scale.scaleSqrt({ }); ``` -### Time Scaling +### Time scale + [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleTime) Example: -``` javascript + +```js const scale = Scale.scaleTime({ /* range, @@ -172,7 +202,8 @@ const scale = Scale.scaleTime({ You also can scale time with Coordinated Universal Time via `scaleUtc`. Example: -``` javascript + +```js const scale = Scale.scaleUtc({ /* range, @@ -186,7 +217,9 @@ const scale = Scale.scaleUtc({ ### Color Scales -D3 scales offer the ability to map points to colors. You can use [`d3-scale-chromatic`](https://github.com/d3/d3-scale-chromatic) in conjunction with vx's `scaleOrdinal` to make color scales. +D3 scales offer the ability to map points to colors. You can use +[`d3-scale-chromatic`](https://github.com/d3/d3-scale-chromatic) in conjunction with vx's +`scaleOrdinal` to make color scales. You can install `d3-scale-chromatic` with npm: @@ -196,13 +229,13 @@ npm install --save d3-scale-chromatic You create a color scale like so: -```javascript +```js import { scaleOrdinal } from '@vx/scale'; import { schemeSet1 } from 'd3-scale-chromatic'; const colorScale = scaleOrdinal({ domain: arrayOfThings, - range: schemeSet1 + range: schemeSet1, }); ``` @@ -210,4 +243,6 @@ This generates a color scale with the following colors: ![d3-scale-chromatic schemeSet1](https://raw.githubusercontent.com/d3/d3-scale-chromatic/master/img/Set1.png) -There are a number of other [categorical color schemes](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical) available, along with other continuous color schemes. +There are a number of other +[categorical color schemes](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#categorical) +available, along with other continuous color schemes.