At Kaluza we are creating solutions to reduce the cost of energy as well as building a platform that will enable a zero carbon grid.
Electric vehicles that are plugged in for longer than their required charging time offer flexibility on when they can be charged. Harnessing this flexibility at scale, and the flexibility offered by other domestic assets, provides us with opportunities that have never existed before.
In these exciting times, we recognise that telling the story of how our solutions are making a difference is crucial in effecting change.
This article explores how we are building charts and using them as storytelling devices.
A well designed chart is simple, feels familiar and has one primary message.
Take for example, a chart we built to show the results of an electric vehicle charging trial we ran with a local grid operator.
Now you may not know much about the energy industry but what you can say is there is one blue peak in the early hours of the morning and one orange peak in the early evening.
Let’s dig into what these bars represent...
We programmed over 300 electric vehicles (EVs) to be optimised against price signals. This enabled the EVs to delay their charging until the price of electricity was lower. We wanted to find out how much energy could be shifted from peak times (around 4pm to 7pm) to non-peak times, while still ensuring that their car battery is full when they need it.
The bars on the chart represent total energy consumption for the portfolio in each half hour period of the day.
- Orange is the baseline - what would have happened without the Kaluza optimisation
- Blue is the realised - what actually happened due to Kaluza optimisation
It is strikingly clear the effect Kaluza has had. Peak EV energy consumption has been shifted away from peak price of energy.
The consequences of this action in the real world are significant:
- The customer saves money.
Directly if they are on a dynamic tariff or indirectly otherwise because the energy supplier could pass on the cost savings. e.g. through a proposition such as reduced or free EV charging hardware. - Network operators save money.
A smaller peak means the network has to support a lower maximum capacity. This means network operators can reduce or delay expensive upgrades to network infrastructure. This not only promotes efficient use of the UK's electricity networks, but will ultimately reduce energy bills for end consumers. - Cleaner energy can be used.
Traditionally coal, oil and gas power plants have been turned on to support the grid during peak times on the electricity networks. If we can reduce the peaks then cleaner energy generators can make up more of the mix.
How we built the chart
To build the user interface for this chart we required ultimate control over appearance and functionality. Therefore instead of using an off-the-shelf charting library, we chose to build the charts from scratch using SVG elements and D3.js to map data ranges to canvas size.
Here are two excellent resources we found useful during the process:
https://www.freecodecamp.org/news/how-to-get-started-with-d3-and-react-c7da74a5bd9f/
https://frontendmasters.com/courses/d3-js-react/
The main gotcha with using D3 in React is that they both want to be in charge of updating the HTML DOM. In our case, we have chosen to only allow React to control the updates meaning we only use D3 for mapping data ranges to canvas sizes and generating complex SVG shapes.
We built a number of different charts in this way but found it time consuming to generalise components (such as the axis and on-hover overlay) so that they could be reused.
Building a Kaluza Chart Library
Interest from other teams in the company and a need for reusability and consistency led us to the decision to build our own chart library. The library we built is independent from our company's design system and can be included in other team’s micro-frontends. It is a place to collaborate on new designs and has an interactive viewing gallery using storybook and storybook knobs.
Building your own library is exciting and empowering but can quickly become a time sink and a burden to maintain. With that in mind, we decided to experiment with a newly open sourced library called Visx.
Visx is a low level, unopinated library for low level chart elements. It was built by the Airbnb team who have battle tested it over the past 3 years. What distinguishes this library from other libraries is that it does not claim to be a chart library. Instead it offers the low level chart elements allowing you to build your own chart library.
Looking at the docs we saw that the Visx team had written components (such as the chart axis) in the same modular way that we had using svgs and D3. However we saw that they have had a lot more time to polish and generalise the components.
One of the first charts we built using Visx in our library was a line chart showing time series data.
It was needed for an interface that tells the story of a network turn down event.
As well as shifting energy consumption to reduce network constraints, Kaluza can also provide other services to the grid such as demand-side turndown.
In the scenario where there is more demand on a grid then energy being supplied (the grid becomes unbalanced) the operators have two choices:
- Turn up energy generation by asking generators to produce more electricity - oil power stations have one of the quickest response times so are most commonly used.
- Turn down demand. Contracts with large industrial and commercial sites have been arranged in advance that they can be paid to stop consuming.
Kaluza controls portfolios of thousands of assets which include smart chargers, two-way vehicle-to-grid chargers and home energy storage devices. We can bid into the market knowing for example X smart chargers are currently charging and we can offer to balance the grid by turning a percentage of them off for a short period, while still respecting the end customers charging requirements.
The above chart is the first we built in our library and the line plots represent the total energy consumed during a minute for 1 smart charger.
Again the baseline is in orange and the actual consumption is in blue. To add more context we add the availability period as a transparent blue area. This is the time we have agreed with the market to be ready to provide the event. And finally we have a purple line to show when the market asked us to perform the turndown event.
This is another example of a chart assisting in telling a quite complex story. As you can see in the chart, Kaluza received a turndown signal from the grid operator at 4:10 after which our response is reflected in the realised line falling to zero for 5 minutes before returning to normal.
Turndown events like this have the potential to balance the grid in a way that requires less carbon emissions. Instead of turning up an oil fueled generator to balance the grid we can react by turning down domestic asset consumption.
The interesting part of building this chart was generalising the different plots so that it could be used to tell other stories. For example we built the line paths, legend and on-hover overlay to be generated from the single generic data array. Below is an example of the way we have structured the input data to achieve this.
.
One thing we discovered when building our own charting library is that it is easy to over-generalise in a chart. What I mean by that is you can build one chart with an ever increasing list of ways to configure it. This satisfies DRY principles but makes the charts harder to use and maintain.
Before extending an existing chart we ask ourselves if the new requirements are for a situation in which we are trying to tell a new narrative. If so we add a new chart.
Our new chart library is being used by more and more teams, saving developers time when building new interfaces. It is also importantly improving the consistency of our interface design. Charts are an essential part of the storytelling process here at Kaluza and as you have seen we have invested in getting them right.
Whether it’s shifting energy consumption or providing turndown services, the solutions we have developed are changing the future of energy use. The stories we are telling now show real solutions to decarbonising the grid and we are so excited to share more of what we are working on in 2021!