| 1 | <!doctype html> |
| 2 | <html lang="en" xmlns="http://www.w3.org/1999/html"> |
| 3 | <head> |
| 4 | <meta charset="utf-8" /> |
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6 | <title>Sankey Mermaid Quick Test Page</title> |
| 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> |
| 8 | </head> |
| 9 | |
| 10 | <body> |
| 11 | <h1>Sankey diagram demos</h1> |
| 12 | <h2>FY20-21 Performance</h2> |
| 13 | <pre class="mermaid"> |
| 14 | --- |
| 15 | config: |
| 16 | sankey: |
| 17 | showValues: true |
| 18 | prefix: $ |
| 19 | suffix: B |
| 20 | width: 800 |
| 21 | nodeAlignment: left |
| 22 | --- |
| 23 | sankey |
| 24 | a,b,8 |
| 25 | b,c,8 |
| 26 | c,d,8 |
| 27 | d,e,8 |
| 28 | |
| 29 | x,c,4 |
| 30 | c,y,4 |
| 31 | </pre> |
| 32 | |
| 33 | <h2>Energy flow</h2> |
| 34 | <pre class="mermaid"> |
| 35 | --- |
| 36 | config: |
| 37 | sankey: |
| 38 | useMaxWidth: true |
| 39 | showValues: false |
| 40 | width: 1200 |
| 41 | height: 600 |
| 42 | linkColor: gradient |
| 43 | nodeAlignment: justify |
| 44 | --- |
| 45 | sankey |
| 46 | |
| 47 | Agricultural 'waste',Bio-conversion,124.729 |
| 48 | Bio-conversion,Liquid,0.597 |
| 49 | Bio-conversion,Losses,26.862 |
| 50 | Bio-conversion,Solid,280.322 |
| 51 | Bio-conversion,Gas,81.144 |
| 52 | Biofuel imports,Liquid,35 |
| 53 | Biomass imports,Solid,35 |
| 54 | Coal imports,Coal,11.606 |
| 55 | Coal reserves,Coal,63.965 |
| 56 | Coal,Solid,75.571 |
| 57 | District heating,Industry,10.639 |
| 58 | District heating,Heating and cooling - commercial,22.505 |
| 59 | District heating,Heating and cooling - homes,46.184 |
| 60 | Electricity grid,Over generation / exports,104.453 |
| 61 | Electricity grid,Heating and cooling - homes,113.726 |
| 62 | Electricity grid,H2 conversion,27.14 |
| 63 | Electricity grid,Industry,342.165 |
| 64 | Electricity grid,Road transport,37.797 |
| 65 | Electricity grid,Agriculture,4.412 |
| 66 | Electricity grid,Heating and cooling - commercial,40.858 |
| 67 | Electricity grid,Losses,56.691 |
| 68 | Electricity grid,Rail transport,7.863 |
| 69 | Electricity grid,Lighting & appliances - commercial,90.008 |
| 70 | Electricity grid,Lighting & appliances - homes,93.494 |
| 71 | Gas imports,Ngas,40.719 |
| 72 | Gas reserves,Ngas,82.233 |
| 73 | Gas,Heating and cooling - commercial,0.129 |
| 74 | Gas,Losses,1.401 |
| 75 | Gas,Thermal generation,151.891 |
| 76 | Gas,Agriculture,2.096 |
| 77 | Gas,Industry,48.58 |
| 78 | Geothermal,Electricity grid,7.013 |
| 79 | H2 conversion,H2,20.897 |
| 80 | H2 conversion,Losses,6.242 |
| 81 | H2,Road transport,20.897 |
| 82 | Hydro,Electricity grid,6.995 |
| 83 | Liquid,Industry,121.066 |
| 84 | Liquid,International shipping,128.69 |
| 85 | Liquid,Road transport,135.835 |
| 86 | Liquid,Domestic aviation,14.458 |
| 87 | Liquid,International aviation,206.267 |
| 88 | Liquid,Agriculture,3.64 |
| 89 | Liquid,National navigation,33.218 |
| 90 | Liquid,Rail transport,4.413 |
| 91 | Marine algae,Bio-conversion,4.375 |
| 92 | Ngas,Gas,122.952 |
| 93 | Nuclear,Thermal generation,839.978 |
| 94 | Oil imports,Oil,504.287 |
| 95 | Oil reserves,Oil,107.703 |
| 96 | Oil,Liquid,611.99 |
| 97 | Other waste,Solid,56.587 |
| 98 | Other waste,Bio-conversion,77.81 |
| 99 | Pumped heat,Heating and cooling - homes,193.026 |
| 100 | Pumped heat,Heating and cooling - commercial,70.672 |
| 101 | Solar PV,Electricity grid,59.901 |
| 102 | Solar Thermal,Heating and cooling - homes,19.263 |
| 103 | Solar,Solar Thermal,19.263 |
| 104 | Solar,Solar PV,59.901 |
| 105 | Solid,Agriculture,0.882 |
| 106 | Solid,Thermal generation,400.12 |
| 107 | Solid,Industry,46.477 |
| 108 | Thermal generation,Electricity grid,525.531 |
| 109 | Thermal generation,Losses,787.129 |
| 110 | Thermal generation,District heating,79.329 |
| 111 | Tidal,Electricity grid,9.452 |
| 112 | UK land based bioenergy,Bio-conversion,182.01 |
| 113 | Wave,Electricity grid,19.013 |
| 114 | Wind,Electricity grid,289.366 |
| 115 | </pre> |
| 116 | |
| 117 | <script type="module"> |
| 118 | import mermaid from './mermaid.esm.mjs'; |
| 119 | mermaid.initialize({ |
| 120 | theme: 'default', |
| 121 | logLevel: 3, |
| 122 | securityLevel: 'loose', |
| 123 | startOnLoad: true, |
| 124 | }); |
| 125 | </script> |
| 126 | </body> |
| 127 | </html> |
| 128 | |