@d3plus/docs 3.0.0-alpha.3

package/packages/core/charts/AreaPlot.stories.jsx

@@ -0,0 +1,74 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes, AreaPlot} from "../../../args/core/charts/AreaPlot.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/AreaPlot",
+  component: AreaPlot,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates an area plot based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <AreaPlot config={configify(args, argTypes)} />;
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+
+export const BasicExample = {
+  args: {
+    data: [
+      {id: "alpha", x: 1, y: 7},
+      {id: "alpha", x: 2, y: 2},
+      {id: "alpha", x: 3, y: 13},
+      {id: "alpha", x: 4, y: 4},
+      {id: "alpha", x: 5, y: 22},
+      {id: "alpha", x: 6, y: 13}
+    ],
+    groupBy: "id",
+    x: "x",
+    y: "y"
+  },
+  parameters: {
+    nextjs: {
+      router: {
+        pathname: "/core/charts/AreaPlot"
+      }
+    }
+  },
+  render: Template
+}
+
+export const ChangingAreaOpacity = Template.bind({});
+ChangingAreaOpacity.args = {
+  data: [
+    {id: "alpha", x: 1, y: 7},
+    {id: "alpha", x: 2, y: 2},
+    {id: "alpha", x: 3, y: 13},
+    {id: "alpha", x: 4, y: 4},
+    {id: "alpha", x: 5, y: 22},
+    {id: "beta", x: 1, y: 10},
+    {id: "beta", x: 2, y: 6},
+    {id: "beta", x: 3, y: 3},
+    {id: "beta", x: 4, y: 12},
+    {id: "beta", x: 5, y: 11}
+  ],
+  groupBy: "id",
+  shapeConfig: {
+    fill: "red",
+    Area: {
+      fillOpacity: 0.5
+    }
+  }
+};
+ChangingAreaOpacity.parameters = {controls: {include: ["shapeConfig"]}};

package/packages/core/charts/BarChart.stories.jsx

