metadata in parallel

src/components/continuous/drawParallelCoordinates.js

@@ -147,14 +147,11 @@ const drawParallelCoordinates = (data) => {
 
   /*****************************************
   ******************************************
-        Setup SVG & Canvas elements
+        process and visualize data
   ******************************************
   ******************************************/
 
-  d3.csv("https://gist.githubusercontent.com/syntagmatic/05a5b0897a48890133beb59c815bd953/raw/310a68d713eb4d351f809b6cfbcffe3d9d96a205/nutrient.csv", (error, data) => {
-    if (error) throw error;
-
-    // shuffle the data!
+    // shuffle the data! - or not, this is a visual effect
     data = d3.shuffle(data);
 
     data.forEach(function(d) {
@@ -182,7 +179,24 @@ const drawParallelCoordinates = (data) => {
     });
 
     const draw = (d) => {
-      ctx.strokeStyle = "rgba(0,0,0,.4)" /* color(d.food_group); */
+
+      /*
+
+      line color options 8/23/2017:
+
+      Cluster_2d_color
+      Cluster_CNV_color
+      Location.color
+      Sample.name.color
+      Sample.type.color
+      Selection.color
+      housekeeping_cluster_color
+      recluster_myeloid
+      recluster_myeloid_color
+
+      */
+
+      ctx.strokeStyle = d["Cluster_2d_color"]; //"rgba(0,0,0,.4)" /* color(d.food_group); */
       ctx.beginPath();
       var coords = project(d);
       coords.forEach((p,i) => {
@@ -225,6 +239,8 @@ const drawParallelCoordinates = (data) => {
     const brush = () => {
       render.invalidate();
 
+      console.log('brush', svg.selectAll(".axis .brush"))
+
       var actives = [];
       svg.selectAll(".axis .brush")
         .filter((d) => {
@@ -252,13 +268,20 @@ const drawParallelCoordinates = (data) => {
       render(selected);
 
       output.text(d3.tsvFormat(selected.slice(0,24)));
-      console.log('fires brush', actives)
+      // console.log('fires brush', actives)
     }
 
     function brushstart() {
       d3.event.sourceEvent.stopPropagation();
     }
 
+
+    /*****************************************
+    ******************************************
+                    Render
+    ******************************************
+    ******************************************/
+
     var render = renderQueue(draw).rate(50);
 
     ctx.clearRect(0,0,width,height);
@@ -307,8 +330,6 @@ const drawParallelCoordinates = (data) => {
       });
     };
 
-  });
-
 }
 
 export default drawParallelCoordinates;

src/components/continuous/util.js

@@ -14,7 +14,7 @@ export const types = {
     coerce: function(d) { return +d; },
     extent: d3.extent,
     within: function(d, extent, dim) { return extent[0] <= dim.scale(d) && dim.scale(d) <= extent[1]; },
-    defaultScale: d3.scaleLinear().range([innerHeight, 0])
+    defaultScale: d3.scaleSqrt().range([innerHeight, 0])
   },
   "String": {
     key: "String",
@@ -34,122 +34,87 @@ export const types = {
 
 export const dimensions = [
   {
-    key: "Total lipid (fat) (g)",
+    key: "Total_reads",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Sugars, total (g)",
+    key: "Unique_reads",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Calcium, Ca (mg)",
+    key: "Unique_reads_percent",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Sodium, Na (mg)",
+    key: "Genes_detected",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Phosphorus, P (mg)",
+    key: "ERCC_reads",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Potassium, K (mg)",
+    key: "Non_ERCC_reads",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Thiamin (mg)",
+    key: "ERCC_to_non_ERCC",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Riboflavin (mg)",
+    key: "Multimapping_reads_percent",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Niacin (mg)",
+    key: "Splice_sites_AT.AC",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Iron, Fe (mg)",
+    key: "Splice_sites_Annotated",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Magnesium, Mg (mg)",
+    key: "Splice_sites_GC.AG",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Protein (g)",
+    key: "Splice_sites_GT.AG",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Zinc, Zn (mg)",
+    key: "Splice_sites_non_canonical",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Vitamin B-6 (mg)",
+    key: "Splice_sites_total",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Vitamin B-12 (mcg)",
+    key: "Unmapped_mismatch",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Folic acid (mcg)",
+    key: "Unmapped_other",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   },
   {
-    key: "Selenium, Se (mcg)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Vitamin A, IU (IU)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Vitamin K (phylloquinone) (mcg)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Vitamin C, total ascorbic acid (mg)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Vitamin D (IU)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Cholesterol (mg)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Fiber, total dietary (g)",
-    type: types["Number"],
-    scale: d3.scaleSqrt().range([innerHeight, 0])
-  },
-  {
-    key: "Carbohydrate, by difference (g)",
+    key: "Unmapped_short",
     type: types["Number"],
     scale: d3.scaleSqrt().range([innerHeight, 0])
   }

src/globals.js

@@ -1,20 +1,20 @@
 /* these will be either (preferably) specified or inferred */
 export const categories = ["Sample.type", "Selection", "Location", "Sample.name", "Class", "Neoplastic"];
 export const continuous = [
+  "Total_reads",
+  "Unique_reads",
+  "Unique_reads_percent",
   "ERCC_reads",
+  "Non_ERCC_reads",
   "ERCC_to_non_ERCC",
   "Genes_detected",
   "Multimapping_reads_percent",
-  "Non_ERCC_reads",
   "Splice_sites_AT.AC",
   "Splice_sites_Annotated",
   "Splice_sites_GC.AG",
   "Splice_sites_GT.AG",
   "Splice_sites_non_canonical",
   "Splice_sites_total",
-  "Total_reads",
-  "Unique_reads",
-  "Unique_reads_percent",
   "Unmapped_mismatch",
   "Unmapped_other",
   "Unmapped_short"