d1653a97a19e45a79faef5cf47846684e07cfc06 ceisenhart Mon Nov 16 15:58:28 2015 -0800 Added new javascript code to the c program, refs #16341 and #16216 diff --git src/hg/expMatrixToJson/expMatrixToJson.c src/hg/expMatrixToJson/expMatrixToJson.c index c02ded7..7054467 100644 --- src/hg/expMatrixToJson/expMatrixToJson.c +++ src/hg/expMatrixToJson/expMatrixToJson.c @@ -358,37 +358,65 @@ safef(cmd2, 1024, "rowsToCols %s stdout | cut -f1 | sed \'1d\' > %s.cellNames", expMatrix, expMatrix); verbose(2,"%s\n", cmd2); mustSystem(cmd2); } } void generateHtml(FILE *outputFile, int nameSize, char* jsonFile) // Generates a new .html file for the dendrogram. Will do some size calculations as well. { char *pageName = cloneString(jsonFile); chopSuffix(pageName); int textSize = 12 - log(nodeCount); int radius = 540 + 270*log10(nodeCount); int labelLength = 10+nameSize*(15-textSize); if (labelLength > 100) labelLength = 100; + + +fprintf(outputFile,"<!DOCTYPE html><meta charset=\"utf-8\"><title>%s</title><style>.node circle{fill: #ff f; stroke: steelblue; stroke-width: .25px;}.node{font: %ipx sans-serif;}.link{fill: none; stroke: #ccc; st roke-width: 1.5px;}.selected", pageName, textSize); + fprintf(outputFile,"Link{fill: none; stroke: #ccc; stroke-width: 3.0px;}.selected{fill: red;}.legend{font-size: 12px;}rect{stroke-width: 2;}</style><body> <script src=\"http://d3js.org/d3.v3.min.js\"></script> "); + fprintf(outputFile,"<button onclick=\"metaData(-1)\">Back to rainbow</button> <! Identifier ><div id=\"graph\"></div><script>var radius= %i / 2; var cluster=d3.layout.cluster().size([360, radius - %i]);var colors=d3.scale.category20b(); var diagona", radius, labelLength); + fprintf(outputFile,"l=d3.svg.diagonal.radial().projection(function(d){return [d.y, d.x / 180 * Math.PI];});var svg=d3.select(\"#graph\") .append(\"svg\") .attr(\"width\", 150 + (radius * 2) ) .attr(\"height\", radius * 2) .append(\"g\") .attr(\"transform\", \"translat"); + fprintf(outputFile,"e(\" + (radius + 150) + \",\" + radius + \")\"); var legendRectSize=20; var legendSpacing=4; var currentLegend=-1; d3.json(\"%s\", function(error, root){var nodes=cluster.nodes(root); var link=svg.selectAll(\"path.link\") .dat", jsonFile); + fprintf(outputFile,"a(cluster.links(nodes)).enter().append(\"path\").attr(\"class\", \"link\").on(\"click\", function(){d3.select(\".selectedLink\").classed(\"selectedLink\", false); d3.select(this).classed(\"selectedLink\", true);}).attr(\"d\", diagonal); var node=sv"); + fprintf(outputFile,"g.selectAll(\"g.node\") .data(nodes).enter().append(\"g\").attr(\"class\", \"node\").attr(\"transform\", function(d){return \"rotate(\" + (d.x - 90) + \")translate(\" + d.y + \")\";});node.append(\"circle\").attr(\"r\", function(d){if (d.name==\" \""); + fprintf(outputFile,"){return d.kids;}else{return 5;}}).style(\"fill\", function(d){if (d.name==\" \"){return d.whiteToBlack;}else{return d3.rgb(d.colorGroup);}}); node.append(\"text\").attr(\"dy\", \".55em\").attr(\"text-anchor\", function(d){return d.x < 180 ? \"start\""); + fprintf(outputFile,": \"end\";}).attr(\"transform\", function(d){return d.x < 180 ? \"translate(8)\" : \"rotate(180)translate(-8)\";}).text(function(d){return d.name;}); var legend=svg.selectAll('.legend') .data(colors.domain()) .enter() .append('g') .attr('class', 'l"); + fprintf(outputFile,"egend') .attr('transform', function (d, i){var height=legendRectSize + legendSpacing; var offset=height * colors.domain().length / 2; var horz=-2 * legendRectSize; var vert=i * height - offset; return 'translate(' + horz + ',' + vert + ')';});legen"); + fprintf(outputFile,"d.append('rect') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', colors) .style('stroke', colors);legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(functi"); + fprintf(outputFile,"on (d){return d;});}); function updateLegend(val){var legend=svg.selectAll('g.legend').data(val); legend.enter() .append('g') .attr('class', 'legend') .attr('transform', function (d, i){var height=legendRectSize + legendSpacing; var offset=height *"); + fprintf(outputFile,"colors.domain().length / 2; var horz=(-2 * legendRectSize) - radius - 75; var vert=-(i * height - offset); return 'translate(' + horz + ',' + vert + ')';});legend.append('rect') .attr('width', legendRectSize) .attr('height', legendRectSize) .style("); + fprintf(outputFile,"'fill', colors) .style('stroke', colors);legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(function (d){return d;});}function metaData(val){var node=svg.selectAll(\"g.node\"); node."); + fprintf(outputFile,"append(\"circle\").attr(\"r\", function(d){if (d.name==\" \"){return d.kids;}else return 5;}).style(\"fill\", function(d){if (d.name==\" \"){return d.whiteToBlack;}else{if (val==-1) return d3.rgb(d.colorGroup); /* Identifier */"); + fprintf(outputFile,"}}); var legend=svg.selectAll('g.legend').remove(); if (val >=0 ) updateLegend(colors.domain());colors=d3.scale.category20b();}</script></body>"); + + /* fprintf(outputFile,"<!DOCTYPE html> <meta charset=\"utf-8\"><title>%s</title><style>.node circle{fill: #fff; stroke: steelblue; stroke-width: .25px; }.node{font: %ipx sans-serif; }.link{fill: none; stroke: #ccc; stroke-width: 1.5px;}.selectedL", pageName, textSize); -fprintf(outputFile,"ink{ fill: none; stroke: #ccc; stroke-width: 3.0px;}.selected{ fill: red;}</style><bod> <script src=\"http://d3js.org/d3.v3.min.js\" ></script> <script>var color=d3.scale.category20();var radius=%i / 2; var cluster=d3.layout.cluster().size([360, radiu",radius); +fprintf(outputFile,"ink{ fill: none; stroke: #ccc; stroke-width: 3.0px;}.selected{ fill: red;}"); +fprintf(outputFile,".legend{fond-size:12px;}rect(stroke-width:2;}</style><bod> <script src=\"http://d3js.org/d3.v3.min.js\" ></script><button onclick=\"metaData(-1)\">back to rainbow</button> <! Identifier ><div id=\"graph\"></div> <script>var colors=d3.scale.category20();var radius=%i / 2; var cluster=d3.layout.cluster().size([360, radiu",radius); fprintf(outputFile,"s - %i]); var diagonal=d3.svg.diagonal.radial().projection(function(d){return [d.y, d.x / 180 * Math.PI];}) ; var svg=d3.select(\"body\") .append(\"svg\") .attr(\"width\", radius * 2) .attr( \"height\", radius * 2) .append(\"g\") .attr(\"transform\", \"translate(\"", labelLength); -fprintf(outputFile," + radius + \",\" + radius + \")\"); d3.json(\"%s\", function(error,root){ var nodes=cluster.nodes(root); var link=svg.selectAll(\"path.link\") .data(cluster.links(nodes)).enter().append(\"path\").attr(\"class\", \"link\").on(\"click\", func", jsonFile); +fprintf(outputFile," + radius + \",\" + radius + \")\"); var legendRectSize=20; var legendSpacing=4; var currentLegend=-1; d3.json(\"%s\", function(error,root){ var nodes=cluster.nodes(root); var link=svg.selectAll(\"path.link\") .data(cluster.links(nodes)).enter().append(\"path\").attr(\"class\", \"link\").on(\"click\", func", jsonFile); fprintf(outputFile,"tion(){d3.select(\".selectedLink\").classed(\"selectedLink\", false) ; d3.select(this).classed(\"selectedLink\", true);}).attr(\"d\", diagonal); var node=svg.selectAll(\"g.node\") .data(nodes).enter().append(\"g\").attr(\"class\", \"node\").attr(\"transform\", function(d){return \"rotate(\" + (d.x - 90) + \")translate(\" + d.y + \")\";}).on(\"click\", function(){ d3.select(\".selected\").classed(\"selected\", false); d3.select(this).classed(\"selected\", true);}).on(\"mouseover\", function(d){ var g=d3.select(this); var info=g.ap"); fprintf(outputFile,"pend('text') .classed('info', true) .attr('x', 20) .attr('y', 10) .attr(\"transform\", function(d) {return \"rotate(\" + (90 - d.x) + \")\";}) .text(d.distance) .style(\"font-size\" ,\"15px\") .style(\"font-weight\", \"bold\");}).on(\"mouseout\", function(){ d3.select(this).select('text.info').remove();}); node.append(\"circle\") .attr(\"r\", function(d){ if (d.name==\" \"){ return d.kids;}else return 5; }).style(\"fill\", function(d){if (d.name==\" \"){return d.whiteToBlack;}else return d3.rgb(d. colorGroup);}); node.ap"); -fprintf(outputFile,"pend(\"text\").attr(\"dy\", \".55em\").attr(\"text-anchor\", function(d){return d.x < 180 ? \"start\" : \"end\";}).attr(\"transform\", function (d){return d.x < 180 ? \"translate(8)\" : \"rotate(180)translate(-8)\";}).text(function(d){return d.name;});}); d3.select(self.frameElement).style(\"height\",radius * 2 + \"px\"); </script>"); +fprintf(outputFile,"pend(\"text\").attr(\"dy\", \".55em\").attr(\"text-anchor\", function(d){return d.x < 180 ? \"start\" : \"end\";}).attr(\"transform\", function (d){return d.x < 180 ? \"translate(8)\" : \"rotate(180)translate(-8)\";}).text(function(d){return d.name;});});"); +fprintf(outputFile," var legend=svg.selectAll('.legend') .data(colors.domain()) .enter() .append('g') .attr('class', 'legend') .attr('transform', function (d, i){var height=legendRectSize + legendSpacing; var offset=height * colors.domain().length / 2; var horz=-2 * legendRectSize - radius -75; var vert=i * height - offset; return 'translate(' + horz + ',' + vert + ')';});legend.append('rect') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', colors) .style('stroke',"); +fprintf(outputFile,"colors);legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(function (d){return d;}); function updateLegend(val){var legend=svg.selectAll('g.legend').data(val); legend.enter() .append('g') .attr('class', 'legend') .attr('transform', function (d, i){var height=legendRectSize + legendSpacing;var offset=height * colors.domain().length / 2;var horz=(-2 * legendRectSize) -radius - 50;var vert=(i * height - offset);return 'translate('"); +fprintf(outputFile,"+ horz + ',' + vert + ')';});legend.append('rect') .attr('width', legendRectSize) .attr('height', legendRectSize) .style('fill', colors) .style('stroke', colors);legend.append('text') .attr('x', legendRectSize + legendSpacing) .attr('y', legendRectSize - legendSpacing) .text(function (d){return d;})}function metaData(val){var node=svg.selectAll(\"g.node\"); node.append(\"circle\").attr(\"r\", function(d){if (d.name==\" \"){return d.kids;}else return 5;}).style(\"fill\", function(d)"); +*/ + +//fprintf(outputFile,"{if (d.name==\" \"){return d.whiteToBlack;}else{if (val==-1) return d3.rgb(d.colorGroup);/* Identifier */}});var legend=svg.selectAll('g.legend').remove(); if (val >=0 ) updateLegend(colors.domain());colors=d3.scale.category20b();}"); +//fprintf(outputFile, " </script>"); carefulClose(&outputFile); } void expData(char *matrixFile, char *outDir, char *descFile) /* Read matrix and names into a list of bioExpVectors, run hacTree to * associate them, and write output. */ { verbose(2,"Start binary clustering of the expression matrix by euclidean distance (expMatrixToJson).\n"); clock_t begin, end; begin = clock(); convertInput(matrixFile, descFile, clCSV); struct bioExpVector *list = bioExpVectorListFromFile(catTwoStrings(matrixFile,".transposedMatrix"));