-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathopportunity_costs_map.html
163 lines (160 loc) · 11.4 KB
/
opportunity_costs_map.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
body {
font-family: sans-serif;
}
.country {
stroke-width: 1px;
}
.country:hover {
opacity: 1 !important;
stroke: black !important;
stroke-width: 1px !important;
}
div.tooltip {
position: absolute;
text-align: center;
//width: 60px;
//height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<link rel="stylesheet" type="text/css" href="public/style.css">
</head>
<body class="text-responsive">
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 navbar navbar-light bg-light"><a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none ms-3" href="/"><span class="fs-4 navbar-brand">The Great Carbon Arbitrage</span></a>
<!-- This is GDPR-compliant-->
<!-- script(async defer src="https://beampipe.io/js/tracker.js" data-beampipe-domain="greatcarbonarbitrage.com")-->
<!-- The following has unlimited events-->
<!--script(data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer)-->
<ul class="nav nav-text">
<li class="nav-item"><a class="nav-link active" href="index.html">Carbon Arbitrage</a></li>
<li class="nav-item">
<div class="dropdown"><a class="nav-link active dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="ClimateFinancingDropdown">Climate Financing</a>
<ul class="dropdown-menu" aria-labelledby="ClimateFinancingDropdown">
<li><a class="dropdown-item" href="climate_financing_map.html">Country</a></li>
<li><a class="dropdown-item" href="climate_financing.html">Regional</a></li>
<li><a class="dropdown-item" href="climate_financing_yearly.html">Annual</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<div class="dropdown"><a class="nav-link active dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="OpportunityCostsDropdown">Opportunity Costs</a>
<ul class="dropdown-menu" aria-labelledby="OpportunityCostsDropdown">
<li><a class="dropdown-item" href="opportunity_costs_map.html">Country</a></li>
<li><a class="dropdown-item" href="opportunity_costs.html">Global</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<div class="dropdown"><a class="nav-link active dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="CoasianBargainDropdown">Coasian Bargain</a>
<ul class="dropdown-menu" aria-labelledby="CoasianBargainDropdown">
<li><a class="dropdown-item" href="coasian_bargain_global.html">Global deal</a></li>
<li><a class="dropdown-item" href="coasian_bargain_regional.html">Regional deal</a></li>
<li><a class="dropdown-item" href="coasian_bargain_country.html">Country deal</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<div class="dropdown"><a class="nav-link active dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="paperDropdown">Paper</a>
<ul class="dropdown-menu" aria-labelledby="paperDropdown">
<li><a class="dropdown-item" href="https://cepr.org/publications/dp17654">CEPR</a></li>
<li><a class="dropdown-item" href="https://www.imf.org/en/Publications/WP/Issues/2022/05/31/The-Great-Carbon-Arbitrage-518464">IMF</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a class="nav-link active" href="https://github.com/ox-inet-resilience/carbon_arbitrage_code">Code</a></li>
<li class="nav-item"><a class="nav-link active" href="blogs.html">Blogs</a></li>
<li class="nav-item"><a class="nav-link active" href="media.html">Media</a></li>
<li class="nav-item"><a class="nav-link active" href="talks.html">Talks</a></li>
<li class="nav-item"></li>
</ul>
</header>
</div>
<div style="width: 80%; margin:0 auto;">World map showing the present value of the opportunity costs of coal.</div>
<!-- Output-->
<svg class="d-flex" id="legend" style="height: 60px; margin:0px auto;"></svg>
<svg class="d-flex" id="map" style="margin:0px auto;"></svg>
<div class="d-flex flex-wrap justify-content-center" style="margin:0 auto">
<div class="flex-column">
<label class="form-label" for="phaseout-scenario">Coal phase out scenario<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="The pathway according to which coal is phased out. “Net Zero 2050 (NGFS global scenario)” uses a pathway developed by the Network for Greening the Financial System (NGFS) to phase out coal in line with the net zero 2050 ambitions.">
<!-- The vertical-align: -0.125em is necessary. See https://github.com/twbs/icons/issues/82-->
<svg class="bi bi-info-circle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -0.125em">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
</svg></span>
</label>
<select class="form-select w-80 mb-2" id="phaseout-scenario" onchange="calculate()">
<option selected>Net Zero 2050 (NGFS global scenario)</option>
</select>
<label class="form-label" for="time-horizon">Time horizon of carbon arbitrage<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="The last year in which costs are made to phase out coal.">
<!-- The vertical-align: -0.125em is necessary. See https://github.com/twbs/icons/issues/82-->
<svg class="bi bi-info-circle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -0.125em">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
</svg></span>
</label>
<select class="form-select w-80 mb-2" id="time-horizon" onchange="calculate()">
<option>2030</option>
<option>2050</option>
<option>2070</option>
<option selected>2100</option>
</select>
<label class="form-label" for="discount-rate">Discount rate ρ<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="The discount rate is used to obtain the present value of costs of phasing out coal over 2024 to the horizon. WACC stands for the weighted average costs of capital.">
<!-- The vertical-align: -0.125em is necessary. See https://github.com/twbs/icons/issues/82-->
<svg class="bi bi-info-circle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -0.125em">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
</svg></span>
</label>
<select class="form-select w-80 mb-2" id="discount-rate" onchange="calculate()">
<option>0%</option>
<option selected>2.8% (WACC)</option>
<option>3.6% (WACC, average risk-premium 100 years)</option>
<option>5%</option>
<option>8%</option>
</select>
<label class="form-label" for="opportunity-costs-type">Type of opportunity costs
</label>
<select class="form-select w-80 mb-2" id="opportunity-costs-type" onchange="calculate()">
<option selected>Compensation missed cash flows of coal companies</option>
<option>Compensation lost wages of coal workers</option>
<option>Compensation retraining costs</option>
<option>All of the above</option>
</select>
</div>
</div>
<!-- Data-->
<div class="px-3 mb-3">
<details>
<summary>Result data in CSV format (click here to view online, or <a id="download-result-data">download</a>)<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="The country codes are according to ISO-3166">
<!-- The vertical-align: -0.125em is necessary. See https://github.com/twbs/icons/issues/82-->
<svg class="bi bi-info-circle" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="vertical-align: -0.125em">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
</svg></span>
</summary>
<pre id="result-data"></pre>
</details>
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Needed to enable Bootstrap tooltips-->
<script src="js/enable_tooltips.js"></script>
<script type="module">
import {calculate} from "./js/opportunity_costs_map.js"
window.calculate = calculate
</script>
</body>
</html>