3

I'm working with the Protovis library to do a streamgraph of data. I want to label the different layers with the "words" array. I can't seem to get the words to line up how I'd like. I want them to be inserted where the graph is the largest for that particular layer, similar to this site:

http://mbostock.github.com/protovis/ex/jobs.html

enter image description here 

var words = [
"tasty","delicious","yum","scrumpious","dry"];
var data = [
[23,52,6,3,16,35,24,12,35,119,2,5,65,33,81,61,55,122,3,19,2,5,65,33,81,61,55,122,3,19,54,72,85,119,23,52,6,3,16,35],
[43,2,46,78,46,25,54,72,85,119,23,52,6,3,16,35,24,12,35,119,23,52,6,3,16,35,24,12,35,119,2,5,65,33,81,61,55,122,3,19],
[2,5,65,33,81,61,55,122,3,19,54,72,85,119,23,52,6,3,16,35,2,5,65,33,81,1,5,12,95,14,12,8,84,115,15,27,6,31,6,35],
[2,5,6,3,1,6,5,12,32,191,142,22,75,139,27,32,26,13,161,35,21,52,64,35,21,61,55,123,5,142,54,58,8,11,53,2,64,3,16,35],
[2,5,65,33,81,61,55,122,3,19,54,72,85,119,23,52,6,3,16,35,2,5,65,33,81,61,55,123,5,142,54,58,8,11,53,2,64,3,16,35]];

var w = 800,
    h = 300,
    x = pv.Scale.linear(0, 40).range(0, w),
    y = pv.Scale.linear(0, 600).range(0, h);

var vis = new pv.Panel()
    .canvas('streamgraph')
    .width(w)
    .height(h);

vis.add(pv.Layout.Stack)
    .layers(data)
    .order("inside-out")
    .offset("wiggle")
    .x(x.by(pv.index))
    .y(y)   
  .layer.add(pv.Area)
    .fillStyle(pv.ramp("#aad", "#556").by(Math.random))
    .strokeStyle(function () { this.fillStyle().alpha(.5) });



vis.render();
VividD
  • 10,456
  • 6
  • 64
  • 111
Josh O'Bryan
  • 327
  • 2
  • 9

1 Answers1

3

Try this:

vis.add(pv.Layout.Stack)
    .layers(data)
    .order("inside-out")
    .offset("wiggle")
    .x(x.by(pv.index))
    .y(y)   
  .layer.add(pv.Area)
    .fillStyle(pv.ramp("#aad", "#556").by(Math.random))
    .strokeStyle(function () { this.fillStyle().alpha(.5) })
 // this is new code:
 .anchor("center").add(pv.Label)
    .def("max", function(d) {return pv.max.index(d)})
    .visible(function() {return this.index == this.max() })
    .text(function(d, p) {return words[this.parent.index]});

Basically this adds a whole bunch of labels to your areas, But then only makes them visible at the index where the value is the maximum, by defining a function max on the series. I adapted this code from the code in the link you sent.

nicolaskruchten
  • 26,384
  • 8
  • 83
  • 101