Protovis – Index Charts

Protovis – Index Charts.

<html>
  <head>
    <title>Index Chart</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="stocks.js"></script>
    <style type="text/css">

#fig {
  width: 860px;
  height: 400px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var data = [],
    fy = function(d) d.price, // y-axis value
    fx = function(d) d.index,  // x-axis value
    ft = function() data[this.parent.index].ticker, // label
    w = 730,
    h = 360,
    S = pv.max(pv.values(stocks), function(s) s.values.length),
    idx = Math.floor(S/2) - 1,
    x = pv.Scale.linear(0,S-1).range(0,w),
    y = pv.Scale.linear(-1,5).range(0,h),
    rescale = true;

/* Normalize the data according to an index point. */
var indexify = function(data, cols, idx) {
    return cols.map(function(c) {
        var v = data[c].values[idx];
        return { ticker: c,
            values: data[c].values.map(function(d,i) {
	                  return {index:i, price:((d-v)/v)}; }) 
        }
    });
};

/* Compute new index values, rescale if needed, and render. */
var update = function() {
    data = indexify(stocks, names, idx);
    if (rescale) {
      var min = pv.min(data.map(function(d) pv.min(d.values, fy)));
      var max = pv.max(data.map(function(d) pv.max(d.values, fy)));
    }
    y.domain(min, max).nice();
    vis.render();
}

/* The visualization panel. Stores the active index. */
var vis = new pv.Panel()
    .def("i", -1)
    .left(60)
    .right(70)
    .top(20.5)
    .bottom(18)
    .width(w)
    .height(h);

/* Horizontal gridlines showing %-change. */
vis.add(pv.Rule)
    .data(function() y.ticks(8))
    .bottom(y)
    .strokeStyle(function(d) d==0 ? "black" : "#cccccc")
  .anchor("left").add(pv.Label)
    .text(function(d) (d * 100).toFixed(0) + "%");

/* Y-axis label */
vis.add(pv.Label)
    .data(["Gain / Loss Factor"])
    .left(-45)
    .bottom(h/2)
    .font("10pt Arial")
    .textAlign("center")
    .textAngle(-Math.PI/2);

/* Stock lines. */
vis.add(pv.Panel)
    .data(function() data)
  .add(pv.Line)
    .data(function(d) d.values)
    .left(x.by(fx))
    .bottom(y.by(fy))
    .lineWidth(2)
  .add(pv.Label)
    .visible(function() this.index == S-1)
    .textBaseline("middle")
    .textMargin(6)
    .text(ft);

/* Current index line. */
vis.add(pv.Rule)
    .visible(function() idx >= 0 && idx != vis.i())
    .left(function() x(idx))
    .top(-4)
    .bottom(-4)
    .strokeStyle("red")
  .anchor("bottom").add(pv.Label)
    .text(function() stocks.Date.values[idx]);

/* An invisible bar to capture events (without flickering). */
vis.add(pv.Panel)
    .events("all")
    .event("mousemove", function() { idx = x.invert(vis.mouse().x) >> 0; update(); });

update();

    </script>
  </div></div></body>
</html>

 

Data

Due to size, the data file is omitted from this example. See stocks.js.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s