block by timelyportfolio 5405240

JGB yield curve chart produced with vega

Full Screen

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.

index.html

<html>
  <head>
    <title>Vega Plot of JGB Yield Curve</title>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//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>

yieldcurve.json

{
  "width": 700,
  "height": 400,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "format": {"type":"json", "parse":{"date":"date","value":"number"}},
      "url": "data/jgbyields.json",
       "transform": [
           {
            "type" : "formula",
            "field" : "maturity",
            "expr" : "Number(d.data.indexname.substring(1,d.data.indexname.length))"
           },
           {
            "type" : "formula",
            "field" : "timeago",
            "expr" : "3/((new Date() - d.data.date)/1000/60/60/24)"
           }
       ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "nice": true,
      "domain": {"data": "table", "field": "maturity"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.value"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category20"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "group",
      "from": {
            "data": "table",
            "transform": [
                {"type": "facet", "keys": ["data.date"]}
            ]
      },
      "marks": [
        {
          "type": "line",
          "properties": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x", "field": "maturity"},
              "y": {"scale": "y", "field": "data.value"},
              "size": {"value": 50},
              "stroke": {"scale": "color", "value": 2},
              "strokeWidth": {"value": 2},
              "opacity": {"field": "timeago"}                
            },
            "update": {
              "opacity": {"field": "timeago"},
              "stroke": {"scale": "color", "value": 2},                
              "strokeWidth": {"value": 2}                
            },
            "hover": {
              "opacity": {"value": 1},
              "stroke" : {"value": "black"},
              "strokeWidth": {"value": 2.5}                
            }
          }
        },
        {
          "type": "text",
          "properties": {
                "enter": {
                  "x": {"value": 100},
                  "y": {"value": 100},
                  "dy": {"value": 12},
                  "fontWeight": {"value": "bold"},
                  "text": {"field": "data.date"},
                  "align": {"value": "left"},
                  "fill": {"value": "#000"},
                  "opacity": {"value": 0}                
                },
                "update": {
                  "opacity": {"value": 0}             
                },
                "hover": {
                  "opacity": {"value": 1}               
                }              
            }
        }
      ]
    }    
  ]
}