diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 7166d38..bc207b8 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@storybook/source-loader": "6.5.6",
     "@storybook/svelte": "6.5.6",
+    "flat": "^5.0.2",
     "svelte": "^3.48.0"
   },
   "devDependencies": {
diff --git a/packages/storybook/stories/PCDemo.stories.js b/packages/storybook/stories/PCDemo.stories.js
index db82035..896d5c3 100644
--- a/packages/storybook/stories/PCDemo.stories.js
+++ b/packages/storybook/stories/PCDemo.stories.js
@@ -13,68 +13,99 @@ import irisComplete from "./datasets/iris.json";
 import mpgComplete from "./datasets/mpg.json";
 import penguinsComplete from "./datasets/penguins.json";
 
+import { flatten, unflatten } from 'flat';
+
+const delimiter = ' > ';
+
 export default {
   title: "missing-coordinates/PC",
   component: PCDemo,
-  argTypes: {},
+  argTypes: {
+    "drawConfiguration > concept": {
+      options: [0, 1, 2],
+      control: { type: 'radio', labels: ["Default", "Axis", "Imputation"] },
+    },
+    "drawConfiguration > variation": {
+      options: [0, 1, 2, 3, 4],
+      control: { type: 'radio', labels: ["Default", "Opacity", "Gradient", "Dashed", "Glyph"] },
+    },
+    "drawConfiguration > coloring > sequentialColorTheme": {
+      options: ['cool', 'warm'],
+      control: { type: 'radio' },
+    },
+    "drawConfiguration > coloring > ordinalColorTheme": {
+      options: ['Category10', 'Tableau10'],
+      control: { type: 'radio' },
+    },
+    "drawConfiguration > lineOpacity": {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+    },
+    "drawConfiguration > missingValuesConfiguration > missingValueOpacity": {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+    },
+    "drawConfiguration > missingValuesConfiguration > gradientFalloff": {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+    },
+    "drawConfiguration > axisAnnotationConfiguration > textAnchor": {
+      options: ['start', 'middle', 'end'],
+      control: { type: 'inline-radio' },
+    },
+    "drawConfiguration > axisLabelConfiguration > textAnchor": {
+      options: ['start', 'middle', 'end'],
+      control: { type: 'inline-radio' },
+    },
+    "data": {
+      table: {
+        disable: true,
+      },
+    }
+  },
 };
 
 const SampleTemplate = ({ ...args }) => ({
   Component: PCDemo,
-  props: args,
+  props: unflatten(args, { delimiter }),
 });
 
 const AirlineCompleteTemplate = ({ ...args }) => ({
   Component: PCDemo,
-  props: args,
+  props: unflatten(args, { delimiter }),
 });
 
 const DriverCompleteTemplate = ({ ...args }) => ({
   Component: PCDemo,
-  props: args,
+  props: unflatten(args, { delimiter }),
 });
 
 const IrisCompleteTemplate = ({ ...args }) => ({
   Component: PCDemo,
-  props: args,
+  props: unflatten(args, { delimiter }),
 });
 
 const MpgCompleteTemplate = ({ ...args }) => ({
   Component: PCDemo,
-  props: args,
+  props: unflatten(args, { delimiter }),
 });
 
 const PenguinCompleteTemplate = ({ ...args }) => ({
   Component: PCDemo,
-  props: args,
+  props: unflatten(args, { delimiter }),
 });
 
 const defaultArgs = {
   drawConfiguration: {
+    concept: Concept.INFORMATION_REMOVAL,
+    variation: Variation.DEFAULT,
     axesSpacing: 120,
     axisHeight: 200,
-    axisLabelConfiguration: {
-      show: true,
-      textAnchor: "middle",
-      axisLabelPosition: TopBottomPosition.ABOVE,
-      margin: 5,
-    },
-    axisAnnotationConfiguration: {
-      show: true,
-      textAnchor: "middle",
-      margin: 5,
-    },
-    margin: { left: 20, right: 20, top: 20, bottom: 20 },
-    fontSize: 12,
-    variation: Variation.DEFAULT,
-    concept: Concept.INFORMATION_REMOVAL,
-    drawingOrder: DrawingOrder.RANDOM,
-    lineOpacity: 0.5,
     coloring: {
       coloringAxis: "species",
       ordinalColorTheme: "Category10",
       sequentialColorTheme: "cool",
     },
+    lineOpacity: 0.5,
+    fontSize: 12,
+    drawingOrder: DrawingOrder.RANDOM,
     missingValuesConfiguration: {
       missingValuesAxisSpacing: 35,
       imputationNeighbors: 2,
@@ -83,13 +114,24 @@ const defaultArgs = {
       strokeDasharray: "5 5",
       gradientFalloff: 0.25,
     },
+    axisAnnotationConfiguration: {
+      show: true,
+      textAnchor: "middle",
+      margin: 5,
+    },
+    axisLabelConfiguration: {
+      show: true,
+      textAnchor: "middle",
+      axisLabelPosition: TopBottomPosition.ABOVE,
+      margin: 5,
+    },
+    margin: { left: 20, right: 20, top: 20, bottom: 20 },
   },
 };
 
 export const Sample = SampleTemplate.bind({});
 Sample.args = {
-  data: sample,
-  ...{
+  ...flatten({
     drawConfiguration: {
       ...defaultArgs.drawConfiguration,
       coloring: {
@@ -97,13 +139,13 @@ Sample.args = {
         coloringAxis: "dim 1",
       },
     },
-  },
+  }, { delimiter }),
+  data: sample,
 };
 
 export const AirlineComplete = AirlineCompleteTemplate.bind({});
 AirlineComplete.args = {
-  data: airlineSafetyComplete,
-  ...{
+  ...flatten({
     drawConfiguration: {
       ...defaultArgs.drawConfiguration,
       axesSpacing: 150,
@@ -114,13 +156,13 @@ AirlineComplete.args = {
         coloringAxis: "fatalities_00_14",
       },
     },
-  },
+  }, { delimiter }),
+  data: airlineSafetyComplete,
 };
 
 export const DriverComplete = DriverCompleteTemplate.bind({});
 DriverComplete.args = {
-  data: badDriverComplete,
-  ...{
+  ...flatten({
     drawConfiguration: {
       ...defaultArgs.drawConfiguration,
       axesSpacing: 150,
@@ -131,26 +173,26 @@ DriverComplete.args = {
         coloringAxis: "Alc. Impaired",
       },
     },
-  },
+  }, { delimiter }),
+  data: badDriverComplete,
 };
 
 export const IrisComplete = IrisCompleteTemplate.bind({});
 IrisComplete.args = {
-  data: irisComplete,
-  ...{
+  ...flatten({
     drawConfiguration: {
       ...defaultArgs.drawConfiguration,
       axesSpacing: 150,
       axisHeight: 200,
       margin: { ...defaultArgs.drawConfiguration.margin, left: 50, right: 50 },
     },
-  },
+  }, { delimiter }),
+  data: irisComplete,
 };
 
 export const MpgComplete = MpgCompleteTemplate.bind({});
 MpgComplete.args = {
-  data: mpgComplete,
-  ...{
+  ...flatten({
     drawConfiguration: {
       ...defaultArgs.drawConfiguration,
       axesSpacing: 150,
@@ -160,18 +202,19 @@ MpgComplete.args = {
         coloringAxis: "origin",
       },
     },
-  },
+  }, { delimiter }),
+  data: mpgComplete,
 };
 
 export const PenguinComplete = PenguinCompleteTemplate.bind({});
 PenguinComplete.args = {
-  data: penguinsComplete,
-  ...{
+  ...flatten({
     drawConfiguration: {
       ...defaultArgs.drawConfiguration,
       axesSpacing: 150,
       axisHeight: 350,
       margin: { ...defaultArgs.drawConfiguration.margin, left: 30, right: 30 },
     },
-  },
+  }, { delimiter }),
+  data: penguinsComplete,
 };