parallel working

index.html

@@ -5,6 +5,99 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#db5945">
     <title>Cellx</title>
+    <style>
+    /*
+
+    This code can be found: https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
+
+    body {
+      min-width: 760px;
+    }
+    */
+
+    .parcoords {
+      display: block;
+    }
+
+    .parcoords svg,
+    .parcoords canvas {
+      font: 10px sans-serif;
+      position: absolute;
+    }
+
+    .parcoords canvas {
+      opacity: 0.9;
+      pointer-events: none;
+    }
+
+    .axis .title {
+      font-size: 10px;
+      transform: rotate(-21deg) translate(-5px,-6px);
+      fill: #222;
+    }
+
+    .axis line,
+    .axis path {
+      fill: none;
+      stroke: #ccc;
+      stroke-width: 1px;
+    }
+
+    .axis .tick text {
+      fill: #222;
+      pointer-events: none;
+    }
+
+    /*
+    old, from reference bl.ocks
+    .axis.manufac_name .tick text,
+    .axis.food_group .tick text {
+      opacity: 1;
+    }
+    */
+
+    .axis:hover line,
+    .axis:hover path,
+    .axis.active line,
+    .axis.active path {
+      fill: none;
+      stroke: #222;
+      stroke-width: 1px;
+    }
+
+    .axis:hover .title {
+      font-weight: bold;
+    }
+
+    .axis:hover .tick text {
+      opacity: 1;
+    }
+
+    .axis.active .title {
+      font-weight: bold;
+    }
+
+    .axis.active .tick text {
+      opacity: 1;
+      font-weight: bold;
+    }
+
+    .brush .extent {
+      fill-opacity: .3;
+      stroke: #fff;
+      stroke-width: 1px;
+    }
+
+    pre {
+      width: 100%;
+      height: 300px;
+      margin: 6px 12px;
+      tab-size: 40;
+      font-size: 10px;
+      overflow: auto;
+    }
+
+    </style>
   </head>
   <body>
     <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>