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.