Release of version 0.7.0

README.md

@@ -3,14 +3,16 @@ Mutations Needle Plot (muts-needle-plot)
 
 A needle-plot (aka stem-plot or lollipop-plot) plots each data point as a big dot and adds a vertical line that makes it appear like a needle. 
 
-[![DOI](https://zenodo.org/badge/doi/10.5281/zenodo.13185.svg)](http://dx.doi.org/10.5281/zenodo.13185)
+![DOI](https://zenodo.org/badge/7688/bbglab/muts-needle-plot.svg)
+
+This software is **citable**! Different citation styles available at *http://dx.doi.org/*+DOI
 
 Availability
 -----------------------
 
-   * **BioJS-registry** (with live examples): <http://registry.biojs.net/client/#/detail/muts-needle-plot>
-   * **npm-registry**: <https://www.npmjs.org/package/muts-needle-plot>
-   * **GitHub**: <https://github.com/bbglab/muts-needle-plot>
+   * **Live examples** at the BioJS-registry: <http://registry.biojs.net/client/#/detail/muts-needle-plot>
+   * **Installable JavaScript library** at npm-registry: <https://www.npmjs.org/package/muts-needle-plot>
+   * **Source code** at GitHub: <https://github.com/bbglab/muts-needle-plot>
 
 ![Image of a Needle-Plot](mutations-needle-plot.png)
 

build/muts-needle-plot.css

@@ -42,7 +42,7 @@ body {
     fill: lightgrey;
 }
 
-.regionGroup:hover > .regionName {
+.regionGroup:hover > text {
     fill: black;
     font-weight: bold;
     opacity: 1;
@@ -57,6 +57,11 @@ body {
     opacity: 0.5;
 }
 
+.repeatedName.noshow {
+    fill: black;
+    opacity: 0;
+}
+
 .x-axis path, .x-axis line, .y-axis path, .y-axis line {
     fill: none;
 }

how-to-publish.txt

@@ -6,7 +6,7 @@ Make sure you have npm installed.
 
     git pull
 
-2. Check and increment the version in the `package.json` file. E.g. version "0.6.0"
+2. Check and increment the version in the `package.json` file. E.g. version "0.7.0"
 
 3. Check if examples are working fine
 
@@ -23,8 +23,8 @@ Make sure you have npm installed.
 
 5. Commit all changes, push to repository
 
-    git commit -a -m "Release of version 0.6.0"
-    git tag -a v0.6.0 -m 'version 0.6.0'
+    git commit -a -m "Release of version 0.7.0"
+    git tag -a v0.7.0 -m 'version 0.7.0'
     git push
     git push origin --tags
 
@@ -35,6 +35,9 @@ Make sure you have npm installed.
     A needle-plot (aka stem-plot or lollipop-plot) plots each data point as a big dot and adds a vertical line that makes it appear like a needle.
 
     Changelog:
-    v0.6.0
-     * Selection (new)
-     * Legend (new)
+    v0.7.0
+     * Regions format changed (new)
+     * Repeated regions labels stacked (one visible)
+     * Legend placement fix
+     * Coordinates tip disappears in time.
+

package.json

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

snippets/EXAMPLE.js

@@ -18,7 +18,7 @@ colorMap = {
 
 legends = {
   x: "Corresponding protein positions to transcript X",
-  y: "Number of recorded mutation in transcript X of Gene Y and CT Z"
+  y: "Number of recorded mutation"
 };
 
 //Crate config Object
@@ -27,9 +27,7 @@ plotConfig = {
   minCoord :      0,
   targetElement : yourDiv,
   mutationData:   "./data/muts.json",
-  //mutationData:   [{"category": "test", "coord": "99", "value": 77}],
   regionData:     "./data/regions.json",
-  //regionData:     {"beautiful-region": "99-199"},
   colorMap:       colorMap,
   legends:        legends
 };

snippets/EXAMPLE_AGGREGATION.js

@@ -40,7 +40,7 @@ mapper = function(data) {
 
 legends = {
   x: "Corresponding protein positions to transcript X",
-  y: "Number of recorded mutation in transcript X of Gene Y and CT Z"
+  y: "Number of recorded mutation"
 };
 
 // aggregation by sum of value
@@ -65,7 +65,7 @@ d3.json("./data/muts.json", function(error, data){
 
   //Crate config Object
   plotConfig = {
-    maxCoord :      350,
+    maxCoord :      250,
     minCoord :      0,
     targetElement : yourDiv,
     mutationData:   agg_muts,

snippets/KRAS.js

@@ -6,7 +6,12 @@ var mutneedles = require("muts-needle-plot");
 
 var target = yourDiv; // autmically generated in snippets examples
 var muts = "./data/ENST00000557334.json";
-var regions = {"dummy": "155-209"};
+var regions = [
+  {"name": "dummy", "coord": "155-209"},
+  {"name": "repeat", "coord": "15-20"},
+  {"name": "repeat", "coord": "5-10"},
+  {"name": "repeat", "coord": "25-35"}
+];
 var legends = {x: "KRAS-003 (ENST00000557334) AA pos", y: "Mutation Count"}
 var colorMap = {
   // mutation categories

snippets/LOGO.js

@@ -20,10 +20,10 @@ var muts = [
   { coord: "172", category : "mild", value: 50 }
 ];
 
-var regions = {
-  "cluster 1": "145-155",
-  "cluster 2": "170-172"
-};
+var regions = [
+  {"name": "cluster-1", "coord": "145-155"},
+  {"name": "cluster-2", "coord": "170-172"}
+];
 
 var legends = {x: "Mutations Needle Plot", y: "# Mutations"}
 

snippets/data/regions.json

@@ -1,8 +1,34 @@
-{
-    "region1": "50-58",
-    "region2": "120-180",
-    "C1": "187-190",
-    "X-binding": "2-40",
-    "X99" : "4.5-5.5",
-    "X88" : "191-192"
-}
+[
+    {
+        "name": "region1",
+        "coord": "50-58"
+    },
+    {
+        "name": "region2",
+        "coord": "120-180"
+    },
+    {
+        "name": "C1", "coord": "187-190"
+    },
+    {
+        "name": "C2", "coord": "194-199"
+    },
+    {
+        "name": "X-binding", "coord": "2-40"
+    },
+    {
+        "name": "X99-REPEAT", "coord": "60-61"
+    },
+    {
+        "name": "X99-REPEAT", "coord": "4-5"
+    },
+    {
+        "name": "X99-REPEAT", "coord": "73-74"
+    },
+    {
+        "name": "X99-REPEAT", "coord": "78-79"
+    },
+    {
+        "name": "X99-REPEAT", "coord": "191-192"
+    }
+]

src/css/muts-needle-plot.css

@@ -42,7 +42,7 @@ body {
     fill: lightgrey;
 }
 
-.regionGroup:hover > .regionName {
+.regionGroup:hover > text {
     fill: black;
     font-weight: bold;
     opacity: 1;
@@ -57,6 +57,11 @@ body {
     opacity: 0.5;
 }
 
+.repeatedName.noshow {
+    fill: black;
+    opacity: 0;
+}
+
 .x-axis path, .x-axis line, .y-axis path, .y-axis line {
     fill: none;
 }

src/js/MutsNeedlePlot.js

@@ -118,6 +118,18 @@ function MutsNeedlePlot (config) {
         .call(selector)
         .selectAll('.extent')
         .attr('height', height);
+    selectionRect.on("mouseenter", function() {
+        var selection = selector.extent();
+        self.selectionTip.show({left: selection[0], right: selection[1]}, selectionRect.node());
+    })
+        .on("mouseout", function(){
+            d3.select(".d3-tip-selection")
+                .transition()
+                .delay(3000)
+                .duration(1000)
+                .style("opacity",0)
+                .style('pointer-events', 'none');
+        });
 
     function brushmove() {
 
@@ -196,6 +208,12 @@ function MutsNeedlePlot (config) {
             selection = edata.coords;
             if (selection[1] - selection[0] > 0) {
                 self.selectionTip.show({left: selection[0], right: selection[1]}, selectionRect.node());
+                d3.select(".d3-tip-selection")
+                    .transition()
+                    .delay(3000)
+                    .duration(1000)
+                    .style("opacity",0)
+                    .style('pointer-events', 'none');
             } else {
                 self.selectionTip.hide();
             }
@@ -228,7 +246,8 @@ MutsNeedlePlot.prototype.drawLegend = function(svg) {
 
 
     var domain = self.x.domain();
-    xplacement = (domain[1] - domain[0]) * 0.75 + (domain[1] - domain[0]);
+    xplacement = (self.x(domain[1]) - self.x(domain[0])) * 0.75 + self.x(domain[0]);
+
 
     var sum = 0;
     for (var c in self.totalCategCounts) {
@@ -362,8 +381,18 @@ MutsNeedlePlot.prototype.drawRegions = function(svg, regionData) {
         // Place and label location
         var labels = [];
 
+        var repeatedRegion = {};
+        var getRegionClass = function(region) {
+            var c = "regionName";
+            var repeatedClass = "RR_"+region.name;
+            if(_.has(repeatedRegion, region.name)) {
+                c = "repeatedName noshow " + repeatedClass;
+            }
+            repeatedRegion[region.name] = repeatedClass;
+            return c;
+        };
         regions.append("text")
-            .attr("class", "regionName")
+            .attr("class", getRegionClass)
             .attr("text-anchor", "middle")
             .attr("x", function (r) {
                 r.x = x(r.start) + (x(r.end) - x(r.start)) / 2;
@@ -424,6 +453,11 @@ MutsNeedlePlot.prototype.drawRegions = function(svg, regionData) {
                     || y2 < ny1;
             };
         }
+        var moveRepeatedLabels = function(label, x) {
+            var name = repeatedRegion[label];
+            svg.selectAll("text."+name)
+                .attr("x", newx);
+        };
         force.on("tick", function(e) {
             var q = d3.geom.quadtree(labels),
                 i = 0,
@@ -432,32 +466,32 @@ MutsNeedlePlot.prototype.drawRegions = function(svg, regionData) {
                 q.visit(collide(labels[i]));
             }
             // Update the position of the text element
+            var i = 0;
             svg.selectAll("text.regionName")
                 .attr("x", function(d) {
-                    for (i = 0; i < n; i++) {
-                        if (d.name == labels[i].label) {
-                            labels[i].x = withinBounds(labels[i].x);
-                            return labels[i].x;
-                        }
-                    }
+                    newx = labels[i++].x;
+                    moveRepeatedLabels(d.name, newx);
+                    return newx;
                 }
             );
         });
         force.start();
     }
 
     function formatRegions(regions) {
-        regionList = [];
-        for (key in regions) {
+        for (key in Object.keys(regions)) {
 
-            regionList.push({
+            regions[key].start = getRegionStart(regions[key].coord);
+            regions[key].end = getRegionEnd(regions[key].coord);
+            regions[key].color = getColor(regions[key].name);
+            /*regionList.push({
                 'name': key,
                 'start': getRegionStart(regions[key]),
                 'end': getRegionEnd(regions[key]),
                 'color': getColor(key)
-            });
+            });*/
         }
-        return regionList;
+        return regions;
     }
 
     if (typeof regionData == "string") {