Donut Chart with Font Awesome Icon

25:["$","title",null,{"children":"UK Generation Mix Live | Vekta Group | Observable"}] 49:T3b3a,// Create the donut chart //////////////////////// GENERAL + MAIN DONUT chart = { const height = Math.min(width, 700); const radius = Math.min(width, height) / 2.0; const arc = d3.arc() .innerRadius(radius * 0.67) .outerRadius(radius - 1); const pie = d3.pie() .padAngle(1 / radius) .sort(null) .value(d => d.value); const color = d3.scaleOrdinal() .domain(chartData.map(d => d.name)) .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), chartData.length).reverse()); const svg = d3.create("svg") .attr("width", 1000) .attr("height", 700) .attr("viewBox", [-500, -350, 1230, 930]) .attr("style", "max-width: 100%; height: auto;"); //////////////////////// BACKGROUND svg.append("rect") .attr("width", width + 430) .attr("height", height + 230) .attr("x", -width / 2) .attr("y", -height / 2) .attr("fill", "#fffcfa") // Change this to your desired background color .attr("rx", 20) // Set the x-axis radius for rounded corners .attr("ry", 20); // Set the y-axis radius for rounded corners //////////////////////// DATETIME // Append the date and time at the top left of the SVG svg.append("text") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 60) .attr("font-weight", "bold") .attr("x", -width / 2 + 50) // Adjust the x position to place it at the left .attr("y", -height / 2 + 100) // Adjust the y position to place it at the top .text(formattedDateTime.date); svg.append("text") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 45) .attr("x", -width / 2 + 50) // Adjust the x position to place it at the left .attr("y", -height / 2 + 150) // Adjust the y position to place it below the date .text(formattedDateTime.time); //////////////////////// ATTRIBUTION svg.append("text") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 18) // .attr("font-weight", "bold") .attr("x", width - 700) // Adjust the x position to place it at the left .attr("y", -height / 2 + 850) // Adjust the y position to place it at the top .attr("fill", "#414a4c") .text("Supported by National Energy SO Open Data"); // Additional text // svg.append("text") // .attr("text-anchor", "start") //.attr("font-family", "sans-serif") // .attr("font-size", 16) // .attr("x", width - 900) // .attr("y", -height / 2 + 875) // Slightly below the first text // .attr("fill", "#414a4c") //.text("* grams of CO2 released for each kilowatt hour (kWh)"); const g = svg.append("g") .attr("transform", `translate(-130, ${height / 4})`); // Move the donut plot under the text const arcs = pie(chartData); const path = g.append("g") .selectAll() .data(arcs) .join("path") .attr("fill", d => color(d.data.name)) .attr("d", arc) .on("mouseover", function(event, d) { const colorValue = color(d.data.name); d3.selectAll(`path[fill='${colorValue}']`).classed("highlight", true); }) .on("mouseout", function(event, d) { const colorValue = color(d.data.name); d3.selectAll(`path[fill='${colorValue}']`).classed("highlight", false); }) .on("click", function(event, d) { updateBarChart(d.data.name, d.data.value); }); const label = g.append("g") .attr("font-family", "sans-serif") .attr("font-size", 20) .attr("text-anchor", "middle") .selectAll() .data(arcs) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .call(text => text.append("tspan") .attr("y", "-0.4em") // .attr("font-weight", "bold") .text(d => d.data.name)) .on("mouseover", function(event, d) { const colorValue = color(d.data.name); d3.selectAll(`path[fill='${colorValue}']`).classed("highlight", true); }) .on("mouseout", function(event, d) { const colorValue = color(d.data.name); d3.selectAll(`path[fill='${colorValue}']`).classed("highlight", false); }) .on("click", function(event, d) { updateBarChart(d.data.name, d.data.value); }); // Use d3-force to avoid label overlap const simulation = d3.forceSimulation(arcs) .force("x", d3.forceX(d => arc.centroid(d)[0]).strength(1)) .force("y", d3.forceY(d => arc.centroid(d)[1]).strength(1)) .force("collide", d3.forceCollide(24)) .stop(); for (let i = 0; i < 120; ++i) simulation.tick(); label.attr("transform", d => `translate(${d.x},${d.y})`); // Find the biggest segment const biggestSegment = chartData.reduce((max, d) => d.value > max.value ? d : max, chartData[0]); // Append the biggest segment's name in the middle of the donut chart // svg.append("text") // .attr("text-anchor", "middle") // .attr("font-family", "sans-serif") // .attr("font-size", "50px") // .attr("x", -130) // Center the text // .attr("y", 190) // Center the text // .text(biggestSegment.name); //////////////////////// ICON // Find the icon for the biggest segment const biggestSegmentIcon = icons.find(icon => icon.name === biggestSegment.name).icon; svg.append("g") .attr("transform", `translate(-270, ${height / 8}) scale(0.20)`) // Center the icon and scale it down .html(biggestSegmentIcon) .select("svg") .attr("fill", "lightgrey"); // Change the fill color to light grey //////////////////////// BAR CHART const gap = 20; // Gap between the first and next three bars const halfGap = gap / 4; const largeGap = 40; // Larger gap between "4 Weeks" and the subsequent bars const barHeight = 20; // Initialize the bar chart with the biggest segment's data showBarChart(biggestSegment.name, biggestSegment.value); // Function to show the bar chart function showBarChart(name, currentValue) { const dailyData = innerChartData.find(d => d.name === name); const weeklyData = innerChartDataWeek.find(d => d.name === name); const fourWeeksData = innerChartData4Weeks.find(d => d.name === name); const year2009 = year2009to2014.find(d => d.name === name); const year2014 = year2014to2019.find(d => d.name === name); const year2019 = year2019to2024.find(d => d.name === name); const year2024to = year2024.find(d => d.name === name); const barChartData = [ { name: "Current", value: currentValue }, { name: "Day", value: dailyData ? dailyData.value.average : 0 }, { name: "Week", value: weeklyData ? weeklyData.value.average : 0 }, { name: "4 Weeks", value: fourWeeksData ? fourWeeksData.value.average : 0 }, { name: "2024", value: year2024to ? year2024to.value.average : 0 }, { name: "2019 to 2024", value: year2019 ? year2019.value.average : 0 }, { name: "2014 to 2019", value: year2014 ? year2014.value.average : 0 }, { name: "2009 to 2014", value: year2009 ? year2009.value.average : 0 } ]; const barChartWidth = 180; const barChartHeight = 100; const x = d3.scaleLinear() .domain([0, d3.max(barChartData, d => d.value)]) .range([0, barChartWidth]); const barChart = svg.append("g") .attr("class", "bar-chart") .attr("transform", `translate(${width / 2 - barChartWidth + 60}, ${-height / 2 + 400})`); // Move the bar chart to the top right barChart.selectAll("rect") .data(barChartData) .enter().append("rect") .attr("x", 0) .attr("y", (d, i) => { if (i === 0) return i * barHeight; if (i >= 4) return i * barHeight + largeGap + (i - 1) * halfGap; return i * barHeight + gap + (i - 1) * halfGap; }) // Add gap after the first bar and half gap for others, large gap after "4 Weeks" .attr("width", d => x(d.value)) // Set the initial width .attr("height", barHeight - 1) .attr("fill", color(name)) .attr("rx", 10) // Set the x-axis radius for rounded corners .attr("ry", 10); // Set the y-axis radius for rounded corners barChart.selectAll("text.value") .data(barChartData) .enter().append("text") .attr("class", "value") .attr("font-family", "sans-serif") .attr("x", d => x(d.value) + 5) // Position the text at the end of the bar .attr("y", (d, i) => { if (i === 0) return i * barHeight + barHeight / 2; if (i >= 4) return i * barHeight + barHeight / 2 + largeGap + (i - 1) * halfGap; return i * barHeight + barHeight / 2 + gap + (i - 1) * halfGap; }) // Add gap after the first bar and half gap for others, large gap after "4 Weeks" .attr("dy", ".35em") .attr("fill", "#414a4c") // Ensure the text is visible .text(d => `${d.value.toFixed(1)}%`); barChart.selectAll("text.label") .data(barChartData) .enter().append("text") .attr("class", "label") .attr("font-family", "sans-serif") .attr("x", -10) // Position the text to the left of the bar .attr("y", (d, i) => { if (i === 0) return i * barHeight + barHeight / 2; if (i >= 4) return i * barHeight + barHeight / 2 + largeGap + (i - 1) * halfGap; return i * barHeight + barHeight / 2 + gap + (i - 1) * halfGap; }) // Add gap after the first bar and half gap for others, large gap after "4 Weeks" .attr("dy", ".35em") .attr("text-anchor", "end") // Align the text to the end .attr("fill", "#414a4c") // Ensure the text is visible .text(d => d.name); } // Function to update the bar chart function updateBarChart(name, currentValue) { const dailyData = innerChartData.find(d => d.name === name); const weeklyData = innerChartDataWeek.find(d => d.name === name); const fourWeeksData = innerChartData4Weeks.find(d => d.name === name); const year2009 = year2009to2014.find(d => d.name === name); const year2014 = year2014to2019.find(d => d.name === name); const year2019 = year2019to2024.find(d => d.name === name); const year2024to = year2024.find(d => d.name === name); const barChartData = [ { name: "Current", value: currentValue }, { name: "Day", value: dailyData ? dailyData.value.average : 0 }, { name: "Week", value: weeklyData ? weeklyData.value.average : 0 }, { name: "4 Weeks", value: fourWeeksData ? fourWeeksData.value.average : 0 }, { name: "2024", value: year2024to ? year2024to.value.average : 0 }, { name: "2019 to 2024", value: year2019 ? year2019.value.average : 0 }, { name: "2014 to 2019", value: year2014 ? year2014.value.average : 0 }, { name: "2009 to 2014", value: year2009 ? year2009.value.average : 0 } ]; const x = d3.scaleLinear() .domain([0, d3.max(barChartData, d => d.value)]) .range([0, 300]); const barChart = svg.select(".bar-chart"); barChart.selectAll("rect") .data(barChartData) .transition() .duration(1000) .attr("width", d => x(d.value)) .attr("fill", color(name)); // Update the color of the bars barChart.selectAll("text.value") .data(barChartData) .transition() .duration(1000) .attr("x", d => x(d.value) + 5) .text(d => `${d.value.toFixed(1)}%`); barChart.selectAll("text.label") .data(barChartData) .transition() .duration(1000) .attr("y", (d, i) => { if (i === 0) return i * barHeight + barHeight / 2; if (i >= 4) return i * barHeight + barHeight / 2 + largeGap + (i - 1) * halfGap; return i * barHeight + barHeight / 2 + gap + (i - 1) * halfGap; }) // Add gap after the first bar and half gap for others, large gap after "4 Weeks" .text(d => d.name); } ////////// CIRCLES ////////////// const circleGroup = svg.append("g") .attr("transform", `translate(${width / 2 - 260}, ${-height / 2 + 200})`); circleGroup.selectAll("circle") .data(circleData) .enter().append("circle") .attr("cx", (d, i) => i * 190) // Adjust spacing between circles .attr("cy", 0) .attr("r", radius / 5) // Make circles smaller .attr("fill", (d, i) => i === 0 ? "lightgray" : "none") .attr("stroke", "none") // No circle border color .on("mouseover", function(event, d) { const color = getColor(d.value); d3.select(this).attr("fill", color); updateCircleText(d, getTooltipText(d.value)); }) .on("mouseout", function(event, d) { d3.select(this).attr("fill", (d, i) => i === 0 ? "lightgray" : "none"); updateCircleText(d, d.value); }); circleGroup.selectAll("text.value") .data(circleData) .enter().append("text") .attr("x", (d, i) => i * 162) .attr("y", 0) .attr("dy", ".35em") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 26) .attr("fill", "#414a4c") .attr("class", "circle-text") .text((d, i) => i === 0 ? `${d.value}` : `${d.value}%`); // Add names above the circles circleGroup.selectAll("text.name") .data(circleData) .enter().append("text") .attr("x", (d, i) => i * 162) .attr("y", -radius / 5 - 30) // Position above the circles .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 16) .attr("fill", "#414a4c") .selectAll("tspan") .data(d => d.name.split(" ")) .enter().append("tspan") .attr("x", (d, i, nodes) => d3.select(nodes[i].parentNode).attr("x")) .attr("dy", (d, i) => i === 0 ? 0 : "1.2em") .text(d => d); // Function to get color based on value function getColor(value) { if (value <= 30) return "#FCD4CA"; if (value <= 100) return "#FAC3C8"; if (value <= 180) return "#F8B1C7"; if (value <= 250) return "#F6A0C5"; return "#F48EC3"; } // Function to update the text inside the circle function updateCircleText(d, text) { circleGroup.selectAll(".circle-text") .filter(data => data === d) .text(text); } // Function to get tooltip text based on value function getTooltipText(value) { if (value <= 30) return "😀"; if (value <= 100) return "🙂"; if (value <= 180) return "😢"; if (value <= 250) return "😠"; return "😡"; } //////////////////////// SMALL DONUTS const arcGenerator = d3.arc() .innerRadius((radius / 5) * 0.6) .outerRadius(radius / 5); const pieGenerator = d3.pie() .value(d => d.value) .sort(null); const donutData = circleData.slice(1).map(d => ({ name: d.name, value: d.value, data: [{ value: d.value }, { value: 100 - d.value }] })); const donutGroups = circleGroup.selectAll(".donut") .data(donutData) .enter().append("g") .attr("class", "donut") .attr("transform", (d, i) => `translate(${(i + 1) * 160}, 0)`); donutGroups.selectAll("path") .data(d => pieGenerator(d.data)) .enter().append("path") .attr("d", arcGenerator) .attr("fill", (d, i) => i === 0 ? "#414a4c" : "#e0e0e0"); // Black for the percentage, light gray for the rest // Assuming you have the width of the SVG defined as a variable `width` svg.append("g") .attr("transform", `translate(${width - 500}, 470) scale(1)`) // Position 50 units from the right edge .html(logo); return svg.node(); }4a:T1c6d,icons = [ { name: "Gas", icon: `` }, { name: "Nuclear", icon: `` }, { name: "Wind", icon: `` }, { name: "Hydro", icon: `` }, { name: "Imports", icon: `` }, { name: "Biomass", icon: `` }, { name: "Solar", icon: `` }, { name: "Bess", icon: `` }, { name: "...", icon: `` }, ];4b:[{"id":"3f88ed00fd18d8b73c4135846a862322390e251b8ccb538223049e0373dd267050fb90e7747aa343cf1a0f04920ac176d40afaba84d58b64b897e9438e04b01b","href":"https://static.observableusercontent.com/files/3f88ed00fd18d8b73c4135846a862322390e251b8ccb538223049e0373dd267050fb90e7747aa343cf1a0f04920ac176d40afaba84d58b64b897e9438e04b01b","name":"logo.svg","type":"image/svg+xml","lastModified":1736267812719.05,"size":29282}] 29:{"id":"d2c62a7ad7af279e","slug":null,"title":"UK Generation Mix Live","thumbnail":"84545a735540d988aaa9c2dde413b1d73123cab296083275fd3ef8422feeeba0","access_level":"public","create_time":"$D2025-01-07T16:36:52.719Z","update_time":"$D2025-08-19T12:17:43.593Z","view_time":null,"first_public_time":"$D2025-01-07T16:36:52.719Z","has_unpublished_edits":null,"fork":{"id":"6a5562655794763b","slug":null,"title":"UK Generation Mix Live v2","owner":{"id":"5154b4f59e97f626","login":"mark-cherrie","name":"Mark Cherrie"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3594fe6877d14711","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1103,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"353739170940576d","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"353739170940576d","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":null,"role":"editor"},{"type":"team","id":"3594fe6877d14711","login":"vekta-group","name":"Vekta Group","avatar_url":"https://avatars-next.observableusercontent.com/13f6934c06a2c847905f92615bfe639e05a96b39badbe0036f3139b0c24ef101","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a5603c9dcf7492ca","slug":"vekta-digital-insights","title":"Vekta Digital Insights ","owner":{"id":"3594fe6877d14711","login":"vekta-group","name":"Vekta Group"}},"type":"notebook","body":{"titling":"auto","title":"UK Generation Mix Live","cells":[{"id":962,"value":"# UK Generation Mix Live","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"Using an open API from the National Energy System Operator (NESO), we have analysed the UK's energy generation mix. This data includes storage, solar, biomass, gas, hydro, imports, wind and nuclear energy generation. \n

