Add Budget Data Visualizations

[mateoclarke]

In the current app, as you go through the workflow, you don't really get a good sense of how big a portion of the budget the department in question takes up.

We could incorporate a pie chart or other useful visualizations that allow you to see what percentage of the City's General Fund is going to each department. We also need to figure out how this fits into the existing flow of the app.

[twentysixmoons]

Here are some examples of budget viz that were shared in our slac:
https://www.wikibudgets.org/
https://slack-files.com/T036FLMDN-F3RGN6CKH-29249eb27a
https://www.youtube.com/watch?v=Jp12JcE37Lo&app=desktop

[twentysixmoons]

More viz that we were shown:
http://moab.abalancingact.com/
http://old.seattletimes.com/flatpages/local/balance-washington-state-budget-game.html
https://www.budgetchallenge.org/pages/overview
https://alameda.budgetchallenge.org/app#/c/44/q/285
https://devpost.com/software/invoice-dashboard

[cdikibo]

vx - this framework has no pie charts in its library
recharts - their pie chart examples are broken
and highcharts are a paid service

[cdikibo]

Does the following information apply to budget party: FREE FOR NON-COMMERCIAL

Do you want to use Highcharts for a personal website, a school site or a non-profit organization? Then you don't need the author's permission, just go on and use Highcharts. For commercial websites and projects, see License and Pricing.

[mateoclarke]

Yes, Budget Party is non-commercial. But I hesitate to use highcharts since it isn't an open source project. Is there a good use case to move forward with it over other options? I don't know much about how its implemented but I'm guessing it would run into the same collision issues with React vs third party DOM manipulation.

Found these in awesome-react:
https://github.com/enaqx/awesome-react#charts
https://github.com/enaqx/awesome-react#react-charts-tutorials

Also saw this new open source library released by Eventbrite:
https://github.com/eventbrite/britecharts