JGB yield curve chart produced with vega

Japanese Government Bond (JGB) Yield Curve

Chart Produced by vega with Data from Japanese MOF

A little different look at JGB yields than my last gist. This one graphs the yield curve, and the opacity varies by time from today. I would like to add text date labels to show on line hover, but I'm not sure it is possible with vega.

<html>
  <head>
    <title>Vega Plot of JGB Yield Curve</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://trifacta.github.io/vega/vega.js"></script>
    <style>
* { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
body { width: 450px; line-height: 16pt; }
    </style>
  </head>
  <body>
    <p><strong>Vega Plot of JGB Yield Curve</strong></p>
    <div id="view" class="view"></div>
  </body>
  <script type="text/javascript">

vg.parse.spec("yieldcurve.json", function(chart) {
    var view = chart({el:"#view"})
      .renderer("svg") 
      .on("mouseover", function(event, item) {
        // invoke hover properties on cousin one hop forward in scenegraph
        view.update({
          props: "hover",
          items: item.cousin(1)
        });
      })
      .on("mouseout", function(event, item) {
        // reset cousin item, using animated transition
        view.update({
          props: "update",
          items: item.cousin(1)
        //  duration: 10,
        //  ease: "linear"
        });
      })      
      .update();
  });
  
  </script>
</html>

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

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

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

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