parallel working

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;
-}