River of Light

Flow of Transparency turns complex government budgets into living rivers of light — interactive, intuitive, and participatory. Citizens can trace, compare, and reimagine how money flows.

Comment

🌊 About the Project – Flow of Transparency

🔥 Inspiration

Every year, governments publish detailed budgets — thousands of pages filled with numbers, jargon, and static tables. For citizens, these documents feel distant, complex, and inaccessible. Transparency without accessibility isn’t true transparency.

I wanted to reimagine how people interact with public money. The idea was simple but powerful: what if budgets could flow like rivers of light, something you can see, touch, and reshape? That vision became Flow of Transparency.

📚 What I Learned

  • How to translate abstract financial datasets into intuitive, visual metaphors.
  • Building interactive experiences with React, D3.js, and TailwindCSS.
  • Using data storytelling to make complex topics human-centered.
  • The importance of balancing beauty, performance, and clarity in civic-tech.

🛠️ How I Built It

  1. Design & Ideation – Sketched flow-inspired layouts in Figma and Lovable AI, drawing from Google’s Material You and Flow aesthetic.
  2. Frontend – React.js with TailwindCSS for clean components and Framer Motion for animations.
  3. Visualization – D3.js to create smooth branching streams for budgets and allocations.
  4. Backend – Node.js + Express connected to PostgreSQL for structured budget datasets.
  5. Math & Insights – Used formulas like
    [ \text{BMI-like Spending Ratio} = \frac{\text{Department Budget}}{\text{Total Budget}} ]
    to calculate proportions and comparisons between planned vs. actual spending.
  6. Deployment – Packaged for hackathon demo, ensuring local setup via npm install && npm start.

🚧 Challenges I Faced

  • Complex Data → Parsing government budget files (PDFs, CSVs) and making them usable.
  • Performance → Rendering thousands of flowing nodes while keeping animations smooth.
  • Design Decisions → Finding the right balance between aesthetics and readability.
  • Time → Building a polished, interactive, and participatory tool under hackathon constraints.

✨ The Journey

From inspiration to implementation, this project taught us that making data engaging is as important as making it open. Flow of Transparency is our step towards a world where every citizen can see where money flows — and shape how it should.

Built With

Share this project:

Updates