Permalink
Browse files

icicle: use flame graph coloring

  • Loading branch information...
1 parent 6eeaa15 commit 3196ec53215550f0ab2310952a994ab7817cf673 @davepacheco committed May 7, 2012
Showing with 129 additions and 3 deletions.
  1. +1 −0 lib/www/icicle.htm
  2. +128 −3 lib/www/icicle.js
View
@@ -10,6 +10,7 @@
<body>
<h1>Icicle Stack Visualization</h1>
<div id="info">Hover over a block for details.</div>
+ <div><a href="javascript:svZoomReset()">Reset zoom</a></div>
<div id="chart"></div>
</body>
</html>
View
@@ -11,6 +11,10 @@ var svCornerPixels = 5; /* radius of rounded corners */
var svTextPaddingLeft = 5; /* padding-left on rectangle labels */
var svTextPaddingRight = 10; /* pading-right on rectangle labels */
var svTextPaddingTop = '1.2em'; /* padding-top on rectangle labels */
+var svColorMode = 'flame'; /* coloring mode */
+
+var svMaxDepth = 0; /* maximum depth of data object */
+var svDepthSamples = []; /* # of samples at each depth */
/* DOM nodes */
var svSvg; /* actual flame graph SVG object */
@@ -41,7 +45,6 @@ function svInit()
{
svXScale = d3.scale.linear().range([0, svSvgWidth]);
svYScale = d3.scale.linear().range([0, svSvgHeight]);
- svColorScale = d3.scale.category20c();
svInfo = d3.select('#info')[0][0].firstChild;
@@ -54,11 +57,17 @@ function svInit()
return (rv);
}).value(function (d) { return (d.value.svTotal); });
+ if (svColorMode == 'random') {
+ svColorScale = d3.scale.category20c();
+ svColor = function (d) { return (svColorScale(d.data.key)); };
+ } else {
+ svColor = svColorFlame;
+ }
+
svId = function (d) {
return (d.data.key + '@' + svYScale(d.y) +
'@' + svXScale(d.x));
};
- svColor = function (d) { return (svColorScale(d.data.key)); };
svHeight = function (d) { return (svYScale(d.dy)); };
svRectWidth = function (d) { return (svXScale(d.dx)); };
svTextWidth = function (d) {
@@ -73,6 +82,8 @@ function svInit()
return (svSvgHeight - svYScale(d.y) - svHeight(d)); };
d3.json('sample.json', function (json) {
+ svAnnotateDepth(json, 0);
+
svData = svPartition(d3.entries(json)[0]);
svRects = svSvg.selectAll('rect').data(svData)
@@ -109,7 +120,7 @@ function svInit()
});
}
-function svClick(cd)
+function svZoomSet(cd)
{
svXScale.domain([cd.x, cd.x + cd.dx]);
svYScale.domain([cd.y, 1]).range([cd.y ? 20 : 0, svSvgHeight]);
@@ -151,3 +162,117 @@ function svStatus(d)
{
svInfo.nodeValue = d.data.key + ': ' + d.value;
}
+
+function svAnnotateDepth(json, depth)
+{
+ var key;
+
+ if (depth > svMaxDepth)
+ svMaxDepth = depth;
+
+ if (depth >= svDepthSamples.length)
+ svDepthSamples[depth] = 0;
+
+ for (key in json) {
+ svDepthSamples[depth] += json[key].svTotal;
+ svAnnotateDepth(json[key].svChildren, depth + 1);
+ }
+}
+
+function svColorFlame(d)
+{
+ var h = 0, hplus = 60;
+ var s = 30, splus = 70;
+ var v = 80, vplus = 20;
+
+ var depth = d.depth;
+ var hratio = depth / svMaxDepth;
+ var sratio = d.value / svDepthSamples[depth];
+
+ var rh = h + hratio * hplus;
+ var rs = (s + sratio * splus) / 100;
+ var rv = (v + hratio * vplus) / 100;
+ var rgb = convertHsvToRgb(rh, rs, rv);
+
+ return ('rgb(' + rgb.join(',') + ')');
+}
+
+function svZoomReset()
+{
+ svZoomSet({ 'x': 0, 'dx': 1, 'y': 0 });
+}
+
+function svClick(cd)
+{
+ svZoomSet(cd);
+}
+
+/*
+ * This function is copied directly from lib/color.js. It would be better if we
+ * could share code between Node.js and web JS.
+ */
+function convertHsvToRgb(h, s, v)
+{
+ var r, g, b;
+ var i;
+ var f, p, q, t;
+
+ if (s === 0) {
+ /*
+ * A saturation of 0.0 is achromatic (grey).
+ */
+ r = g = b = v;
+
+ return ([ Math.round(r * 255), Math.round(g * 255),
+ Math.round(b * 255) ]);
+ }
+
+ h /= 60; // sector 0 to 5
+
+ i = Math.floor(h);
+ f = h - i; // fractional part of h
+ p = v * (1 - s);
+ q = v * (1 - s * f);
+ t = v * (1 - s * (1 - f));
+
+ switch (i) {
+ case 0:
+ r = v;
+ g = t;
+ b = p;
+ break;
+
+ case 1:
+ r = q;
+ g = v;
+ b = p;
+ break;
+
+ case 2:
+ r = p;
+ g = v;
+ b = t;
+ break;
+
+ case 3:
+ r = p;
+ g = q;
+ b = v;
+ break;
+
+ case 4:
+ r = t;
+ g = p;
+ b = v;
+ break;
+
+ default: // case 5:
+ r = v;
+ g = p;
+ b = q;
+ break;
+ }
+
+ return ([ Math.round(r * 255),
+ Math.round(g * 255), Math.round(b * 255) ]);
+}

0 comments on commit 3196ec5

Please sign in to comment.