width,height parameters

stacking improvments v0.4.0
bbglab · Dec 10, 2014 · 9f7f61e · 9f7f61e
1 parent ff9364a
commit 9f7f61e
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 9,570 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 *~
 .idea
 node_modules
+*.log
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,4 @@
 *~
 .idea
 node_modules
+*.log
diff --git a/build/muts-needle-plot.css b/build/muts-needle-plot.css
@@ -1,4 +1,6 @@
-
+body {
+    font-family: Verdana,Geneva,sans-serif;
+}
 
 .needle-line {
     stroke: black;
@@ -18,6 +20,11 @@
     fill: none;
 }
 
+.x-label, .y-label {
+    font-weight: bold;
+    font-size: 12px;
+}
+
 .domain {
     fill: none;
     stroke: black;

diff --git a/build/muts-needle-plot.js b/build/muts-needle-plot.js
diff --git a/build/muts-needle-plot.min.css b/build/muts-needle-plot.min.css
diff --git a/build/muts-needle-plot.min.gz.js b/build/muts-needle-plot.min.gz.js
diff --git a/build/muts-needle-plot.min.js b/build/muts-needle-plot.min.js
diff --git a/how-to-publish.txt b/how-to-publish.txt
@@ -2,7 +2,7 @@ Make sure you have npm installed.
 --------------------------------------
 
 
-1. Check and increment the version in the `package.json` file. E.g. version "0.2.1"
+1. Check and increment the version in the `package.json` file. E.g. version "0.4.0"
 
 2. Check if examples are working fine
 
@@ -14,12 +14,12 @@ access http://localhost:9090/snippets/ and see the examples
 3. Pull from repository, commit all changes, push to repository:
 
 git pull
-git commit -a -m "Preparing release of version 0.2.1"
+git commit -a -m "Preparing release of version 0.4.0"
 git push
 
 
 4. Add a git tag with the same version as in the package.json file.
-git tag -a v0.2.1 -m 'version 0.2.1'
+git tag -a v0.4.0 -m 'version 0.4.0'
 git push origin --tags
 
 

diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
 </style>
 
 <body>
+<div id="yourDiv"> </div>
 
 <script src="build/muts-needle-plot.js"></script>
 <script>
@@ -37,7 +38,8 @@
     plotConfig = {
         maxCoord :      350,
         minCoord :      0,
-        targetElement : "body",
+        height:         450,
+        targetElement : "yourDiv",
         mutationData:   "snippets/data/muts.json",
         //mutationData:   [{"category": "test", "coord": "99", "value": 77}],
         regionData:     "snippets/data/regions.json",

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "muts-needle-plot",
-  "description": "Draws a (stacked) Needle-Plot for mutation data.",
-  "version": "0.3.2",
+  "description": "Draws a Needle-Plot for mutation data (stacked).",
+  "version": "0.4.0",
   "homepage": "https://github.com/bbglab/muts-needle-plot",
   "author": {
     "name": "Michael P Schroeder",

diff --git a/src/js/MutsNeedlePlot.js b/src/js/MutsNeedlePlot.js
@@ -2,42 +2,47 @@
  *
  * Mutations Needle Plot (muts-needle-plot)
  *
- * Creates a needle plot (a.k.a stem plot, lolliplot and soon also balloon plot ;-)
+ * Creates a needle plot (a.k.a stem plot, lollipop-plot and soon also balloon plot ;-)
+ * This class uses the npm-require module to load dependencies d3, d3-tip
  *
  * @author Michael P Schroeder
  * @class
  */
 
-// import d3
+// npm import d3
 var d3 = require('d3');
 
 function MutsNeedlePlot (config) {
 
 
     // Initialization
+
+    // X-coordinates
     this.maxCoord = config.maxCoord || -1;             // The maximum coord (x-axis)
     if (this.maxCoord < 0) { throw new Error("'maxCoord' must be defined initiation config!"); }
+    this.minCoord = config.minCoord || 1;               // The minimum coord (x-axis)
 
+    // data
     mutationData = config.mutationData || -1;          // .json file or dict
     if (this.maxCoord < 0) { throw new Error("'mutationData' must be defined initiation config!"); }
-
     regionData = config.regionData || -1;              // .json file or dict
     if (this.maxCoord < 0) { throw new Error("'regionData' must be defined initiation config!"); }
 
-    minCoord = config.minCoord || 0;                    // The minimum coord (x-axis)
-    targetElement = config.targetElement || "body";     // Where to append the plot (svg)
+    // Plot dimensions & target
+    var targetElement = document.getElementById(config.targetElement) || config.targetElement || document.body   // Where to append the plot (svg)
+
+    var width = this.width = config.width || targetElement.offsetWidth || 1000;
+    var height = this.height = config.height || targetElement.offsetHeight || 500;
+
+    // Misc
     this.colorMap = config.colorMap || {};              // dict
     this.legends = config.legends || {
         "y": "Value",
         "x": "Coordinate"
-    };    
+    };
 
-    this.width = width;
-    this.height = height;
     this.buffer = 0;
 
-    var width = this.width = 1000;
-    var height = this.height = 500;
     var maxCoord = this.maxCoord;
 
     var buffer = 0;
@@ -71,8 +76,8 @@ function MutsNeedlePlot (config) {
     // define scales
 
     var x = d3.scale.linear()
-      .domain([1, maxCoord])
-      .range([buffer, width - buffer * 1.5])
+      .domain([this.minCoord, this.maxCoord])
+      .range([buffer * 1.5 , width - buffer])
       .nice();
     this.x = x;
 
@@ -122,22 +127,24 @@ MutsNeedlePlot.prototype.drawRegions = function(svg, regionData) {
         text_offset = bg_offset+5;
     }
 
-    var regionsBG = d3.select(".mutneedles").selectAll()
-        .data([1]).enter()
-        .append("rect")
-          .attr("x", x(0) )
-          .attr("y", y(0) + bg_offset )
-          .attr("width", x(maxCoord) - x(0) )
-          .attr("height", 10)
-          .attr("class", "regionsBG");
-
     function draw(regionList) {
 
-        var regions = d3.select(".mutneedles").selectAll()
+        var regionsBG = d3.select(".mutneedles").selectAll()
+            .data(["dummy"]).enter()
+            .insert("g", ":first-child")
+            .attr("class", "regionsBG")
+            .append("rect")
+            .attr("x", x(0) )
+            .attr("y", y(0) + bg_offset )
+            .attr("width", x(maxCoord) - x(0) )
+            .attr("height", 10);
+
+
+        var regions = regionsBG = d3.select(".mutneedles").selectAll()
             .data(regionList)
             .enter()
             .append("g")
-            .attr("class", "region");
+            .attr("class", "regionGroup");
 
         regions.append("rect")
             .attr("x", function (r) {
@@ -218,7 +225,7 @@ MutsNeedlePlot.prototype.drawAxes = function(svg) {
 
     svg.append("svg:g")
       .attr("class", "y-axis")
-      .attr("transform", "translate(" + (this.buffer + - 10)  + ",0)")
+      .attr("transform", "translate(" + (this.buffer * 1.2 + - 10)  + ",0)")
       .call(yAxis);
 
     svg.append("text")
@@ -255,7 +262,7 @@ MutsNeedlePlot.prototype.drawNeedles = function(svg, mutationData, regionData) {
     getYAxis = function() {
         return y;
     };
- 
+
     formatCoord = function(coord) {
        if (coord.indexOf("-") > -1) {
             coords = coord.split("-");
@@ -270,7 +277,7 @@ MutsNeedlePlot.prototype.drawNeedles = function(svg, mutationData, regionData) {
     getColor = this.needleHeadColor;
     colors = this.colorMap;
     tip = this.tip;
-    
+
     // stack needles at same pos
     needlePoint = {};
     highest = 0;
@@ -322,8 +329,8 @@ MutsNeedlePlot.prototype.drawNeedles = function(svg, mutationData, regionData) {
 
     if (typeof mutationData == "string") {
         d3.json(mutationData, function(error, unformattedMuts) {
-            if (error) { 
-                 throw new Error(error); 
+            if (error) {
+                 throw new Error(error);
             }
             muts = prepareMuts(unformattedMuts);
             paintMuts(muts);