[galaxy-commits] commit/galaxy-central: guerler: Charts: Heatmap add color schemes

14 Jun 2014

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/56a24bfc4d15/
Changeset:   56a24bfc4d15
User:        guerler
Date:        2014-06-15 02:20:31
Summary:     Charts: Heatmap add color schemes
Affected #:  3 files

diff -r 972549a5f857b22ae7acd130b915523647b05422 -r 56a24bfc4d155bb0df1875a6225cf1e71b8947b3 config/plugins/visualizations/charts/static/charts/others/heatmap/config.js

--- a/config/plugins/visualizations/charts/static/charts/others/heatmap/config.js
+++ b/config/plugins/visualizations/charts/static/charts/others/heatmap/config.js
@@ -30,6 +30,74 @@
         use_panels : {
             init        : 'false',
             hide        : true
+        },
+        color_set : {
+            title       : 'Color scheme',
+            info        : 'Select a color scheme for your heatmap',
+            type        : 'select',
+            init        : 'jet',
+            data        : [
+                {
+                    label   : 'Cold-to-Hot',
+                    value   : 'hot'
+                },
+                {
+                    label   : 'Cool',
+                    value   : 'cool'
+                },
+                {
+                    label   : 'Copper',
+                    value   : 'copper'
+                },
+                {
+                    label   : 'Gray scale',
+                    value   : 'gray'
+                },
+                {
+                    label   : 'Jet',
+                    value   : 'jet'
+                },
+                {
+                    label   : 'No-Green',
+                    value   : 'no_green'
+                },
+                {
+                    label   : 'Ocean',
+                    value   : 'ocean'
+                },
+                {
+                    label   : 'Polar',
+                    value   : 'polar'
+                },
+                {
+                    label   : 'Red-to-Green',
+                    value   : 'redgreen'
+                },
+                {
+                    label   : 'Red-to-green (saturated)',
+                    value   : 'red2green'
+                },
+                {
+                    label   : 'Relief',
+                    value   : 'relief'
+                },
+                {
+                    label   : 'Seismograph',
+                    value   : 'seis'
+                },
+                {
+                    label   : 'Sealand',
+                    value   : 'sealand'
+                },
+                {
+                    label   : 'Split',
+                    value   : 'split'
+                },
+                {
+                    label   : 'Wysiwyg',
+                    value   : 'wysiwyg'
+                }
+            ]
         }
     }
 });

