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>

src/components/categorical/categorical.js

@@ -9,9 +9,9 @@ const Button = ({category, c, i}) => (
   <button
     key={i}
     style={{
-      border: i === 0 ? "none" : `1px solid ${globals.lightgrey}`,
+      border: i > -1 ? "none" : `1px solid ${globals.lightgrey}`,
-      background: i === 0 ? globals.hcaBlue : "none",
+      background: i > -1 ? globals.hcaBlue : "none",
-      color: i === 0 ? "white" : "black",
+      color: i > -1 ? "white" : "black",
       padding: "7px 10px",
       marginRight: 20,
       borderRadius: 3,
@@ -20,8 +20,8 @@ const Button = ({category, c, i}) => (
     {c}
     <span
       style={{
-        fontWeight: i === 0 ? globals.bolder : "auto",
+        fontWeight: i > -1 ? globals.bolder : "auto",
-        background: i === 0 ? "white" : "none",
+        background: i > -1 ? "white" : "none",
         color: "black",
         marginLeft: 10,
         padding: "2px 4px",

src/components/continuous/drawParallelCoordinates.js

@@ -113,7 +113,7 @@ const drawParallelCoordinates = (data) => {
   ******************************************/
 
   var container = d3.select("body").append("div")
-      .attr("class", styles.parcoords)
+      .attr("class", "parcoords")
       .style("width", width + margin.left + margin.right + "px")
       .style("height", height + margin.top + margin.bottom + "px");
 
@@ -142,12 +142,12 @@ const drawParallelCoordinates = (data) => {
   var axes = svg.selectAll(".axis")
       .data(dimensions)
     .enter().append("g")
-      .attr("class", styles.axis)
+      .attr("class", "axis")
       .attr("transform", function(d,i) { return "translate(" + xscale(i) + ")"; });
 
   /*****************************************
   ******************************************
-        process and visualize data
+      process data and extract features
   ******************************************
   ******************************************/
 
@@ -236,14 +236,13 @@ const drawParallelCoordinates = (data) => {
     ******************************************
     ******************************************/
 
-    const brush = () => {
+    function brush () {
       render.invalidate();
 
-      console.log('brush', svg.selectAll(".axis .brush"))
-
       var actives = [];
       svg.selectAll(".axis .brush")
-        .filter((d) => {
+        .filter(function (d) {
+          console.log('this', this)
           return d3.brushSelection(this);
         })
         .each(function(d) {
@@ -298,13 +297,13 @@ const drawParallelCoordinates = (data) => {
           d3.select(this).call(renderAxis);
         })
       .append("text")
-        .attr("class", styles.title)
+        .attr("class", "title")
         .attr("text-anchor", "start")
         .text(function(d) { return "description" in d ? d.description : d.key; });
 
     // Add and store a brush for each axis.
     axes.append("g")
-        .attr("class", styles.brush)
+        .attr("class", "brush")
         .each(function(d) {
           d3.select(this).call(d.brush = d3.brushY()
             .extent([[-10,0], [10,height]])

src/components/continuous/parallelCoordinates.css

@@ -1,91 +0,0 @@
-/*
-
-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;
-  opacity: 0;
-  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;
-}