@@ -0,0 +1,307 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes, BarChart} from "../../../args/core/charts/BarChart.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/BarChart",
+  component: BarChart,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a bar chart based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <BarChart config={configify(args, argTypes)} />;
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+
+export const BasicExample = Template.bind({});
+BasicExample.args = {
+  data: [
+    {id: "alpha", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13}
+  ],
+  groupBy: "id",
+  x: "x",
+  y: "y"
+};
+BasicExample.parameters = {controls: {include: ["x", "y"]}};
+
+export const SortingBars = Template.bind({});
+SortingBars.args = {
+  data: [
+    {"Travel Time": "< 5 Minutes",     "ID Travel Time": "0", "Population Percentage":  2},
+    {"Travel Time": "15 - 24 Minutes", "ID Travel Time": "2", "Population Percentage": 30},
+    {"Travel Time": "35 - 44 Minutes", "ID Travel Time": "4", "Population Percentage":  7},
+    {"Travel Time": "45 - 89 Minutes", "ID Travel Time": "5", "Population Percentage": 11},
+    {"Travel Time": "5 - 14 Minutes",  "ID Travel Time": "1", "Population Percentage": 20},
+    {"Travel Time": "90+ Minutes",     "ID Travel Time": "6", "Population Percentage":  5},
+    {"Travel Time": "25 - 34 Minutes", "ID Travel Time": "3", "Population Percentage": 25}
+  ],
+  groupBy: "Travel Time",
+  x: "Travel Time",
+  y: "Population Percentage",
+  xSort: funcify(
+    (a, b) => a["ID Travel Time"] - b["ID Travel Time"],
+    `(a, b) => a["ID Travel Time"] - b["ID Travel Time"]`
+  )
+};
+SortingBars.parameters = {controls: {include: ["xSort"]}};
+
+export const CustomBarPadding = Template.bind({});
+CustomBarPadding.args = {
+  data: [
+    {id: "alpha", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13}
+  ],
+  barPadding: 5,
+  groupBy: "id",
+  groupPadding: 40,
+  x: "x",
+  y: "y"
+}
+CustomBarPadding.parameters = {controls: {include: ["barPadding", "groupPadding"]}};
+
+export const StackedBars = Template.bind({});
+StackedBars.args = {
+  data: [
+    {id: "alpha", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13}
+  ],
+  groupBy: "id",
+  stacked: true,
+  x: "x",
+  y: "y"
+};
+StackedBars.parameters = {controls: {include: ["stacked"]}};
+
+export const HorizontalBars = Template.bind({});
+HorizontalBars.args = {
+  data: [
+    {id: "alpha", x: 4, y:  7},
+    {id: "alpha", x: 5, y: 25},
+    {id: "alpha", x: 6, y: 13},
+    {id: "beta",  x: 4, y: 17},
+    {id: "beta",  x: 5, y:  8},
+    {id: "beta",  x: 6, y: 13}
+
+  ],
+  groupBy: "id",
+  discrete: "y",
+  x: "y",
+  y: "x"
+};
+HorizontalBars.parameters = {controls: {include: ["discrete", "x", "y"]}};
+
+export const PopulationPyramid = Template.bind({});
+PopulationPyramid.args = {
+  data: [
+    {
+      "Age range": "0 to 4",
+      "Sex": "Male",
+      "Population": 1445122
+    },
+    {
+      "Age range": "0 to 4",
+      "Sex": "Female",
+      "Population": -1385933
+    },
+    {
+      "Age range": "5 to 9",
+      "Sex": "Male",
+      "Population": 1473968
+    },
+    {
+      "Age range": "5 to 9",
+      "Sex": "Female",
+      "Population": -1417319
+    },
+    {
+      "Age range": "10 to 15",
+      "Sex": "Male",
+      "Population": 1483727
+    },
+    {
+      "Age range": "10 to 15",
+      "Sex": "Female",
+      "Population": -1430083
+    },
+    {
+      "Age range": "15 to 19",
+      "Sex": "Male",
+      "Population": 1466289
+    },
+    {
+      "Age range": "15 to 19",
+      "Sex": "Female",
+      "Population": -1420257
+    },
+    {
+      "Age range": "20 to 24",
+      "Sex": "Male",
+      "Population": 1438000
+    },
+    {
+      "Age range": "20 to 24",
+      "Sex": "Female",
+      "Population": -1401017
+    },
+    {
+      "Age range": "25 to 29",
+      "Sex": "Male",
+      "Population": 1371191
+    },
+    {
+      "Age range": "25 to 29",
+      "Sex": "Female",
+      "Population": -1344048
+    },
+    {
+      "Age range": "30 to 34",
+      "Sex": "Male",
+      "Population": 1251238
+    },
+    {
+      "Age range": "30 to 34",
+      "Sex": "Female",
+      "Population": -1233884
+    },
+    {
+      "Age range": "35 to 39",
+      "Sex": "Male",
+      "Population": 1156915
+    },
+    {
+      "Age range": "35 to 39",
+      "Sex": "Female",
+      "Population": -1145477
+    },
+    {
+      "Age range": "40 to 44",
+      "Sex": "Male",
+      "Population": 1038422
+    },
+    {
+      "Age range": "40 to 44",
+      "Sex": "Female",
+      "Population": -1034343
+    },
+    {
+      "Age range": "45 to 49",
+      "Sex": "Male",
+      "Population": 899326
+    },
+    {
+      "Age range": "45 to 49",
+      "Sex": "Female",
+      "Population": -903752
+    },
+    {
+      "Age range": "50 to 54",
+      "Sex": "Male",
+      "Population": 774590
+    },
+    {
+      "Age range": "50 to 54",
+      "Sex": "Female",
+      "Population": -788241
+    },
+    {
+      "Age range": "55 to 59",
+      "Sex": "Male",
+      "Population": 634510
+    },
+    {
+      "Age range": "55 to 59",
+      "Sex": "Female",
+      "Population": -658490
+    },
+    {
+      "Age range": "60 to 64",
+      "Sex": "Male",
+      "Population": 501128
+    },
+    {
+      "Age range": "60 to 64",
+      "Sex": "Female",
+      "Population": -532940
+    },
+    {
+      "Age range": "65 to 69",
+      "Sex": "Male",
+      "Population": 379352
+    },
+    {
+      "Age range": "65 to 69",
+      "Sex": "Female",
+      "Population": -415647
+    },
+    {
+      "Age range": "70 to 74",
+      "Sex": "Male",
+      "Population": 271687
+    },
+    {
+      "Age range": "70 to 74",
+      "Sex": "Female",
+      "Population": -311231
+    },
+    {
+      "Age range": "75 to 79",
+      "Sex": "Male",
+      "Population": 186805
+    },
+    {
+      "Age range": "75 to 79",
+      "Sex": "Female",
+      "Population": -229221
+    },
+    {
+      "Age range": "80+",
+      "Sex": "Male",
+      "Population": 166789
+    },
+    {
+      "Age range": "80+",
+      "Sex": "Female",
+      "Population": -235076
+    }
+  ],
+  discrete: "y",
+  groupBy: "Sex",
+  shapeConfig: {
+    label: false
+  },
+  stacked: true,
+  x: "Population",
+  xConfig: {
+    tickFormat: funcify(
+      d => formatAbbreviate(Math.abs(d)),
+      "d => formatAbbreviate(Math.abs(d))"
+    )
+  },
+  y: "Age range"
+};
+PopulationPyramid.parameters = {controls: {include: ["stacked", "xConfig"]}};

