Donut Chart with Font Awesome Icon

25:["$","title",null,{"children":"UK Generation Mix Live v2 | Mark Cherrie | Observable"}] 49:T3bf5,// 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", width) .attr("height", height) .attr("viewBox", [-width / 2, -height / 2, width + 230, height + 230]) .attr("style", "max-width: 100%; height: auto;"); //////////////////////// BACKGROUND svg.append("rect") .attr("width", width + 230) .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 / 2 + 750) // 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"); //////////////////////// DATETIME 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; // Append the biggest segment's icon in the middle of the donut chart 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 + 20}, ${-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); // Append second line of text (with "* gCO2/kWh") below the circles // circleGroup.selectAll("text.co2") // .data(circleData) // .enter().append("text") // .attr("x", (d, i) => i * 162) // Align text with circles // .attr("y", radius / 5 + 30) // Position below the circles // .attr("text-anchor", "middle") // .attr("font-family", "sans-serif") // .attr("font-size", 18) // .attr("fill", "#414a4c") // .text("* gCO2/kWh"); // 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 svg.append("g") .attr("transform", "translate(550, 470) scale(1)") // Adjust the position and scale as needed .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:T411,chartData = [ { name: "Gas", value: parseFloat(data.result.records[data.result.records.length - 1].GAS_perc) }, { name: "Nuclear", value: parseFloat(data.result.records[data.result.records.length - 1].NUCLEAR_perc) }, { name: "Wind", value: parseFloat(data.result.records[data.result.records.length - 1].WIND_perc) + parseFloat(data.result.records[data.result.records.length - 1].WIND_EMB_perc) }, { name: "Hydro", value: parseFloat(data.result.records[data.result.records.length - 1].HYDRO_perc) }, { name: "Imports", value: parseFloat(data.result.records[data.result.records.length - 1].IMPORTS_perc) }, { name: "Biomass", value: parseFloat(data.result.records[data.result.records.length - 1].BIOMASS_perc) }, { name: "Solar", value: parseFloat(data.result.records[data.result.records.length - 1].SOLAR_perc) }, { name: "Storage", value: parseFloat(data.result.records[data.result.records.length - 1].STORAGE_perc) }, { name: "Other", value: parseFloat(data.result.records[data.result.records.length - 1].OTHER_perc) } ];4c:[{"id":"3f88ed00fd18d8b73c4135846a862322390e251b8ccb538223049e0373dd267050fb90e7747aa343cf1a0f04920ac176d40afaba84d58b64b897e9438e04b01b","href":"https://static.observableusercontent.com/files/3f88ed00fd18d8b73c4135846a862322390e251b8ccb538223049e0373dd267050fb90e7747aa343cf1a0f04920ac176d40afaba84d58b64b897e9438e04b01b","name":"logo.svg","type":"image/svg+xml","lastModified":1735763538899.166,"size":29282}] 29:{"id":"6a5562655794763b","slug":null,"title":"UK Generation Mix Live v2","thumbnail":"0dd7e900e3d346dce61d39852290c59ea14b907261d282fd66e2d0b54907d4da","access_level":"public","create_time":"$D2024-12-27T09:34:46.887Z","update_time":"$D2026-01-27T08:37:27.485Z","view_time":null,"first_public_time":"$D2025-01-07T16:32:41.108Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5154b4f59e97f626","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/f59eb718a14e6bb65f38b96bae0873e10fcc8ff2d44e2dbe9b2dbd0ebf3fac3e","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1302,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"23b261fd112616a1","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/e445292ea8bb0720ffa50670358e264a696df04c61b58f4f07eb543388b7de29","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"23b261fd112616a1","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/e445292ea8bb0720ffa50670358e264a696df04c61b58f4f07eb543388b7de29","tier":null,"role":"editor"},{"type":"team","id":"5154b4f59e97f626","login":"mark-cherrie","name":"Mark Cherrie","avatar_url":"https://avatars-next.observableusercontent.com/f59eb718a14e6bb65f38b96bae0873e10fcc8ff2d44e2dbe9b2dbd0ebf3fac3e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"UK Generation Mix Live v2","cells":[{"id":962,"value":"# UK Generation Mix Live v2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1041,"value":"viewof datetime = Inputs.datetime({\n label: \"Date\",\n value: new Date(), // This is okay — the picker shows local but the value can be coerced\n min: new Date(Date.UTC(2009, 0, 1)), // Jan 1 2009 UTC\n max: new Date(), // still okay — max is \"now\", displayed in local\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":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":true,"hidden":true,"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 const values = limitedRecords\n .map(record => Number(record[varName])) // Convert to number\n\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":true,"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":1034,"value":"data = fetch('https://api.neso.energy/api/3/action/datastore_search_sql?sql=' + encodeURIComponent(`\n SELECT COUNT(*) OVER () AS _count, * \n FROM \"f93d1835-75bc-43e5-84ad-12472b180a98\" \n WHERE \"DATETIME\" >= '${formatForSQL(new Date(datetime - 4 * 7 * 24 * 60 * 60 * 1000))}' \n AND \"DATETIME\" <= '${formatForSQL(datetime)}' \n ORDER BY \"_id\" ASC\n`))\n .then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"formatForSQL = date => \n date.toISOString().replace(/:\\d{2}\\.\\d{3}Z$/, ':59.999Z');","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 in UTC\nformattedDateTime = {\n const dt = new Date(datetime);\n\n // Format the date\n const day = dt.getDate(); // UTC day\n const month = dt.toLocaleDateString('en-GB', { month: 'short', timeZone: 'UTC' }); // UTC month only\n const year = dt.getFullYear(); // UTC year\n const suffix = (day % 10 === 1 && day !== 11) ? 'st' :\n (day % 10 === 2 && day !== 12) ? 'nd' :\n (day % 10 === 3 && day !== 13) ? 'rd' : 'th';\n const formattedDate = `${day}${suffix} ${month} ${year}`;\n\n // Format the time\n const hours = dt.getHours().toString().padStart(2, '0'); // UTC hours\n const minutes = dt.getMinutes().toString().padStart(2, '0'); // UTC minutes\n const formattedTime = `${hours}:${minutes}`;\n\n return { date: formattedDate, time: formattedTime };\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":"$4b","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[data.result.records.length - 1].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[data.result.records.length - 1].LOW_CARBON_perc) },\n { name: \"Renewables\", value: Math.round(data.result.records[data.result.records.length - 1].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":842,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null