[Feedback Wanted]: Revise the colours used for electricity sources in all graphs

[Alportan]

Aim/purpose
We want to ensure that the source of electricity colours closely resemble their real-world counterparts or follow industry standards, as well as align them better with existing mental models.

Proposed solution
We aim to enhance the colours distinction, coherence, saturation and contrast (for both light and dark themes).

Here's a quick overview of the major changes:

⚛️ nuclear - after analysing data from multiple energy insights and statistical platforms, there were a quite few colours used to represent this source. We chose to follow the industry trends (regards to colours of electrolysed hydrogen - pink) gave it a purple touch for better contrast.
💨 wind - going towards a light blue, aligning it more closely with the hue of the sky.
☀️ sun - switched from orange to a warmer yellow to reflect the boundaries of visible wavelengths here on Earth.
♨️ geothermal - switching from yellow to a more earthy (brown) shade of red.
🔋 battery storage - moved away from the pinkish purple towards a more lithium turquoise.
🔥 🪨 🛢️ fossils - deemphasised them altogether by giving them different shades of grey.

The colours in action on a graph 👇

We want to ensure that these colour choices resonate with you and accurately represent the diverse range of energy sources. While we've put considerable thought into selecting these colours, we recognise that there may be room for improvement.

Let us know if any colours seem ambiguous or if there are suggestions for adjustments that would enhance clarity and comprehension. 🙏

Feel free to drop your thoughts or any questions in this thread.

[dzedler]

Love it!

[PmplCode]

I like it! 👍🏼

[q--]

I'm not sure about the different shades of green being added... Can you give an example with imports? I wonder if they don't look to much like those.

[Alportan]

I'm not sure about the different shades of green being added... Can you give an example with imports? I wonder if they don't look to much like those.

Thank you for your feedback! 🙏

There is additional work being done on for the whole Electricity production/consumption by source graph as we speak, where the purpose is to simplify some things and add an explanatory layer on top for better understanding of the data being shown.

Today we show the colour for carbon intensity on each bar which doesn't coincide with the sources and there is no explanation for it. The proposed solution is to bundle exchanges altogether under one source (since electricity exchanges are technically a source). It would look something like this 👇

You can have a sneak peak into the design in this prototype. (which will be shared in a new issue soon)

Let me know if you have any questions! 🙌

[q--]

Let me know if you have any questions! 🙌

Will the origin of electricity graph not have the carbon intensity coulors either, like it is shown in the mockup? I'd consider it one of the most interesting features of ElectricityMap that you can see that e.g. a country is exporting greener electricity at a time the sun is shining, or that e.g. Germany reduced the carbon emissions of its power plants in in spite of the Atomausstieg, but some of that is simply due to importing more polluting power from elsewhere etc.

This is especially the case where a country is importing from a lot of this others (Germany is the best example, especially when there's low rememberable generation) and it isn't feasible to click through to every other country.

[Alportan]

Will the origin of electricity graph not have the carbon intensity coulors either, like it is shown in the mockup?

Sounds like a good use-case, the biggest issue with the origin of electricity graph (if you are talking about this graph 👇 ) is that it's using 2 different colour scales, one for the sources and another one for the carbon intensity. Since there are usually 3-5 exporting players for most countries, all with different carbon intensities, the graph can easily become cluttered and rather hard to read/distinguish the sources from carbon intensity from exchanges.

If you are talking about the initial graph I shared, continue reading. 🙂

This is especially the case where a country is importing from a lot of this others (Germany is the best example, especially when there's low rememberable generation) and it isn't feasible to click through to every other country.

I do see now that keeping the carbon intensity colours for each exchange in the first graph (with a legend for the scale itself underneath) does make sense, as you can immediately see why the carbon intensity at a current time changes so much due to exports.

Ideally we want to make it easy for anyone, new or old to the app to understand our data better, and this is the general direction we're heading at the moment. Hope that makes sense!

[phiphou]

For me, grey means unknown and brown dirty. So I would keep brown for oil and coal...

[Alportan]

For me, grey means unknown and brown dirty. So I would keep brown for oil and coal...

Thanks for the feedback! Would a pastel brown work instead?

We want to downplay fossils as much as we can, making the low-carbon sources stand out. @phiphou

[Alportan]

I'd consider it one of the most interesting features of ElectricityMap that you can see that e.g. a country is exporting greener electricity at a time the sun is shining, or that e.g. Germany reduced the carbon emissions of its power plants in in spite of the Atomausstieg, but some of that is simply due to importing more polluting power from elsewhere etc.

What if you would still have access to this information in the exchanges graph below, instead of bundling it with the data sources? @q-- This way the information is clearer in the first graph, and we group information more logically into their categories. 🤔

[phiphou]

@Alportan Not a design expert but don't understand why you don't take a dark brown for oil and coal (and maybe gas).

However, I understand you want to have a beautifull color scheme, and distinct colors for all energy sources (ortherwise nuclear should be green).

Maybe you can keep proposal but just with darker colors for oil, coal and gas, and brighter color for geothermal.

[Alportan]

@Alportan Not a design expert but don't understand why you don't take a dark brown for oil and coal (and maybe gas).

[...]

Maybe you can keep proposal but just with darker colors for oil, coal and gas, and brighter color for geothermal.

I see your point! The main reason for having neither a very light or dark colours is to keep them consistent in a range which would work on both our light and dark theme, to comply with the APCA accessibility guidelines of at least Lc 15 on graphic elements.

With this in mind, we want to make sure that our app is compliant with most visual impairments by following these standards, so there is a possibility to switch the dark grey for coal to a more browner shade, but we still need to keep a lightness level above these guidelines.

I hope that answers your question. @phiphou

[phiphou]

We may have two color schemes, one classic mode and one for the color-blind mode ?

[Alportan]

We may have two colour schemes, one classic mode and one for the colour-blind mode ?

Thank you for your follow-up message and suggestion!

While our existing colour-blind mode targets specific impairments, we also want to ensure that our app is accessible to a broader audience with common conditions affecting vision, including nearsightedness, farsightedness, and other refractive errors.

[phiphou]

Consider #6700 for this big desgin change.

[VIKTORVAV99]

Consider #6700 for this big desgin change.

This issue focuses just on the colours themselves and how they are represented, it is unrelated to any potential tooltips or any other features. Please do try and keep the issues separate.