vega for time series chart with shaded blocks

vega stocks spec forked to add shaded blocks

Often time series charts can be enhanced by shaded blocks to highlight events or periods as shown by this example which uses the R package xtsExtra. Vega specs already allow this functionality, and it is fairly easy to implement.

I added an events object to the JSON data array.

    {
      "name": "events",
      "values": [
        {"name":"Test1", "start":"Apr 2000", "end":"Mar 2003"},
        {"name":"Test2", "start":"Oct 2007", "end":"Mar 2009"}
      ]
    }

and then a set of marks to do the shading. I was glad to see that vega allows both x2 and width for the rect mark, since I am still unsure how to do calculations with a spec to calculate width.

  "marks": [
    {
      "type" : "rect",
      "from" : { "data": "events" },
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.start"},
          "x2": {"scale": "x", "field": "data.end"},
          "y": {"value": 0},
          "y2": {"scale" : "y", "value" : 0 },
          "fill": {"value": "#888"},
          "opacity": {"value" : 0.5}
        }
      }
    }

xxxxxxxxxx
 
<html>
  <head>
    <title></title>
    <link href="https://trifacta.github.com/vega/css/vega.css" rel="stylesheet">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://trifacta.github.com/vega/vega.js"></script>
  </head>
  <body>
    <div id="vis"></div>
  </body>
  <script type="text/javascript">
​
  function parse(spec) {
    vg.parse.spec(spec, function(chart) {
      var view = chart({ el:"#vis" });
      view.viewport(null)
          .renderer("svg")
          .update();
    });
  }
  parse("stocks_shade.json");
  </script>
  </html>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://trifacta.github.com/vega/vega.js to a secure url

https://d3js.org/d3.v3.min.js

https://trifacta.github.com/vega/vega.js