teaching2/mpFrameworks.html at main · RDeconomist/teaching2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<!--To allow embed in my web page-->

<head>
<!--The next three lines allow the Vega embed-->
<script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>
</head>


<body>
<!--Set the Div that the chart is going in-->
<!--And some in-line CSS to style the chart-->
<div id="mpFrameworks"
  style= "background-color: white;
  padding: 5px;
  border-radius: 20px;
  border-style:solid;
  border-width: 1px;
  border-color:#d1cfcf;
  width: fit-content">

<!--Now the JavaScript for the chart-->
<script>
var mpFrameworks =

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {"url": "https://raw.githubusercontent.com/RDeconomist/teaching2/main/mpFrameworks.csv"},

  "description": "Inflation UK",

  "title": {
    "text": "Monetary frameworks, 1974-2017",
    "subtitle":"Target variables, 25 advanced economies. Source: monetaryframeworks.org and my calcs.",
    "subtitleFontStyle":"italic",
    "subtitleFontSize":10,
    "anchor": "start",
    "color": "black"
  },

  "width": 550, "height": 350,

  "mark": "area",

  "encoding": {
    "x": {
      "timeUnit": "year",
      "field": "Year",
      "axis": {"format": "%Y"},
      "title":null
    },

    "y": {
      "field": "Share",
      "type": "quantitative",
      "axis": {"format": ".0%"},
      "title":null
    },

    "color": {
      "field": "Series",
      "scale": {"range": ["#179fdb", "#eb5c2e", "#0063af", "#122b39", "lightgrey"]},
      "title":"Target"
    },

    "tooltip":[
      {"timeUnit": "year", "field": "Year", "title":"Year"},
      {"field": "Series","type": "nominal","title":"Target"},
      {"field": "Value","type": "quantitative","format": ".0f","title":"# Countries"},
      {"field": "Share","type": "quantitative","format": ".0%","title":"Share"}
    ]

  }
}

vegaEmbed('#mpFrameworks', mpFrameworks, {"actions": false});
</script>
</div>
</body>
</html>