Graph Power Sources - Githubissues

vkoves commented 1 year ago

Overview

Adds a new pie chart showing how power is generated in all states with a % of emissions from power > 0 (so this graph doesn't show for Vermont or DC) including a green arc and a large % carbon-free number to make clear what sectors are dirty and clean.

Additional Improvements

Additionally, added functionality to the emissions breakdown graph to jump to specific sections (I really needed this to quickly QA power graphs across many states) and made it so Ctrl + Click works on the homepage map to properly take you to a new tab (like a normal link).

Note: I also dropped our recommendation on adding solar to your home - I think that makes more sense in the Take Action page and broke out the flow of the state details page - the main thing is to close down fossil fuel plants, not to get everyone to add solar panels to their roof.

Demo

Desktop	Mobile

Graph Shortcut Demo

https://user-images.githubusercontent.com/3187531/224897718-1372049a-30ff-4ed9-95e3-793209cf992f.mp4

Notes

Holy moly, this one is challenging to handle because of the wide variety of data ranges - Nevada in particular is a great test case because it has a bunch of small slices that are at risk of having overlapping labels.

Testing Instructions

Test a variety of states on desktop and mobile and confirm you can read all the labels
Also confirm the homepage state emissions map tooltip is properly positioned again, particularly for DC and L shaped states like Louisiana

netlify[bot] commented 1 year ago

Deploy Preview for decarb-my-state ready!

Name	Link
Latest commit	28a144314811b0e4cb933ff28c10639a13a4031f
Latest deploy log	https://app.netlify.com/sites/decarb-my-state/deploys/64112f6d7956a400084bc178
Deploy Preview	https://deploy-preview-187--decarb-my-state.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

vkoves commented 1 year ago

Note to self: if I can do it easily, making it so to the single bar chart is clickable as a form of shortcuts is something some users requested and would make QA-ing this and other changes easier

vkoves commented 1 year ago

@derekeder - I basically stole the current colors from the EIA, and I think they actually work a lot better at a glance than our typical orange and green approach - here's what that might look like: