diff --git a/src/components/continuous/drawParallelCoordinates.js b/src/components/continuous/drawParallelCoordinates.js index 7323dd15..365ca75b 100644 --- a/src/components/continuous/drawParallelCoordinates.js +++ b/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; diff --git a/src/components/continuous/renderQueue.js b/src/components/continuous/renderQueue.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/continuous/util.js b/src/components/continuous/util.js index b6bf91c7..b8e49b07 100644 --- a/src/components/continuous/util.js +++ b/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]) } diff --git a/src/globals.js b/src/globals.js index 19c6d554..46b36b1a 100644 --- a/src/globals.js +++ b/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"