Visualization of cash flow in the San Francisco budget. Where does the money come from and where does it go? Made with React.js, Flux, D3.js, Babel, Webpack, and Sass.
View it live at http://sf-budget-visualization.herokuapp.com/
- Clone repository and cd into the directory
- If you don't have Node.js, you'll want to get that first.
- Install node_modules by typing
npm install
npm start
to start the server at http://localhost:8080/- Alternatively, you can watch all the build tools and the server if you run
npm run watch
- Incorporate negative cash flow data into the diagram
- Resize container div so that it does not crop out portions of the interior svg
- Improve resizing so that highly granular data, e.g. the sub-object field, is easier to view
- Use a tooltip to show additional details when hovering over a node or a link
- Use lifecycle methods for D3.js
- Write tests