color emoji icon and colocate with names

src/components/continuous/continuous.js

@@ -8,7 +8,6 @@ import SectionHeader from "../framework/sectionHeader";
 import setupParallelCoordinates from "./setupParallelCoordinates";
 import drawAxes from "./drawAxes";
 import drawLinesCanvas from "./drawLinesCanvas";
-import ColorControl from "../controls/color";
 
 import {
   margin,
@@ -80,6 +79,7 @@ class Continuous extends React.Component {
         height,
         width,
         this.handleBrushAction.bind(this),
+        this.handleColorAction.bind(this),
       );
 
       this.setState({
@@ -128,6 +128,13 @@ class Continuous extends React.Component {
       data: selection
     })
   }
+  handleColorAction (key) {
+    this.props.dispatch({
+      type: "color by continuous metadata",
+      colorAccessor: key,
+      rangeMaxForColorAccessor: this.props.initializeRanges[key].range.max
+    });
+  }
 
   render() {
 
@@ -140,7 +147,6 @@ class Continuous extends React.Component {
             width:  width + margin.left + margin.right + "px",
             height: height + margin.top + margin.bottom + "px"
           }}></div>
-          <ColorControl/>
       </div>
     )
   }

src/components/continuous/drawAxes.js

@@ -14,6 +14,7 @@ const drawAxes = (
   height,
   width,
   handleBrushAction,
+  handleColorAction,
 ) => {
 
   /*****************************************
@@ -52,9 +53,10 @@ const drawAxes = (
         d3.select(this).call(renderAxis);
       })
     .append("text")
+      .on("click", (d) => { handleColorAction(d.key) })
       .attr("class", styles.title)
       .attr("text-anchor", "start")
-      .text(function(d) { return "description" in d ? d.description : d.key; });
+      .text(function(d) { return "description" in d ? d.description + "  🎨" : d.key + "  🎨"; });
 
   // Add and store a brush for each axis.
   axes.append("g")

src/components/continuous/parallelCoordinates.css

@@ -26,8 +26,12 @@ body {
   font-size: 10px;
   transform: rotate(-21deg) translate(-5px,-6px);
   fill: #222;
+  cursor: pointer;
 }
 
+/* -webkit-filter: grayscale(100%);
+ filter: grayscale(100%); */
+
 .axis line,
 .axis path {
   fill: none;