Displaying the UK's solar energy production visually
Design and Code by James Diffey, Matt Kirke and Sara Thampi
Data from the University of Sheffield Solar API https://www.solar.sheffield.ac.uk/pvlive/
Please visit the deployed site: https://solar-energy-alpha.vercel.app/
When someone plugs in their phone, or turns on their kettle, where does that electricity come from? It is easy to overlook the contribution renewable energy sources are make in the UK, and difficult to access the latest production statistics. We were inspired by Winderful UK's work to visualise the UK's wind energy production and we wanted to create a sister project.
Awesun Solar Energy Visualiser displays the latest solar PV generation statistics in half-hourly increments between the hours of 9am and 5pm. Three views are presented (weekly, monthly and yearly), as well as their peak production statistics for those periods. The size of the sun changes depending on how much energy has been produced on the current day, relative to the annual high.
Next.js, Tailwind , HTML, CSS
We experimented with Apex Charts but decided to code the graphs in Tailwind/CSS/JSX
Solar data was fetched from the University of Sheffield's solar PV API. To bypass CORS errors, Next JS server-side-rendering was used. The data was filtered to entries between 9am and 5pm to display only typical solar production hours. Client components were used to toggle states of the web-page, for instance to change which graph to display. The application accepts user input for which graph they want to display.
- Fetching data without CORS errors - switched project from React to Next.js so we could fetch data in a server component.
- Making the design mobile-responsive.
- Sizing the sun responsively.
- Overcoming the CORS errors
- Sorting through a huge amount of data
- Learning about regular expressions
- Creating reusable code blocks
- How to make the size of the sun responsive using css grid
- Tailwind and Tailwind animations
- How to code a graph component
- Further improving the graphic display,
- Better screen-size responsiveness
- Sharing the project with the API's owners.