package/packages/core/charts/BoxWhisker.stories.jsx

@@ -0,0 +1,204 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes, BoxWhisker} from "../../../args/core/charts/BoxWhisker.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/BoxWhisker",
+  component: BoxWhisker,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a simple box and whisker based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <BoxWhisker config={configify(args, argTypes)} />;
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+
+export const BasicExample = Template.bind({});
+BasicExample.args = {
+  data: [
+    {id: "alpha", value: 300},
+    {id: "alpha", value: 20},
+    {id: "alpha", value: 180},
+    {id: "alpha", value: 40},
+    {id: "alpha", value: 170},
+    {id: "alpha", value: 125},
+    {id: "alpha", value: 74},
+    {id: "alpha", value: 80},
+    {id: "beta", value: 180},
+    {id: "beta", value: 30},
+    {id: "beta", value: 120},
+    {id: "beta", value: 50},
+    {id: "beta", value: 140},
+    {id: "beta", value: 115},
+    {id: "beta", value: 14},
+    {id: "beta", value: 30}
+  ],
+  groupBy: ["id", "value"],
+  legend: false,
+  x: "id",
+  y: "value"
+};
+
+export const ShowingOutliers = Template.bind({});
+ShowingOutliers.args = {
+  data: [
+    {id: "alpha", value: 840},
+    {id: "alpha", value: 940},
+    {id: "alpha", value: 780},
+    {id: "alpha", value: 650},
+    {id: "alpha", value: 720},
+    {id: "alpha", value: 430},
+    {id: "alpha", value: 1850},
+    {id: "alpha", value: 300},
+    {id: "alpha", value: 360},
+    {id: "alpha", value: 1690},
+    {id: "alpha", value: 690},
+    {id: "alpha", value: -950},
+    {id: "alpha", value: -600},
+    {id: "alpha", value: -850},
+    {id: "beta", value: 980},
+    {id: "beta", value: 300},
+    {id: "beta", value: 120},
+    {id: "beta", value: 500},
+    {id: "beta", value: 140},
+    {id: "beta", value: 115},
+    {id: "beta", value: 14},
+    {id: "beta", value: -30},
+    {id: "beta", value: -1050},
+    {id: "beta", value: -100},
+    {id: "beta", value: -800},
+    {id: "beta", value: -1100}
+  ],
+  groupBy: ["id", "value"],
+  legend: false,
+  x: "id",
+  y: "value"
+};
+
+export const ChangingEndpointShapes = Template.bind({});
+ChangingEndpointShapes.args = {
+  data: [
+    {id: "alpha", value: 300},
+    {id: "alpha", value: 20},
+    {id: "alpha", value: 180},
+    {id: "alpha", value: 40},
+    {id: "alpha", value: 170},
+    {id: "alpha", value: 125},
+    {id: "alpha", value: 74},
+    {id: "alpha", value: 80},
+    {id: "beta",  value: 180},
+    {id: "beta",  value: 30},
+    {id: "beta",  value: 120},
+    {id: "beta",  value: 50},
+    {id: "beta",  value: 140},
+    {id: "beta",  value: 115},
+    {id: "beta",  value: 14},
+    {id: "beta",  value: 30},
+  ],
+  groupBy: ["id", "value"],
+  shapeConfig: {
+    whiskerConfig: {
+      endpoint: funcify(
+        d => d.id === "alpha" ? "Rect" : "Circle",
+        "d => d.id === 'alpha' ? 'Rect' : 'Circle'"
+      )
+    }
+  },
+  x: "id",
+  y: "value"
+};
+ChangingEndpointShapes.parameters = {controls: {include: ["shapeConfig"]}};
+
+export const ChangingOutlierStyles = Template.bind({});
+ChangingOutlierStyles.args = {
+  data: [
+    {id: "alpha", value: 840},
+    {id: "alpha", value: 940},
+    {id: "alpha", value: 780},
+    {id: "alpha", value: 650},
+    {id: "alpha", value: 720},
+    {id: "alpha", value: 430},
+    {id: "alpha", value: 1850},
+    {id: "alpha", value: 300},
+    {id: "alpha", value: 360},
+    {id: "alpha", value: 1690},
+    {id: "alpha", value: 690},
+    {id: "alpha", value: -950},
+    {id: "alpha", value: -600},
+    {id: "alpha", value: -850},
+    {id: "beta", value: 980},
+    {id: "beta", value: 300},
+    {id: "beta", value: 120},
+    {id: "beta", value: 500},
+    {id: "beta", value: 140},
+    {id: "beta", value: 115},
+    {id: "beta", value: 14},
+    {id: "beta", value: -30},
+    {id: "beta", value: -1050},
+    {id: "beta", value: -100},
+    {id: "beta", value: -800},
+    {id: "beta", value: -1100}
+  ],
+  groupBy: ["id", "value"],
+  shapeConfig: {
+    outlier: funcify(
+      d => d.id === "alpha" ? "Circle" : "Rect",
+      "d => d.id === 'alpha' ? 'Circle' : 'Rect'"
+    ),
+    outlierConfig: {
+      Rect: {
+        fill: "green"
+      },
+      Circle: {
+        fill: "red"
+      }
+    }
+  },
+  x: "id",
+  y: "value"
+};
+ChangingOutlierStyles.parameters = {controls: {include: ["shapeConfig"]}};
+
+export const HorizontalChart = Template.bind({});
+HorizontalChart.args = {
+  data: [
+    {id: "alpha", value: 300},
+    {id: "alpha", value:  20},
+    {id: "alpha", value: 180},
+    {id: "alpha", value:  40},
+    {id: "alpha", value: 170},
+    {id: "alpha", value: 125},
+    {id: "alpha", value:  74},
+    {id: "alpha", value:  80},
+    {id: "beta",  value: 180},
+    {id: "beta",  value:  30},
+    {id: "beta",  value: 120},
+    {id: "beta",  value:  50},
+    {id: "beta",  value: 140},
+    {id: "beta",  value: 115},
+    {id: "beta",  value:  14},
+    {id: "beta",  value:  30}
+  ],
+  groupBy: ["id", "value"],
+  discrete: "y",
+  shapeConfig: {
+    Box: {
+      orient: "horizontal"
+    }
+  },
+  x: "value",
+  y: "id"
+};
+HorizontalChart.parameters = {controls: {include: ["discrete", "shapeConfig"]}};