diff -r 972549a5f857b22ae7acd130b915523647b05422 -r 56a24bfc4d155bb0df1875a6225cf1e71b8947b3 config/plugins/visualizations/charts/static/charts/others/heatmap/heatmap-parameters.js
--- /dev/null
+++ b/config/plugins/visualizations/charts/static/charts/others/heatmap/heatmap-parameters.js
@@ -0,0 +1,42 @@
+// dependencies
+define([], function() {
+
+// color palettes
+var colorSets = {
+    seis:       ['#AA0000', '#D00000', '#F70000', '#FF1D00', '#FF4400', '#FF6A00', '#FF9000', '#FFB700', '#FFDD00', '#FFFF00', '#FFFF00', '#FFFF00', '#BDFF0C', '#73FF1A', '#3FFA36', '#16F45A', '#00D08B', '#0087CD', '#0048FA', '#0024E3'].reverse(),
+    
+    sealand:    ['#8C66FF', '#6A66FF', '#6684FF', '#66A7FF', '#66CAFF', '#66ECFF', '#66FFF0', '#66FFCE', '#66FFAB', '#66FF88', '#66FF66', '#88FF66', '#ABFF66', '#CEFF66', '#FFEEA6', '#FFD3A6', '#FFB8A6', '#FFAAB0', '#FFB5CB', '#FFC0E1'].reverse(),
+    
+    redgreen:   ['#005824', '#1A693B', '#347B53', '#4F8D6B', '#699F83', '#83B09B', '#9EC2B3', '#B8D4CB', '#D2E6E3', '#EDF8FB', '#FFFFFF', '#F1EEF6', '#E6D3E1','#DBB9CD', '#D19EB9', '#C684A4', '#BB6990', '#B14F7C', '#A63467', '#9B1A53', '#91003F'],
+    
+    ocean:      ['#000000', '#000209', '#000413', '#00061E', '#000728', '#000932', '#002650', '#00426E', '#005E8C', '#007AAA', '#0096C8', '#22A9C2', '#45BCBB', '#67CFB5', '#8AE2AE', '#ACF6A8', '#BCF8B9', '#CBF9CA', '#DBFBDC', '#EBFDED'].reverse(),
+    
+    cool:       ['#00FFFF', '#0DF2FF', '#19E6FF', '#26D9FF', '#33CCFF', '#3FBFFF', '#4CB3FF', '#59A6FF', '#6699FF', '#738CFF', '#7F7FFF', '#8C73FF', '#9966FF', '#A659FF', '#B24DFF', '#BF3FFF', '#CC33FF', '#D926FF', '#E619FF', '#F20DFF'],
+    
+    copper:     ['#000000', '#100906', '#1F130D', '#301E13', '#40281A', '#50321F', '#603C26', '#70462D', '#805033', '#905A3A', '#A06440', '#B06E46', '#C0784D', '#D08253', '#E08C5A', '#F09660', '#FFA066', '#FFAA6D', '#FFB473', '#FFBE7A'].reverse(),
+    
+    gray:       ['#000000', '#0D0D0D', '#191919', '#262626', '#333333', '#3F3F3F', '#4C4C4C', '#595959', '#666666', '#737373', '#7F7F7F', '#8C8C8C', '#999999', '#A6A6A6', '#B2B2B2', '#BFBFBF', '#CCCCCC', '#D9D9D9', '#E6E6E6', '#F2F2F2'].reverse(),
+    
+    hot:        ['#000000', '#220000', '#440000', '#660000', '#880000', '#AA0000', '#CC0000', '#EE0000', '#FF1100', '#FF3300', '#FF5500', '#FF7700', '#FF9900', '#FFBB00', '#FFDD00', '#FFFF00', '#FFFF33', '#FFFF66', '#FFFF99', '#FFFFCC'].reverse(),
+    
+    jet:        ['#00007F', '#0000B2', '#0000E5', '#0019FF', '#004DFF', '#007FFF', '#00B2FF', '#00E5FF', '#FFFFF2', '#FFFFD9', '#FFFFBF', '#FFFFA5', '#FFFF8C', '#FFE500', '#FFB300', '#FF7F00', '#FF4C00', '#FF1900', '#E50000', '#B20000'],
+    
+    no_green:   ['#1F60FF', '#1F60FF', '#1F9FFF', '#1FBFFF', '#00CFFF', '#2AFFFF', '#2AFFFF', '#55FFFF', '#7FFFFF', '#AAFFFF', '#FFFF54', '#FFFF54', '#FFF000', '#FFBF00', '#FFA800', '#FF8A00', '#FF8A00', '#FF7000', '#FF4D00', '#FF0000'],
+
+    polar:      ['#0000FF', '#1919FF', '#3333FF', '#4C4CFF', '#6666FF', '#7F7FFF', '#9999FF', '#B2B2FF', '#CCCCFF', '#E6E6FF', '#FFFFFF', '#FFE5E5', '#FFCCCC', '#FFB2B2', '#FF9999', '#FF7F7F', '#FF6666', '#FF4C4C', '#FF3333', '#FF1A1A'],
+
+    red2green:  ['#FF0000', '#FF1919', '#FF3333', '#FF4C4C', '#FF6666', '#FF7F7F', '#FF9999', '#FFB2B2', '#FFCCCC', '#FFE6E6', '#FFFFFF', '#E5FFE5', '#CCFFCC', '#B2FFB2', '#99FF99', '#7FFF7F',  '#66FF66', '#4CFF4C', '#33FF33', '#1AFF1A'].reverse(),
+
+    relief:     ['#000000', '#000413', '#000728', '#002650', '#005E8C', '#0096C8', '#45BCBB', '#8AE2AE', '#BCF8B9', '#DBFBDC', '#467832', '#887438', '#B19D48', '#DBC758', '#FAE769', '#FAEB7E', '#FCED93', '#FCF1A7', '#FCF6C1', '#FDFAE0'].reverse(),
+    
+    split:      ['#7F7FFF', '#6666E6', '#4D4DCC', '#3333B3', '#1A1A99', '#00007F', '#000066', '#00004D', '#000033', '#00001A', '#000000', '#1A0000', '#330000', '#4D0000', '#660000', '#7F0000', '#991A1A', '#B33333', '#CC4D4D', '#E66666'],
+    
+    wysiwyg:    ['#3F003F', '#3F003F', '#3F00BF', '#003FFF', '#00A0FF', '#3FBFFF', '#3FBFFF', '#40E0FF', '#3FFFBF', '#3FFF3F', '#7FFF3F', '#BFFF3F', '#BFFF3F', '#FFE040', '#FFE040', '#FF6040', '#FF1F40', '#FF60C0', '#FFA0FF', '#FFA0FF'].reverse()
+}
+
+// return
+return {
+    colorSets: colorSets
+}
+
+});
\ No newline at end of file

