Add bond price-yield chart

docs/finc50/fixed-income/bond-prices-and-yields.md

@@ -9,3 +9,12 @@ disqus: true
   include "./vega-charts/bond-cashflows-price.json"
 %}
 ```
+
+## Price and yield relationship
+
+```vegalite
+{%
+  include "./vega-charts/bond-price-yield.json"
+%}
+```
+

docs/finc50/fixed-income/vega-charts/bond-price-yield.json

@@ -0,0 +1,170 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "A chart of bond's price and yield, made by Mingze Gao",
+  "width": 700,
+  "height": 300,
+  "title": {
+    "text": "Bond Price and Yield",
+    "fontSize": 18,
+    "anchor": "middle"
+  },
+  "data": [
+    {
+      "name": "table",
+      "transform": [
+        {
+          "type": "sequence",
+          "as": "yield",
+          "start": 0.0,
+          "step": 0.5,
+          "stop": 20.5
+        },
+        {
+          "type": "formula",
+          "as": "price",
+          "expr": "datum.yield>0 ? (10000*couponRate*(1-pow(1+datum.yield/100,-maturityInYears))/(datum.yield/100)+10000*pow(1+datum.yield/100,-maturityInYears)) : 10000*(1+couponRate*maturityInYears)"
+        },
+        {
+          "type": "formula",
+          "as": "price5",
+          "expr": "datum.yield>0 ? (10000*0.05*(1-pow(1+datum.yield/100,-maturityInYears))/(datum.yield/100)+10000*pow(1+datum.yield/100,-maturityInYears)) : 10000*(1+0.05*maturityInYears)"
+        }
+      ]
+    },
+    {
+      "name": "scaledata",
+      "source": "table",
+      "transform": [
+        {
+          "type": "formula",
+          "as": "maxV",
+          "expr": "max(datum.price, datum.price5*1.2)"
+        }
+      ]
+    }
+  ],
+  "signals": [
+    {
+      "name": "maturityInYears",
+      "value": 10,
+      "bind": { "input": "range", "min": 1, "max": 30, "step": 1 }
+    },
+    {
+      "name": "couponRate",
+      "value": 0.05,
+      "bind": { "input": "range", "min": 0, "max": 0.1, "step": 0.0001 }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "linear",
+      "domain": { "data": "table", "field": "yield", "sort": true },
+      "range": "width"
+    },
+    {
+      "name": "y",
+      "type": "linear",
+      "domain": { "data": "scaledata", "field": "maxV" },
+      "range": "height"
+    }
+  ],
+  "axes": [
+    { "orient": "bottom", "scale": "x", "title": "Yield (%)", "ticks": false },
+    { "orient": "left", "scale": "y", "title": "Bond Price" }
+  ],
+  "marks": [
+    {
+      "type": "rule",
+      "encode": {
+        "update": {
+          "x": { "scale": "x", "value": 0 },
+          "y": { "scale": "y", "value": 10000 },
+          "x2": { "scale": "x", "value": 5 },
+          "y2": { "scale": "y", "value": 10000 },
+          "strokeWidth": { "value": 1 },
+          "strokeDash": { "value": [8, 3] },
+          "strokeCap": { "value": "round" },
+          "opacity": { "value": 1 }
+        }
+      }
+    },
+    {
+      "type": "rule",
+      "encode": {
+        "update": {
+          "x": { "scale": "x", "value": 5 },
+          "y": { "scale": "y", "value": 0 },
+          "x2": { "scale": "x", "value": 5 },
+          "y2": { "scale": "y", "value": 10000 },
+          "strokeWidth": { "value": 1 },
+          "strokeDash": { "value": [8, 3] },
+          "strokeCap": { "value": "round" },
+          "opacity": { "value": 1 }
+        }
+      }
+    },
+    {
+      "type": "line",
+      "from": { "data": "table" },
+      "encode": {
+        "update": {
+          "x": { "scale": "x", "field": "yield" },
+          "width": { "scale": "x", "band": 1 },
+          "y": { "scale": "y", "field": "price" },
+          "tooltip": {
+            "signal": "{ 'Bond Price': format(datum.price, '$,.2f') }"
+          }
+        }
+      }
+    },
+    {
+      "type": "line",
+      "from": { "data": "table" },
+      "encode": {
+        "update": {
+          "x": { "scale": "x", "field": "yield" },
+          "y": { "scale": "y", "field": "price5" },
+          "stroke": { "value": "#d6001c" },
+          "tooltip": {
+            "signal": "{ 'Bond Price': format(datum.price5, '$,.2f') }"
+          }
+        }
+      }
+    },
+    {
+      "type": "text",
+      "from": { "data": "table" },
+      "encode": {
+        "update": {
+          "x": { "scale": "x", "value": 20 },
+          "y": { "scale": "y", "field": "price", "offset": -5 },
+          "text": {
+            "signal": "format(datum.price, '$,.0f')+'@'+format(datum.yield,'.1f')+'%'"
+          },
+          "fontSize": { "value": 12 },
+          "align": { "value": "left" },
+          "baseline": { "value": "bottom" },
+          "fill": { "value": "black" }
+        }
+      }
+    },
+
+    {
+      "type": "text",
+      "encode": {
+        "enter": {
+          "align": { "value": "right" },
+          "baseline": { "value": "bottom" },
+          "fill": { "value": "rgba(0, 0, 0, 0.2)" },
+          "fontSize": { "value": 14 },
+          "x": { "value": 0, "offset": "width" },
+          "y": { "value": 0, "offset": "height*1.2" },
+          "text": {
+            "value": "Assume $10,000 bond, annual coupons paid in arrears and effect annual discount rate."
+          }
+        }
+      }
+    }
+  ]
+}

docs/finc50/index.md

@@ -28,7 +28,7 @@ The objectives are
 
 ## Demo
 
-### Bond price
+### Bond cashflows and price
 
 An interactive chart and calculator of bond cashflows, present values and prices.
 
@@ -38,6 +38,16 @@ An interactive chart and calculator of bond cashflows, present values and prices
 %}
 ```
 
+### Bond price and yield
+
+An interactive chart of bond price and yield.
+
+```vegalite
+{%
+  include "./fixed-income/vega-charts/bond-price-yield.json"
+%}
+```
+
 ### Risk and return
 
 A graph showing volatility and return of S&P500 constituents in 2022.(1)