package/packages/core/charts/BumpChart.stories.jsx

@@ -0,0 +1,52 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes, BumpChart} from "../../../args/core/charts/BumpChart.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/BumpChart",
+  component: BumpChart,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Creates a bump chart based on an array of data.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <BumpChart config={configify(args, argTypes)} />;
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+
+export const BasicExample = Template.bind({});
+BasicExample.args = {
+  data: [
+    {fruit: "apple", label: "Apple", year: 1, rank: 1},
+    {fruit: "apple", label: "Apple", year: 2, rank: 2},
+    {fruit: "apple", label: "Apple", year: 3, rank: 1},
+    {fruit: "banana", label: "Banana", year: 1, rank: 2},
+    {fruit: "banana", label: "Banana", year: 2, rank: 4},
+    {fruit: "banana", label: "Banana", year: 3, rank: 3},
+    {fruit: "cherry", label: "Cherry", year: 1, rank: 4},
+    {fruit: "cherry", label: "Cherry", year: 2, rank: 3},
+    {fruit: "cherry", label: "Cherry", year: 3, rank: 2},
+    {fruit: "orange", label: "Orange", year: 1, rank: 3},
+    {fruit: "orange", label: "Orange", year: 2, rank: 1},
+    {fruit: "orange", label: "Orange", year: 3, rank: 4}
+  ],
+  groupBy: "fruit",
+  discrete: "x",
+  label: funcify(
+    d => d.label,
+    "d => d.label"
+  ),
+  x: "year",
+  y: "rank"
+};

package/packages/core/charts/Donut.stories.jsx

@@ -0,0 +1,41 @@
+// WARNING: do not edit the top part of this file directly, it is generated
+// from the source code. Scroll down to the next WARNING and places stories below it.
+
+import React from "react";
+
+import {argTypes, Donut} from "../../../args/core/charts/Donut.args";
+import configify from "../../../helpers/configify";
+import funcify from "../../../helpers/funcify";
+
+export default {
+  title: "Core/Charts/Donut",
+  component: Donut,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: "Extends the Pie visualization to create a donut chart.",
+      },
+    },
+  }
+};
+
+const Template = (args) => <Donut config={configify(args, argTypes)} />;
+  
+// WARNING: do not edit above this line of code directly, it is generated
+// from the source code. Stories below this line can be modified.
+
+export const BasicExample = Template.bind({});
+BasicExample.args = {
+  data: [
+    {Topping: "Powdered sugar", Sold: 40},
+    {Topping: "Cinnamon", Sold: 20},
+    {Topping: "Sprinkles", Sold: 25},
+    {Topping: "Fruits", Sold: 30},
+    {Topping: "Cream", Sold: 15}
+  ],
+  groupBy: "Topping",
+  value: "Sold"
+};
+BasicExample.parameters = {controls: {include: ["value"]}};
+