-
Notifications
You must be signed in to change notification settings - Fork 0
/
climate_financing_yearly.html
181 lines (180 loc) · 14 KB
/
climate_financing_yearly.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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!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">
<title>Climate financing yearly</title>
<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>
<script src="js/climate_financing_yearly.js" type="module"></script>
<div class="d-flex flex-column flex-lg-row justify-content-center">
<!-- Input-->
<div class="d-flex flex-wrap justify-content-center mb-4 py-3 px-3" style="margin:0 auto">
<div class="flex-column">
<div>
Annual climate finance needed to replace coal with<br>renewables.</div>
<label class="form-label" for="requisite-climate-financing-unit">Unit<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Annual climate financing needs, given by the annual costs of phasing out coal (i.e., annual opportunity costs of coal and investments costs in replacement energy). The non-discounted annual costs are expressed either in Billion dollars or as a percentage of annual GDP.">
<!-- 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="requisite-climate-financing-unit" onchange="calculate()">
<option selected>Billion dollars</option>
<option>% of GDP</option>
</select>
<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="coal-replacement">Coal replacement<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="The mixture of replacement energy with which phased out coal is replaced.">
<!-- 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="coal-replacement" onchange="calculate()">
<option value="100% solar, 0% wind">100% solar, 0% wind</option>
<option value="56% solar, 42% wind onshore, 2% wind offshore">56% solar, 44% wind (42% onshore, 2% offshore)</option>
<option selected value="50% solar, 25% wind onshore, 25% wind offshore">50% solar, 50% wind (25% onshore, 25% offshore)</option>
<option value="0% solar, 100% wind onshore, 0% wind offshore">0% solar, 100% wind (100% onshore, 0% offshore)</option>
<option value="0% solar, 0% wind onshore, 100% wind offshore">0% solar, 100% wind (0% onshore, 100% offshore)</option>
</select>
<label class="form-label" for="lifetime-renewable-plants">Lifetime of renewable plants
</label>
<select class="form-select w-80 mb-2" id="lifetime-renewable-plants" onchange="calculate()">
<option selected>30 years</option>
<option>50 years</option>
</select>
<label class="form-label" for="learning-curve">Investment costs fall - learning curve<span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top" title="The costs of renewables have fallen sharply over the last decades because of learning-by-doing. The drop-down “learning” means that we capture the drop in investment costs in renewables resulting from learning of earlier built renewables to replace coal. The drop-down “no learning” represents a benchmark where no learning-by-doing effects take place and future investment costs do not further fall.">
<!-- 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="learning-curve" onchange="calculate()">
<option selected>Learning (investment cost drop because of learning)</option>
<option>No learning (no investment cost drop)</option>
</select>
<label class="form-label" for="energy-storage">Investment costs in energy storage
</label>
<select class="form-select w-80 mb-2" id="energy-storage" onchange="calculate()">
<option selected>Not included</option>
<option>Short-term storage</option>
<option>Short-term + long-term storage</option>
</select>
<label class="form-label" for="by-region"></label>
<select class="form-select w-80" id="by-region" onchange="calculate()">
<optgroup label="Level of development">
<option selected>World</option>
<option>Developed Countries</option>
<option>Developing Countries</option>
<option>Emerging Market Countries</option>
</optgroup>
<optgroup label="Region">
<option>Asia</option>
<option>Africa</option>
<option>North America</option>
<option>Latin America & the Carribean</option>
<option>Europe</option>
<option>Australia & New Zealand</option>
</optgroup>
<!--optgroup(label="Country")#all-countries-->
</select>
<label class="form-label" for="coal-export">Coal export
</label>
<select class="form-select w-80 mb-2" id="coal-export" onchange="calculate()">
<option selected>Disabled</option>
<option>Enabled</option>
</select>
</div>
</div>
<!-- Output-->
<div class="mx-auto py-3 px-3" id="timeseries" style="@media (min-width: 1200px) {width:60%; margin:0 auto;}"></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>)
</summary>
<pre id="result-data"></pre>
</details>
</div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/@observablehq/[email protected]"></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 {iso3166} from "./js/iso-3166-data.js"
import {calculate} from "./js/climate_financing_yearly.js"
window.calculate = calculate
calculate()
// Insert all countries into the region selector dropdown
//const allCountries = document.getElementById("all-countries")
//for (const e of iso3166) {
// allCountries.appendChild(new Option(e.name, e["alpha-2"]))
//}
</script>
</body>
</html>