javascriptlabelprotovisstream-graph

Adding labels to a pv.Layout.Stack (streamgraph) in Protovis


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();

Solution

  • 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.