PageSourceSearch

https://carbonintensity.org.uk/

html carbonintensity.org.uk collected 2026-10-02 12:32:14 UTC 45,451 bytes, 948 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <style type="text/css">
6      * {
7      box-sizing: border-box;
8      }   
9
10
11      #cookie-warning{
12      color: white;
13      font-weight: bold;
14      }
15      svg > g > g:last-child { pointer-events: none }
16      #cookie-paragraph{
17      margin: 5px;
18      color: white;
19      font-weight: normal;
20      font-size: 14px;
21      }
22      #WWFGizmo{
23      width: 100%;
24      }
25      #toast-container{
26        background-color: #7a3864;
27        padding:20px 0 0 0;
28      }
29      #myVideo {
30      position: relative;
31      right: 0;
32      bottom: 0;
33      width: 100%;
34      height: 100%;
35      }
36      .content {
37      position: relative;
38      bottom: 0;
39      background: rgba(0, 0, 0, 0.5);
40      color: #f1f1f1;
41      width: 100%;
42      padding: 20px;
43      }
44      .content-img {
45      padding: 20px;
46      }
47      .content-icon {
48      padding: 10px;
49      }
50      #myBtn {
51      width: 200px;
52      font-size: 18px;
53      padding: 10px;
54      border: none;
55      background: #000;
56      color: #fff;
57      cursor: pointer;
58      }
59      #myBtn:hover {
60      background: #ddd;
61      color: black;
62      }
63      /*css to go here*/
64      .corner-ribbon{
65      width: 200px;
66      background: #e43;
67      position: absolute;
68      top: 25px;
69      left: -50px;
70      text-align: center;
71      line-height: 50px;
72      letter-spacing: 1px;
73      color: #f0f0f0;
74      transform: rotate(-45deg);
75      -webkit-transform: rotate(-45deg);
76      }
77      #chart_wrap {
78      position: relative;
79      padding-bottom: 100%;
80      height: 0;
81      overflow:hidden;
82      }
83      /* Custom styles */
84      .corner-ribbon.sticky{
85      position: fixed;
86      }
87      .corner-ribbon.shadow{
88      box-shadow: 0 0 3px rgba(0,0,0,.3);
89      }
90      /* Different positions */
91      .corner-ribbon.top-left{
92      top: 25px;
93      left: -50px;
94      transform: rotate(-45deg);
95      -webkit-transform: rotate(-45deg);
96      }
97      .corner-ribbon.top-right{
98      top: 25px;
99      right: -50px;
100      left: auto;
101      transform: rotate(45deg);
102      -webkit-transform: rotate(45deg);
103      }
104      .corner-ribbon.bottom-left{
105      top: auto;
106      bottom: 25px;
107      left: -50px;
108      transform: rotate(45deg);
109      -webkit-transform: rotate(45deg);
110      }
111      .corner-ribbon.bottom-right{
112      top: auto;
113      right: -50px;
114      bottom: 25px;
115      left: auto;
116      transform: rotate(-45deg);
117      -webkit-transform: rotate(-45deg);
118      }
119      /* Colors */
120      .toolbar {
121      position: absolute;
122      top: 20px;
123      left: 20px;
124      z-index: 1;
125      }
126      .toolbar span {
127      cursor: pointer;
128      color: #000;
129      font-size: 20px;
130      margin-right: 4px;
131      opacity: 0.8;
132      }
133      .toolbar:hover span {
134      transition: opacity 0.2s ease-in-out;
135      opacity: 0.8
136      }
137      .toolbar span:hover {
138      opacity: 1;
139      }
140      body.dark .toolbar span {
141      color: #fff;
142      }
143      body.dark .toolbar .toggle-light:hover {
144      color: #faff00;
145      }
146      .map {
147      position: relative;
148      height:calc(100% - 0px);
149      width: 100%;
150      }
151      #map {
152      position: relative;
153      min-height: 700px;
154      height:calc(100% - 0px);
155      width: 100%;
156      }
157      body {
158      font-family:"Poppins", Arial, "Helvetica Neue 65 Medium", Helvetica, sans-serif;
159      font-size: 12px;
160      }
161      .g-hed {
162      text-align: left;
163      text-transform: uppercase;
164      font-weight: bold;
165      font-size: 22px;
166      margin: 0px 0;
167      }
168      .g-source-bold {
169      text-align: left;
170      font-size: 10px;
171      font-weight: bold;
172      }
173      .g-source {
174      margin: 0px 0;
175      }
176      .g-source-bold {
177      text-align: left;
178      font-size: 10px;
179      }
180      .g-intro {
181      font-size: 16px;
182      margin: 0px 0px 0px 0px;
183      }
184      .g-labels {
185      font-family:"Poppins", Arial, "Helvetica Neue 65 Medium", Helvetica, sans-serif;
186      fill: white;
187      font-weight: normal;
188      font-size: 14px;
189      }
190      .axis line {
191      fill: none;
192      stroke: #ccc;
193      stroke-dasharray: 2px 3px;
194      shape-rendering: crispEdges;
195      stroke-width: 1px;
196      }
197      .axis text {
198      font-family: "Poppins", Arial, "Helvetica Neue 65 Medium", Helvetica, sans-serif;
199      font-size: 13px;
200      pointer-events: none;
201      fill: #ffffff ;
202      }
203      .y.axis text {
204      text-anchor: end !important;
205      font-size: 14px;
206      fill: #ffffff ;
207      }
208      .domain {
209      display: none;
210      }
211      .line {
212      stroke: #2f5491;
213      stroke-width: 3px;
214      fill: none;
215      }
216      .overlay {
217      fill: none;
218      pointer-events: all;
219      }
220      .focus {
221      font-size: 12px;
222      stroke: #ffffff;
223      }
224      .focus circle {
225      fill: #5e8dc9;
226      }
227      a.lowercase {
228      text-transform: lowercase;
229      }
230      /* a.twitter-timeline:hover,
231      a.twitter-timeline:focus {
232      background-color: #dedede;
233      }
234      .table-hover tr:hover td {
235      background-color: #EAEDED;
236      }
237      /* Color Highlight for keyboard navigation */
238      /* a.twitter-timeline:focus {
239      outline: none;
240      border-color: #0089cb;
241      } */
242      /* The slider itself */
243      .slider {
244      box-sizing: inherit;
245      -webkit-appearance: none;  /* Override default CSS styles */
246      appearance: none;
247      width:  100% !important;
248      overflow: hidden;
249      /*width: 80%;  Full-width */
250      height: 25px; /* Specified height */
251      background: #d3d3d3; /* Grey background */
252      outline: none; /* Remove outline */
253      opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
254      -webkit-transition: .2s; /* 0.2 seconds transition on hover */
255      transition: opacity .2s;
256      }
257      /* Mouse-over effects */
258      .slider:hover {
259      opacity: 1; /* Fully shown on mouse-over */
260      }
261      /* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
262      .slider::-webkit-slider-thumb {
263      -webkit-appearance: none; /* Override default look */
264      appearance: none;
265      width: 25px; /* Set a specific slider handle width */
266      height: 25px; /* Slider handle height */
267      background: #42DCA3; /* Green background */
268      cursor: pointer; /* Cursor on hover */
269      }
270      .slider::-moz-range-thumb {
271      width: 25px; /* Set a specific slider handle width */
272      height: 25px; /* Slider handle height */
273      background: #42DCA3; /* Green background */
274      cursor: pointer; /* Cursor on hover */
275      }
276      .chart {
277      width: 100%; 
278      min-height: 350px;
279      }
280      .main {
281      height: 100%;
282      }
283      .day {
284      cursor: pointer;
285      }
286      .day > div {
287      line-height: 48px;
288      }
289      .weekday span {
290      font-size: 10px;
291      }
292      .weekday p {
293      display: inline-block;
294      font-size: 16px;
295      font-weight: bold;
296      }
297      .weather img {
298      width: 48px;
299      }
300      .high p,
301      .low p,
302      .hourly .temp {
303      font-size: 20px;
304      }
305      .hourly {
306      text-align: center;
307      display: none;
308      width: 100%; 
309      min-height: 450px;
310      }
311      #test {
312      text-align: center;
313      display: none;
314      width: 100%; 
315      min-height: 450px;
316      }
317      .hourly .hour {
318      font-weight: bold;
319      font-size: 16px;
320      }
321      .hourly img {
322      width: 24px; 
323      }
324      .hourly p {
325      margin: 16px 0;
326      }
327      .last {
328      margin-bottom: 100px;
329      }
330      /*@media (max-width: 720px) {
331      .container {
332      background: rgba(255,255,255,0.8);
333      }*/
334    </style>
335
336    <meta http-equiv="X-UA-Compatible" content="IE=edge">
337    <meta name="viewport" content="width=device-width, initial-scale=1">
338    <meta name="description" content="National Energy System Operator have developed a Regional Carbon Intensity forecast for the GB electricity system.">
339    <meta name="author" content="Lyndon Ruff, Alasdair Bruce">
340    <meta name="keywords" content="Carbon, Intensity, API, National Energy System Operator, NESO, Electricity, Power, Green, Forecast, Emissions, CO2, Regional">
341    <meta name="twitter:card" content="summary">
342    <meta name="twitter:url" content="https://carbonintensity.org.uk">
343    <meta name="twitter:title" content="Carbon Intensity API">
344    <meta name="twitter:description" content="National Energy System Operator, in partnership with Environmental Defense Fund Europe, University of Oxford Department of Computer Science and WWF, have developed a Carbon Intensity forecast for the GB electricity system, with weather data provided by the Met Office.">
345    <meta name="twitter:image" content="https://s3.eu-west-2.amazonaws.com/carbonintensity.org.uk/img/NESO_card.png">
346    <title>Carbon Intensity</title>
347    <link href="Content/bootstrap_white.min.css" rel="stylesheet">
348    <link href="Content/switch.min.css" rel="stylesheet">
349    <link rel='shortcut icon' type='image/x-icon' href='img/favicon.ico' />
350    <!-- <link href="Content/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
351	<link href="css/fontawesome.min.css" rel="stylesheet">
352	<link href="css/brands.min.css" rel="stylesheet">
353	<link href="css/solid.min.css" rel="stylesheet">
354	<link href="css/v4-shims.min.css" rel="stylesheet">
355	<link href="css/all.min.css" rel="stylesheet">
356	<link href="css/regular.min.css" rel="stylesheet">
357	<link href="css/svg-with-js.min.css" rel="stylesheet">
358	<link href="css/v4-font-face.min.css" rel="stylesheet">
359	<link href="css/v5-font-face.min.css" rel="stylesheet">
360  <link href="Content/grayscale_white.min.css" rel="stylesheet">
361
362  <link rel="preconnect" href="https://fonts.googleapis.com">
363  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
364  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
vendor: 71 bytes, lines 364-366
364
365  
366  <script async src="https://www.googletagmanager.com/gtag/js?id=
366UA-106775684-1
vendor: 15 bytes, lines 366-367
366"></script>
367  
367<script src="Scripts/regional2.js"></script>
367
368  
368<script>
369    window.dataLayer = window.dataLayer || [];
370    function gtag(){dataLayer.push(arguments)};
371    gtag('js', new Date());
372    
373    gtag('config', 'UA-106775684-1');
374      
375  </script>
375
376  
376<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
376
377  
378  </head>
379  <body id="page-top" data-bs-spy="scroll" data-bs-target=".navbar-fixed-top">
380    <!-- Navigation -->
381    <nav class="navbar navbar-custom navbar-fixed-top" id="navbar-id">
382      <div class="container">
383        <div class="navbar-header">
384          <button type="button" class="navbar-toggle" data-bs-toggle="collapse" data-bs-target=".navbar-main-collapse">
385          Menu <i class="fa-solid fa-bars"></i>
386          </button>
387          <div class="navbar-right">
388            <ul class="nav navbar-nav">
389              <a class= "page-scroll navbar-brand" href="#page-top" aria-label="Carbon Intensity">
390                <h3 id="currentCO2_top"> </h3>
391                <!-- <div id="currentCO2_top"> </div> -->
392              </a>
393            </ul>
394          </div>
395        </div>
396        <!-- Collect the nav links, forms, and other content for toggling -->
397        <div class="collapse navbar-collapse navbar-right navbar-main-collapse" style="max-height: 365px">
398          <ul class="nav navbar-nav">
399            <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
400            <li class="hidden">
401              <a href="#page-top" aria-label="Page top"></a>
402            </li>
403            <li>
404              <a class="page-scroll" href="#about" aria-label="About">About</a>
405            </li>
406            <li>
407              <a class="page-scroll" href="#graphs" aria-label="National">National</a>
408            </li>
409            <li>
410              <a class="page-scroll" href="#regional" aria-label="Regional">Regional <sup><span class="label label-success">new</span></sup></a>
411            </li>
412            <li>
413              <a class="page-scroll" href="#methodology" aria-label="Methodology">Methodology</a>
414            </li>
415            <li>
416              <a class="page-scroll" href="#docs" aria-label="Documentation">Docs</a>
417            </li>
418            <li>
419              <a class="page-scroll" href="#terms" aria-label="Terms">Terms</a>
420            </li>
421            <li>
422              <a class="page-scroll" href="#contact" aria-label="Contact">Contact</a>
423            </li>
424            <li>
425                <a class="form-check-label" for="flexSwitchCheckDefault">Dark mode<sup><span class="label label-success">beta</span></sup></a>   
426            </li>  
427            <li>
428                <label class="theme-switch" for="flexSwitchCheckDefault">
429                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" onchange="darkMode(map)">
430                <div class="slider round" style="margin-left: 10px; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 4; transition: .4s;"></div>     
431                </label>
432            </li>  
433            
433<script type="text/javascript">
434            const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
435            var checkBox = document.getElementById("flexSwitchCheckDefault");
436            if (currentTheme == "dark") {
437                checkBox.checked = true;
438                window.addEventListener("load", function () {
439                  darkMode(map);
440                });      
441            }
442            </script>
442   
443          </ul>
444        </div>
445        <!-- /.navbar-collapse -->
446      </div>
447      <!-- /.container -->
448    </nav>
449    ,
450    <!-- Intro Header -->
451    <header class="intro">
452      <div class="intro-body">
453        <div class="container">
454          <div class="row">
455            <p class="intro-text">
456              <br/>
457              <br/>
458            <h1 .="font-size: 50px">Carbon Intensity API</h1>
459            <br>
460            <div class="row">
461              <div class="col-lg-10 col-lg-offset-1">
462                <h3>National Energy System Operator (NESO), in partnership with Environmental Defense Fund Europe, University of Oxford Department of Computer Science and WWF, have developed the world's first Carbon Intensity forecast with a regional breakdown.</h3>
463              </div>
464            </div>
465            <div class="row">
466              <div class="col-lg-10 col-lg-offset-1">
467                <p >The Carbon Intensity API uses state-of-the-art Machine Learning and sophisticated power system modelling to forecast the carbon intensity and generation mix 96+ hours ahead for each region in Great Britain. </p>
468                <p>Our OpenAPI allows consumers and smart devices to schedule and minimise CO<sub>2</sub> emissions at a local level.
469                </p>
470                <a id="currentCO2"></a>
471              </div>
472            </div>
473            <h2>2-Day Carbon Intensity Forecast</h2>
474            <div class="main col-lg-8 col-lg-pull-0">
475              <div class="container">
476                <div class="row">
477                  <div class="col-lg-8 col-lg-offset-2">
478                    <div class="day row">
479                      <div class="weekday col-xs-4 col-xs-pull-0">
480                        <span class="glyphicon glyphicon-plus"></span>
481                        <p>Today</p>
482                      </div>
483                      <div class="weather col-xs-3 col-xs-pull-1">
484                        <p id="today_avg"><i class="fa-solid fa-earth-europe" style="color:#A93226;"></i></p>
485                      </div>
486                      <!--<div class="weather col-xs-1 col-xs-pull-1">
487                        </div>-->
488                      <div class="high col-xs-2 col-xs-pull-1">
489                        <p id="today_Max"><i class="fa-solid fa-arrow-up" style="color:#A93226;"></i></p>
490                      </div>
491                      <div class="low col-xs-2 col-xs-pull-1">
492                        <p id="today_Min"><i class="fa-solid fa-arrow-down" style="color:#1E8449;"></i></p>
493                      </div>
494                    </div>
495                    <div class="hourly row">
496                      <div id="chart_today" class="chart"></div>
497                    </div>
498                    <div class="day row">
499                      <div class="weekday col-xs-4 col-xs-pull-0">
500                        <span class="glyphicon glyphicon-plus"></span>
501                        <p id="date_plus1"></p>
502                      </div>
503                      <div class="weather col-xs-3 col-xs-pull-1">
504                        <p id="tomorrow_avg"><i class="fa-solid fa-earth-europe" style="color:#E67E22;"></i></p>
505                      </div>
506                      <!--<div class="weather col-xs-1 col-xs-pull-1">
507                        </div>-->
508                      <div class="high col-xs-2 col-xs-pull-1">
509                        <p id="tomorrow_Max"><i class="fa-solid fa-arrow-up" style="color:#A93226;"></i></p>
510                      </div>
511                      <div class="low col-xs-2 col-xs-pull-1">
512                        <p id="tomorrow_Min"><i class="fa-solid fa-arrow-down" style="color:#1E8449;"></i></p>
513                      </div>
514                    </div>
515                    <div class="hourly row">
516                      <div id="chart_plus1" class="chart"></div>
517                    </div>
518                    <div class="day row">
519                      <div class="weekday col-xs-4 col-xs-pull-0">
520                        <span class="glyphicon glyphicon-plus"></span>
521                        <p id="date_plus2"></p>
522                      </div>
523                      <div class="weather col-xs-3 col-xs-pull-1">
524                        <p id="tomorrow_p1_avg"><i class="fa-solid fa-earth-europe" style="color:#1E8449;"></i></p>
525                      </div>
526                      <!--<div class="weather col-xs-1 col-xs-pull-1">
527                        </div>-->
528                      <div class="high col-xs-2 col-xs-pull-1">
529                        <p id="tomorrow_p1_Max"><i class="fa-solid fa-arrow-up" style="color:#A93226;"></i></p>
530                      </div>
531                      <div class="low col-xs-2 col-xs-pull-1">
532                        <p id="tomorrow_p1_Min"><i class="fa-solid fa-arrow-down" style="color:#1E8449;"></i></p>
533                      </div>
534                    </div>
535                    <div class="hourly row">
536                      <div id="chart_plus2" class="chart"></div>
537                    </div>
538                    <div class="row">
539                      <p>Values are the average, max, and min Carbon Intensity in gCO<sub>2</sub>/kWh for each day</p>
540                    </div>
541                  </div>
542                </div>
543              </div>
544            </div>
545            <div class="col-lg-12" id="images-1" style="width: 65%; margin-left: 17.5%">
546              <div class="row">
547                <a href="https://nationalenergyso.com/" rel="noopener" target="_blank"><img src="img/NGESO_logo1.jpg" style="width:25%;height:25%;" alt="National Energy System Operator logo"></a>
548              </div>
549            </div>
550            <div class="col-lg-12" id="images-2" style="width: 65%; margin-left: 17.5%">
551              <div class="row">
552                <a href="https://www.edf.org/europe" rel="noopener" class="content-img" target="_blank"><img src="img/EDF_logo.jpg" alt="Energy Defense Fund Europe logo" style="width:33%;height:33%;"></a>
553                <a href="http://www.cs.ox.ac.uk/" rel="noopener" class="content-img" target="_blank"><img src="img/Oxford_logo.jpg" alt="University of Oxford, Department of Computer Science logo" style="width:33%;height:33%;"></a>
554                <a href="https://www.wwf.org.uk/" rel="noopener" class="content-img" target="_blank"><img src="img/WWF_logo.jpg" alt="WWF logo" style="width:17%;height:17%;"></a>
555              </div>
556            </div>
557            <div class="col-lg-12">
558              <a href="#about" class="btn btn-circle page-scroll" aria-label="About">
559              <i class="fa-solid fa-angle-double-down animated"></i>
560              </a>
561            </div>
562          </div>
563        </div>
564      </div>
565    </header>
566    
567    <!-- About Section -->
568    <section id="about" class="container content-section text-center">
569      <div class="row">
570        <div class="col-lg-8 col-lg-offset-2">
571          <h2>About the Carbon Intensity API</h2>
572          <p>NESO's Carbon Intensity API provides an indicative trend of regional carbon intensity of the electricity system in Great Britain (GB) 96+ hours ahead of real-time. It provides programmatic and timely access to both forecast and estimated carbon intensity data.</p>
573          <img src="img/Gas_icon.png" class="lazyload content-icon" alt="Gas flame icon"><img src="img/Fuel_cell_icon.png" class="lazyload content-icon" alt="Fuel cell icon"><img src="img/Turbine_icon.png" class="lazyload content-icon" alt="Wind turbine icon"><img src="img/Nuclear_icon.png" class="lazyload content-icon" alt="Nuclear reactor icon"><img src="img/Storage_icon.png" class="lazyload content-icon" alt="Storage icon"><img src="img/Hydro_icon.png" class="lazyload content-icon" alt="Hydro icon"><img src="img/Electric_vehicles_icon.png" class="lazyload content-icon" alt="Electric vehicle icon">
574          <p><br>The Carbon Intensity forecast includes CO<sub>2</sub> emissions related to electricity generation only. This includes emissions from all large metered power stations, interconnector imports, transmission and distribution losses, and accounts for national electricity demand, embedded wind and solar generation.</p>
575          <img src="img/Compliance_icon.png" class="lazyload content-icon" alt="Compliance icon"><img src="img/Environment_icon.png" class="lazyload content-icon" alt="Environment icon">
576          <p><br>The goal of this API service is to allow developers to produce applications that will enable consumers and/or smart devices to optimise their behaviour to minimise CO<sub>2</sub> emissions.</p>
577          <video controls id="myVideo" onclick="this.play()" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
578            <!-- <source src="https://brightcove.hs.llnwd.net/v1/uds/pd/2346984621001/201805/159/2346984621001_5784425895001_5784420212001.mp4?pubId=2346984621001&videoId=5784420212001" type="video/mp4"> -->
579            <source class="lazyload" src="https://f1.media.brightcove.com/4/2346984621001/2346984621001_5784426163001_5784420212001.mp4?pubId=2346984621001&videoId=5784420212001" type="video/mp4">
580            Your browser does not support HTML5 video.
581          </video>
582        </div>
583      </div>
584    </section>
585    <!-- Dashboard Section -->
586    <section id="graphs" class="content-section text-center">
587      <div class="graphs-section">
588        <div class="container">
589          <div class="col-lg-12 col-lg-offset-0">
590            <h2>National Data</h2>
591            <div class="row">
592              <div class="col-lg-8 col-lg-offset-2">
593                <p>The carbon intensity of electricity is a measure of how much CO<sub>2</sub> emissions are produced per kilowatt hour of electricity consumed. </p>
594                <p>The 'actual' value (orange line) is the estimated carbon intensity from metered generation. The 'forecast' value (blue line) is our forecast. The carbon intensity of electricity is sensitive to small changes in carbon-intensive generation. Carbon intensity varies by hour, day, and season due to changes in electricity demand, low carbon generation (wind, solar, hydro, nuclear, biomass) and conventional generation. </p>
595              </div>
596            </div>
597            <p><i class="fa-solid fa-line-chart"></i> Carbon Intensity Forecast (-24hrs to +48hrs)</p>
598            <div id="linechart_material" class="chart"><i class="fa-solid fa-spinner fa-spin" style="font-size:24px"></i></div>
599            <br><br/>
600            <!--<a href="data/data.csv" class="btn btn-default btn-lg"><i class="fa fa-file fa-fw"></i><span class="network-name"> Get CO<sub>2</sub> Data</span></a>-->
601            <a data-bs-toggle="collapse" href="#collapseData" aria-expanded="false" aria-controls="collapseData" aria-label="Expand">
602              <div role="tablist">
603                <div class="panel-heading" role="tab">
604                </div>
605                <h3 id="dataPanelTitle" class="panel-title"><strong>Download The Data</strong> (Expand)<i class="fa-solid fa-angle-down fa-fw"></i></h3>
606              </div>
607            </a>
608            <div class="collapse" id="collapseData">
609              <div class="card card-block">
610                <div class="row">
611                  <div class="col-lg-8 col-lg-offset-2">
612                    <p>Select a start date and end date in the boxes below in the format YYYY-MM-DD. Data is retrieved 
612in UTC time and is returned as a CSV file. Only 30 days of data can be downloaded at a time. Data cannot be downloaded between years. Data is only available after 2017-09-26.</p>
613                    <strong>Start:</strong> <input id="api-start-date" type="text" name="start" style="color:black;" aria-label="Start date">
614                    <p></p>
615                    <strong>End:</strong> <input id="api-end-date" type="text" name="end" style="color:black;" aria-label="End date">
616                    <p id="api-msg"></p>
617                    <br>
618                    <a class="btn btn-default btn-lg" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-label="Download GB Data" onclick="download_carbon_csv()"> Download GB Data <i class="fa-solid fa-download fa-fw"></i> </a>
619                    <a class="btn btn-default btn-lg" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-label="Download Regional Data" onclick="download_carbon_csv_regional()"> Download Regional Data <i class="fa-solid fa-download fa-fw"></i> </a>
620
621                  </div>
622                </div>
623              </div>
624            </div>
625            <br>
626            <br>
627            <p><i class="fa-solid fa-pie-chart"></i> Current GB Generation Mix</p>
628            <!-- <div id="piechart_GB"></div> -->
629			<div id="piechart_GB" style="font-size:145px"><i class="fa-solid fa-spinner fa-spin" style="font-size:24px"></i></div>
630            <p></p>
631            <div class="col-lg-12 col-lg-offset-0">
632              <hr>
633              <h3>Examples</h3>
634              <div class="row">
635                <div class="col-lg-8 col-lg-offset-2">
636                  <p>WWF have implemented the API into a re-usable widget that can help people plan their energy use, switching devices on when energy is green and off when it’s not.</p>
637                </div>
638              </div>
639              <iframe src="https://carbon-gizmo.wwf.org.uk/1.0.13--beta/" id="WWFGizmo" title="WWF Gizmo" class="carbon-gizmo lazyload" width="800" height="400" scrolling="no" style="border:0"></iframe>
640              <br><br/>
641              <br><br/>
642            </div>
643          </div>
644        </div>
645      </div>
646    </section>
647    <section id="regional" class="content-section text-center" style="">
648      <h2>Regional Data <sup><small></small></sup></h2>
649      <div class="row" style="width: 100%">
650      <div class="container content-section text-center" style="padding-top: 0px">
651        <div class="col-lg-8 col-lg-offset-2">
652          <p style="margin-left: 25px">NESO forecasts the carbon intensity and generation mix of electricity consumed across 14 geographical regions in Great Britain. The spatial and temporal characteristics of carbon intensity can be observed in the map below. </p>
653          <p style="margin-left: 25px">The boundaries are defined according to Distribution Network Operator (DNO) boundaries. Click on a region in the map below to see the current carbon intensity and generation mix for that region. Switch to the Country tab to see the same data for England, Scotland and Wales. Click the play button to see the forecast over the next 24 hours. </p>
654        </div>
655        </div>
656      </div>
657      <div class="row" style="width: 100%">
658        <label class="btn btn-default" id="powercbx">
659        <input type="checkbox" name="options" id="powerarrow" aria-label="Power Flow Arrows" > Power Flow Arrows <span class="label label-success">new</span>
660        </label>       
661        <label class="btn btn-default" id="dnoregionlbl">
662        <input type="radio" name="options" id="dnoregion" aria-label="DNO region" checked> Region
663        </label>
664        <label class="btn btn-default" id="countrylbl">
665        <input type="radio" name="options" id="country" aria-label="Country"> Country
666        </label>
667        <!-- <input type="checkbox"> -->
668        <span class="text-secondary">
669        <a class="btn btn-default btn-sm text-secondary"><i class="fa-solid fa-play fa-fw" id="slidericon" onclick="kickoffTimer()"></i></a>
670        <span class="text-light" id="myDateTime"></span>
671        <input type="range" min="1" max="48" value="1" class="slider" id="myRange" aria-label="Slider" style="margin-left: 15px">
672        </span>
673      </div>
674      <div id="map" style="margin-top:0px;"></div>
675      <div id="info-box">Click on interconnectors to see their names</div>
676      <b class="text-light">Key: </b>
677      <span class="text-danger">
678      <b style="color:#A93226;"> Very High</b>
679      </span>
680      <span>-</span>
681      <span class="text-warning">
682      <b style="color:#E67E22;"> High</b>
683      </span>
684      <span>-</span>
685      <span class="text-success">
686      <b style="color:#F1C40F;"> Moderate</b>
687      </span>
688      <span>-</span>
689      <span class="text-success">
690      <b style="color:#7DCEA0;"> Low</b>
691      </span>
692      <span>-</span>
693      <span class="text-info">
694      <b style="color:#1E8449;"> Very Low</b>
695      </span>
696      <br />
697      <div class="container">
698      <p></p>
699      <h3>Postcode Search <sup><small><span class="label label-success">new</span</small></sup></h3>
700      <p>Enter your postcode into the box below to find out the carbon intensity of your region.</p>
701      
702      <div class="row">
703        <div class="col-sm-4 col-sm-offset-4 findRigion">
704          <button type="button" title="Button that gets users location" class="btn btn-default btn-sm" data-bs-toggle="modal fade show" data-bs-target="#myModal" onclick="getLocation()" role="button"><i class="fa-solid fa-location-arrow"></i></button>
705          <input class="text-center form-control form-control-sm" id="outwardpc" type="text" placeholder="Postcode" style="color:black;" aria-label="Postcode">
706          <button type="button" class="btn btn-default btn-sm" data-bs-toggle="modal fade show" data-bs-target="#myModal" onclick="addPostCode()" role="button">Find My Region</button>
707        </div>
708      </div>
709        <br /><br /><br />
710        <div class="row">
711          <div class="col-lg-8 col-lg-offset-2" id="table-id">
712            <table class="table table-hover table-bordered">
713              <!--Table head-->
714              <thead>
715                <tr>
716                  <th style="text-align:center;">#</th>
717                  <th style="text-align:center;">Region</th>
718                  <th style="text-align:center;">Forecast Carbon Intensity (gCO<sub>2</sub>/kWh)</th>
719                  <th style="text-align:center;">Index</th>
720                </tr>
721              </thead>
722              <!--Table head-->
723              <!--Table body-->
724              <tbody id="regionaltable" style="background-color: #fff);"></tbody>
725              <!--Table body-->
726            </table>
727          </div>
728          <div class="modal fade" id="myModal" style="opacity: 1.0;" role="dialog"></div>
729          <br />
730          <table class="columns">
731            <tr>
732              <td>
733                <div id="columnchart_1"></div>
734              </td>
735              
736              <td><div id="columnchart_2", align="center"></div></td>
737            </tr>
738          </table class="columns"></table>
739        </div>
740      </div>
741      <!--br /-->
742
743      <!--br /><br /><br /-->
744    </section>
745    <!-- Methodology Section -->
746    <section id="methodology" class="content-section text-center">
747      <div class="methodology-section">
748        <!--methodology-section-->
749        <div class="container">
750          <div class="col-lg-8 col-lg-offset-2">
751            <h2>Methodology</h2>
752            <h4>Machine Learning</h4>
753            <p   >The demand and generation by fuel type (gas, coal, wind, nuclear, solar etc.) for each region is forecast several days ahead at 30-min temporal resolution using an ensemble of state-of-the-art supervised Machine Learning (ML) regression models. An advanced model ensembling technique is used to blend the ML models to generate a new optimised meta-model. The forecasts are updated every 30 mins using a nowcasting technique to adjust the forecasts a short period ahead.</p>
754            <img src="img/Data_icon.png" class="lazyload content-icon" alt="Data icon">
755            <br>
756            <br>
757            <br>
758            <h4>AC Power Flow</h4>
759            <p   >
759To estimate the carbon intensity of electricity consumed in each region, a reduced GB network model is used to calculate the power flows across the network. This considers the active and reactive power flows, system losses, and the impedance characteristics of the network. The carbon intensity of both active power flows (gCO<sub>2</sub>/kWh) and reactive power flows (gCO<sub>2</sub>/kVArh) is then calculated and the CO<sub>2</sub> flows are attributed around the network for each 30 min period over the next several days. The carbon intensity of the power consumed in each region is then determined. The same approach is used to estimate the proportion of each fuel type consumed in each region. </p>
760            <img src="img/T_Pylon_icon.png" class="lazyload content-icon" alt="T-pylon icon"><img src="img/Electricity_icon.png" class="lazyload content-icon" alt="Electricity icon"><img src="img/Pylon_icon.png" class="lazyload content-icon" alt="Pylon icon">
761            <p><br>A more detailed description of our methodology can be found below.</p>
762            <ul class="list-inline banner-social-buttons">
763              <li>
764                <a href="https://api.neso.energy/dataset/f406810a-1a36-48d2-b542-1dfb1348096e/resource/36638178-e993-4d34-afdc-4ada83993585/download/neso-ci-national-methodology_v2.pdf"  rel="noopener" target="_blank" class="btn btn-default btn-lg" aria-label="Download methodology"><i class="fa-regular fa-file-pdf fa-fw"></i> National</a>
765                <a href="https://api.neso.energy/dataset/bf3d723b-b4ae-4ec7-9fc9-e584c651a9da/resource/1d817f4c-a126-45c8-baf0-218bf57d37be/download/neso-ci-regional-methodology_v2.pdf"  rel="noopener" target="_blank" class="btn btn-default btn-lg" aria-label="Download methodology"><i class="fa-regular fa-file-pdf fa-fw"></i> Regional</a>
766              </li>
767            </ul>
768          </div>
769        </div>
770      </div>
771    </section>
772    <!-- API Section -->
773    <section id="docs" class="content-section text-center">
774      <div class="download-section">
775        <!--api-section-->
776        <div class="container">
777          <div class="col-lg-8 col-lg-offset-2">
778            <h2>Documentation</h2>
779            <p   >Our API Documentation contains instructions for developers to quickly integrate with our OpenAPI which is available at <a href="https://api.carbonintensity.org.uk/" aria-label="API">api.carbonintensity.org.uk</a>. The API Documentation contains details about the different endpoints, return types, parameters and model schemas, as well as example code samples and responses. </p>
780            <ul class="list-inline banner-social-buttons">
781              <li>
782                <a href="http://docs.carbonintensity.org.uk" rel="noopener" target="_blank" class="btn btn-default btn-lg" aria-label="Documentation"><i class="fa-regular fa-eye fa-fw"></i> Documentation</a>
783              </li>
784            </ul>
785          </div>
786        </div>
787      </div>
788    </section>
789    <section id="terms" class="content-section text-center">
790      <div class="download-section">
791        <!--api-section-->
792        <div class="container">
793          <div class="col-lg-8 col-lg-offset-2">
794            <h2>Terms of Use</h2>
795            <p   >Our API is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/" aria-label="Creative Commons">CC BY 4.0</a> license. The Terms of Use are available below. </p>
796            <ul class="list-inline banner-social-buttons">
797              <li>
798                <a href="http://terms.carbonintensity.org.uk" rel="noopener" target="_blank" class="btn btn-default btn-lg" aria-label="Terms"><i class="fa-regular fa-eye fa-fw"></i> Terms</a>
799              </li>
800            </ul>
801          </div>
802        </div>
803      </div>
804    </section>
805    <!-- Contact Section -->
806    <section id="contact" class="container content-section text-center">
807      <div class="row">
808        <div class="col-lg-8 col-lg-offset-2">
809          <h2>Contact Us</h2>
810          <p   >For media enquiries related to the carbon intensity of Britain's electricity system, please contact National Energy System Operator's <a href="https://www.nationalenergyso.com/news-and-events/media-centre">press office.</a></p>
811
812
813          <ul class="list-inline banner-social-buttons">
814            <li>
815              <a href="https://x.com/neso_energy" class="btn btn-default btn-lg" rel="noopener" target="_blank" aria-label="Twitter"><i class="fa-brands fa-x-twitter fa-fw"></i> <span class="network-name">X</span></a>
816            </li>
817            <li>
818              <a href="https://www.linkedin.com/company/neso-energy/" class="btn btn-default btn-lg" rel="noopener" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin fa-fw"></i> <span class="network-name">LinkedIn</span></a>
819            </li>
820            <!-- <li>
821              <a href="https://www.facebook.com/NationalGridUK/" class="btn btn-default btn-lg" rel="noopener" target="_blank" aria-label="Facebook"><i class="fa-brands fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
822            </li> -->
823			<li>
824              <a href="https://www.youtube.com/@nesoenergy" class="btn btn-default btn-lg" rel="noopener" target="_blank" aria-label="Facebook"><i class="fa-brands fa-youtube fa-fw"></i> <span class="network-name">YouTube</span></a>
825            </li>
826            <li>
827              <a href="https://github.com/carbon-intensity" class="btn btn-default btn-lg" rel="noopener" target="_blank" aria-label="Github"><i class="fa-brands fa-github fa-fw"></i> <span class="network-name">Github</span></a>
828            </li>
829          </ul>
830        </div>
831      </div>
832    </section>
833
834    <!-- Footer -->
835    <footer>
836    <div class="container text-center">
837      <div class="col-lg-12" id="footer-images-1" style="width: 65%; margin-left: 17.5%">
838          <div class="row">
839            <a href="https://www.nationalenergyso.com/" class="lazyload content-img" rel="noopener" target="_blank"><img src="img/NGESO_logo1.jpg" style="width:28%;height:28%;" alt="National Energy System Operator logo"></a>
840          </div>
841      </div>
842      <div class="col-lg-12" id="footer-images-2" style="width: 65%; margin-left: 17.5%">
843          <div class="row">
844            <a href="https://www.edf.org/europe" rel="noopener" class="content-img" target="_blank"><img src="img/EDF_logo.jpg" alt="Energy Defense Fund Europe logo" style="width:33%;height:33%;"></a>
845            <a href="http://www.cs.ox.ac.uk/" rel="noopener" class="content-img" target="_blank"><img src="img/Oxford_logo.jpg" alt="University of Oxford, Department of Computer Science logo" style="width:33%;height:33%;"></a>
846            <a href="https://www.wwf.org.uk/" rel="noopener" class="content-img" target="_blank"><img src="img/WWF_logo.jpg" alt="WWF logo" style="width:16%;height:16%;"></a>
847          </div>
848      </div>
849    </div>
850
851    </footer>
852    <!-- jQuery -->
853    
853<script src="https://unpkg.com/[email protected]/lazysizes.js"></script>
853
854    
854<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
854
855    
855<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
855
856    
856<script src="Scripts/grayscale_white.min.js"></script>
856
857    <!-- 
857<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
857 -->
858    <!-- 
858<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
858 -->
859    <!-- 
859<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
859 -->
860    
860<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
860
861    
861<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
861
862    
863
864<!-- 
864<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
864 -->
865    
865<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
865
866    
866<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
866
867    
867<script src="Scripts/national.js"></script>
867
868    
868<script src="Scripts/regional2.js"></script>
868
869    
869<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvRnJ156ptSimjQgHr0Y8S-KTF0ltLe90&callback=initMap" async defer></script>
869
870  
871<!-- cookie warning toast -->
872<div class="navbar-fixed-bottom" style="display: none" id="toast-container">
873    <div class="toast" role="alert" data-bs-autohide="false" id="toast">
874        <div class="toast-body navbar">
875            <h3 id="cookie-warning" style="text-align: center">Cookie Warning</h3>
876            <p id="cookie-paragraph"style="text-align: center" "margin: 5px">
877            This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies. 
878            </p>
879            <div class="ml-auto" style="text-align: center" "margin: auto">
880                <button type="button" class="btn" id="btnDeny">
881                    Learn more
882                </button>
883                <button type="button" class="btn" id="btnAccept">
884                    Ok
885                </button>
886            </div>
887        </div>
888    </div>
889</div>
890
891
892<script>
893function setCookie(name,value,days) {
894    var expires = "";
895    if (days) {
896        var date = new Date();
897        date.setTime(date.getTime() + (days*24*60*60*1000));
898        expires = "; expires=" + date.toUTCString();
899    }
900    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
901}
902function getCookie(name) {
903    var nameEQ = name + "=";
904    var ca = document.cookie.split(';');
905    
906    for(var i=0;i < ca.length;i++) {
907        var c = ca[i];
908        while (c.charAt(0)==' ') c = c.substring(1,c.length);
909        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
910    }
911    return null;
912}
913
914//function eraseCookie(name) {   
915//    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
916//}
917
918function cookieConsent() {
919    var x = document.getElementById("toast-container");
920    if (!getCookie('allowCookies')) {
921        x.style.display = "block"
922    }
923}
924
925$('#btnDeny').click(()=>{
926    var x = document.getElementById("toast-container");
927    window.open('https://www.neso.energy/cookie-policy', '_blank');
928    x.style.display = "none"
929})
930
931$('#btnAccept').click(()=>{
932    var x = document.getElementById("toast-container");
933    setCookie('allowCookies','1',7)
934    x.style.display = "none";
935})
936
937// load
938cookieConsent()
939
940
941
942
943 
944</script>
944
945</body>
946
947
948</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.