diff -r 972549a5f857b22ae7acd130b915523647b05422 -r 56a24bfc4d155bb0df1875a6225cf1e71b8947b3 config/plugins/visualizations/charts/static/charts/others/heatmap/heatmap-plugin.js
--- a/config/plugins/visualizations/charts/static/charts/others/heatmap/heatmap-plugin.js
+++ b/config/plugins/visualizations/charts/static/charts/others/heatmap/heatmap-plugin.js
@@ -1,5 +1,5 @@
 // dependencies
-define(['plugin/charts/tools', 'utils/utils'], function(Tools, Utils) {
+define(['plugin/charts/tools', 'utils/utils', 'plugin/charts/others/heatmap/heatmap-parameters'], function(Tools, Utils, HeatmapParameters) {
 
 // widget
 return Backbone.View.extend({
@@ -15,7 +15,7 @@
         style: {
             'font-weight'       : 'normal',
             'font-family'       : 'Verdana',
-            'font-size'         : '12'
+            'font-size'         : 12
         },
         legend: {
             width               : 15,
@@ -23,13 +23,12 @@
             style : {
                 'font-weight'   : 'normal',
                 'font-family'   : 'Verdana',
-                'font-size'     : '11'
+                'font-size'     : 11
             },
             limit               : 7
         },
         background_color        : '#FFFFF8',
-        debug_color             : '#FFFFFF',
-        color_set               : ['#ffffd9','#edf8b1','#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58','#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58']
+        debug_color             : '#FFFFFF'
     },
     
     // initialize
@@ -41,6 +40,9 @@
             
     // render
     render : function(canvas_id, groups) {
+        // get color set
+        this.color_set = HeatmapParameters.colorSets[this.chart.settings.get('color_set')];
+        
         // categories
         this.categories = Tools.makeUniqueCategories(groups);
         
@@ -57,7 +59,7 @@
         // color scale
         this.zMin = d3.min(this.data, function(d) { return d.z; });
         this.zMax = d3.max(this.data, function(d) { return d.z; });
-        this.zScale = d3.scale.quantize().domain([this.zMin, this.zMax]).range(this.options.color_set);
+        this.zScale = d3.scale.quantize().domain([this.zMin, this.zMax]).range(this.color_set);
         
         // create axis
         this.xAxis = d3.svg.axis().scale(this.xScale).orient('bottom');
@@ -285,7 +287,6 @@
             .style('stroke-width', 1)
             .call(this.yAxis);
 
-    
         // fix text
         var yFontSize = Math.min(boxHeight, font_size);
         this.gyAxis.selectAll('text')
@@ -329,11 +330,11 @@
         var legendWidth = this.options.legend.width;
         var legendElements = this.zScale.range().length;
         var legendElementHeight = legendSize * height / legendElements;
-        var legendHeight = legendElements * legendElementHeight;
+        var legendHeight = legendElements * legendElementHeight / 2;
         
         // create legend elements
         var legend = this.svg.selectAll('.legend')
-            .data(d3.range(this.zMin, this.zMax, (this.zMax-this.zMin) / legendElements).reverse())
+            .data(d3.range(this.zMin, this.zMax, 2 * (this.zMax-this.zMin) / legendElements).reverse())
             .enter().append('g')
                 .attr('class', 'legend')
                 .attr('transform', function(d, i) {
@@ -363,6 +364,16 @@
                     return str;
                 }
             });
+            
+        this.svg.append('text')
+            .style(this.options.legend.style)
+            .style({'font-size' : 9, 'font-weight': 'bold'})
+            .text('Legend')
+            .attr('transform', function(d, i) {
+                var x = width + (margin.right - this.getBBox().width) / 2;
+                var y = ((height - legendHeight) / 2) - 10;
+                return 'translate(' + x + ',' + y + ')';
+            });
     },
     
     // create axes formatting

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: guerler: Charts: Heatmap add color schemes

commits-noreply＠bitbucket.org