\nThe pie chart below accesses real-time data about the UK's energy generation mix, with the smaller pie charts depicting the 'greenness' of the usage. Click on each segment to view insights into the historical usage of each energy type. This can be used to compare short and long-term generation trends to help understand changes over time and their potential environmental impact.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"data = fetch(\"https://api.neso.energy/api/3/action/datastore_search?resource_id=f93d1835-75bc-43e5-84ad-12472b180a98&sort=DATETIME desc&limit=672\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"\n// Extract all the records\nrecords = data.result.records\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"// Define a function to fetch values and calculate the average for a specified variable\nfunction recordsAverage(records, varName, numRecords) {\n // Limit the number of records to use\n const limitedRecords = records.slice(0, numRecords);\n\n // Extract all values for the specified variable\n const values = limitedRecords.map(record => record[varName]).filter(value => typeof value === 'number');\n\n // Calculate the average\n const average = values.length > 0 ? values.reduce((sum, value) => sum + value, 0) / values.length : null;\n\n return { values, average };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"logo = await FileAttachment(\"logo.svg\").text();\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":" // Define the inner circle data\ninnerChartData = [\n { name: \"Gas\", value: recordsAverage(records, 'GAS_perc', 48)},\n { name: \"Nuclear\", value: recordsAverage(records, 'NUCLEAR_perc', 48)},\n { name: \"Wind\", value: recordsAverage(records, 'WIND_perc', 48)},\n { name: \"Hydro\", value: recordsAverage(records, 'HYDRO_perc', 48)},\n { name: \"Imports\", value: recordsAverage(records, 'IMPORTS_perc', 48)},\n { name: \"Biomass\", value: recordsAverage(records, 'BIOMASS_perc', 48)},\n { name: \"Solar\", value: recordsAverage(records, 'SOLAR_perc', 48)},\n { name: \"Storage\", value: recordsAverage(records, 'STORAGE_perc', 48)},\n { name: \"Other\", value: recordsAverage(records, 'OTHER_perc', 48)},\n ];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":" // Define the inner circle data\ninnerChartDataWeek = [\n { name: \"Gas\", value: recordsAverage(records, 'GAS_perc', 168)},\n { name: \"Nuclear\", value: recordsAverage(records, 'NUCLEAR_perc', 168)},\n { name: \"Wind\", value: recordsAverage(records, 'WIND_perc', 168)},\n { name: \"Hydro\", value: recordsAverage(records, 'HYDRO_perc', 168)},\n { name: \"Imports\", value: recordsAverage(records, 'IMPORTS_perc', 168)},\n { name: \"Biomass\", value: recordsAverage(records, 'BIOMASS_perc', 168)},\n { name: \"Solar\", value: recordsAverage(records, 'SOLAR_perc', 168)},\n { name: \"Storage\", value: recordsAverage(records, 'STORAGE_perc', 168)},\n { name: \"Other\", value: recordsAverage(records, 'OTHER_perc', 168)}\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":" // Define the inner circle data\ninnerChartData4Weeks = [\n { name: \"Gas\", value: recordsAverage(records, 'GAS_perc', 672)},\n { name: \"Nuclear\", value: recordsAverage(records, 'NUCLEAR_perc', 672)},\n { name: \"Wind\", value: recordsAverage(records, 'WIND_perc', 672)},\n { name: \"Hydro\", value: recordsAverage(records, 'HYDRO_perc', 672)},\n { name: \"Imports\", value: recordsAverage(records, 'IMPORTS_perc', 672)},\n { name: \"Biomass\", value: recordsAverage(records, 'BIOMASS_perc', 672)},\n { name: \"Solar\", value: recordsAverage(records, 'SOLAR_perc', 672)},\n { name: \"Storage\", value: recordsAverage(records, 'STORAGE_perc', 672)},\n { name: \"Other\", value: recordsAverage(records, 'OTHER_perc', 672)}\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":" // Define the 2009-2014 data\nyear2009to2014 = [\n { name: \"Gas\", value: { average: 36.36232 } },\n { name: \"Nuclear\", value: { average: 20.38354 } },\n { name: \"Wind\", value: { average: 3.626062 } },\n { name: \"Hydro\", value: { average: 0.9325301 } },\n { name: \"Imports\", value: { average: 3.559288 } },\n { name: \"Biomass\", value: { average: 0 } },\n { name: \"Solar\", value: { average: 0.123071 } },\n { name: \"Storage\", value: { average: 0.8449857 } },\n { name: \"Other\", value: { average: 0.3659026 } }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":" // Define the 2014-2019 data\nyear2014to2019 = [\n { name: \"Gas\", value: { average: 34.44816 } },\n { name: \"Nuclear\", value: { average: 21.93182 } },\n { name: \"Wind\", value: { average: 12.32851 } },\n { name: \"Hydro\", value: { average: 1.189881 } },\n { name: \"Imports\", value: { average: 7.498944 } },\n { name: \"Biomass\", value: { average: 1.247841 } },\n { name: \"Solar\", value: { average: 2.672876 } },\n { name: \"Storage\", value: { average: 0.7975148 } },\n { name: \"Other\", value: { average: 3.137328} }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":" // Define the 2014-2019 data\nyear2019to2024 = [\n { name: \"Gas\", value: { average: 33.95627 } },\n { name: \"Nuclear\", value: { average: 16.17952 } },\n { name: \"Wind\", value: { average: 25.47087 } },\n { name: \"Hydro\", value: { average: 1.229297 } },\n { name: \"Imports\", value: { average: 10.34947 } },\n { name: \"Biomass\", value: { average: 6.071654 } },\n { name: \"Solar\", value: { average: 4.209174 } },\n { name: \"Storage\", value: { average: 0.5462255 } },\n { name: \"Other\", value: { average: 0.733792} }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":" // Define the 2014-2019 data\nyear2024 = [\n { name: \"Gas\", value: { average: 25.02893 } },\n { name: \"Nuclear\", value: { average: 14.30112 } },\n { name: \"Wind\", value: { average: 29.31025} },\n { name: \"Hydro\", value: { average: 1.249569 } },\n { name: \"Imports\", value: { average: 16.24947 } },\n { name: \"Biomass\", value: { average: 6.849421 } },\n { name: \"Solar\", value: { average: 4.704858 } },\n { name: \"Storage\", value: { average: 0.6058051 } },\n { name: \"Other\", value: { average: 1.167355} }\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// Extract and format the DATETIME\nformattedDateTime = {\n const datetimeStr = data.result.records[0].DATETIME;\n const dt = new Date(datetimeStr);\n\n // Format the date\n const day = dt.getUTCDate();\n const month = dt.toLocaleString('default', { month: 'short' });\n const year = dt.getUTCFullYear();\n const suffix = (day % 10 === 1 && day !== 11) ? 'st' : (day % 10 === 2 && day !== 12) ? 'nd' : (day % 10 === 3 && day !== 13) ? 'rd' : 'th';\n const formattedDate = `${day}${suffix} ${month} ${year}`;\n\n // Format the time\n const hours = dt.getUTCHours().toString().padStart(2, '0');\n const minutes = dt.getUTCMinutes().toString().padStart(2, '0');\n const formattedTime = `${hours}:${minutes}`;\n\n return { date: formattedDate, time: formattedTime };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// Display the formatted date and time\nformattedDateTime","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"chartData = [\n { name: \"Gas\", value: data.result.records[0].GAS_perc },\n // { name: \"Coal\", value: data.result.records[0].COAL_perc },\n { name: \"Nuclear\", value: data.result.records[0].NUCLEAR_perc},\n { name: \"Wind\", value: data.result.records[0].WIND_perc },\n { name: \"Hydro\", value: data.result.records[0].HYDRO_perc },\n { name: \"Imports\", value: data.result.records[0].IMPORTS_perc},\n { name: \"Biomass\", value: data.result.records[0].BIOMASS_perc },\n { name: \"Solar\", value: data.result.records[0].SOLAR_perc },\n { name: \"Storage\", value: data.result.records[0].STORAGE_perc },\n { name: \"Other\", value: data.result.records[0].OTHER_perc}\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"circleData = [\n { name: \"Carbon Intensity*\", value: Math.round(data.result.records[0].CARBON_INTENSITY) },\n // { name: \"Zero Carbon\", value: Math.round(data.result.records[0].ZERO_CARBON_perc) },\n { name: \"Low Carbon\", value: Math.round(data.result.records[0].LOW_CARBON_perc) },\n { name: \"Renewables\", value: Math.round(data.result.records[0].RENEWABLE_perc) },\n\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"html``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"\n\n\n \n \n Donut Chart with Font Awesome Icon\n \n \n\n\n

\n \n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1082,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null