Old school D3 from simpler times

All examples By author By category About

timelyportfolio

Full window Github gist

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>

xxxxxxxxxx
 
<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