CivLab

Bringing radical government transparency to life with a data visualization platform designed for accessibility.

Tech Stack:

  • Next.JS
  • D3
  • Tailwind
  • Supabase
  • Vercel

We partnered with CivLab to bring clarity and accountability to San Francisco’s government data, by creating a powerful, public-facing data visualization platform that maps the city’s entities and their relationships, budgets, meetings, and more.

Project Overview

  1. 1.

    CivLab’s goal is to demystify local government, helping residents understand how power is distributed and who is responsible for what. We brought their mission to life with an accessible, beautifully designed data visualization tool.

  2. 2.

    We designed and engineered a new interface mapping San Francisco’s complex network of government entities, budgets, topics, and relationships in an intuitive, contextual, and searchable format.

  3. 3.

    We developed GovGraph as a modular platform, with an authenticated API and private package architecture that makes it easy to integrate into other applications and media platforms.

A Mission for Transparency

CivLab (Civilization Lab) is a non-profit committed to helping citizens better understand the inner workings of local government. Their flagship project, GovGraph, began as an early attempt to visualize government relationships in San Francisco — but it was difficult to navigate, poorly optimized for mobile, and limited in functionality.

Our task was to rebuild GovGraph into a tool that could function as both an accountability resource and an educational platform. Working closely with CivLab’s team, we designed a new experience from the ground up: one that would make complex civic information accessible, searchable, and portable.

Data Visualization, Reimagined

The latest version of GovGraph gives users a complete view of how San Francisco’s government operates. We delivered a fully redesigned and mobile-accessible interface that visualizes key relationships between government entities, such as who appoints or oversees whom. The platform features comprehensive budget breakdowns across all 54 city departments, real-time meeting information, and aggregated news connected to each entity.

To help users navigate and understand this wealth of information, we built a topical categorization system highlighting major issues like housing, education, and public safety. An AI-powered tagging pipeline identifies which departments and offices are responsible for each topic, giving residents a clear sense of accountability. The powerful search interface supports keyboard shortcuts and advanced filtering, while a unique resident-centered view helps visualize how all government entities ultimately relate back to the people they serve.

This functionality transforms government data into something understandable and actionable, especially for journalists, educators, and engaged residents.

Built to Scale

To power CivLab, we developed a modular technical architecture designed for flexibility and reusability. The front-end graph visualization is built as a portable package that can be embedded into any JavaScript application. This means organizations, from newsrooms to civic education platforms, can integrate the visualization into their own tools and workflows.

On the backend, a Postgres database stores the complete dataset, while an authenticated API serves real-time data to the front-end. The system is distributed via a private GitHub repository with provisioned access keys, allowing CivLab to securely grant access to collaborators and media partners.

This approach turns GovGraph from a single-use tool into a scalable platform for civic engagement, one that can support a wide variety of implementations beyond its original scope.

CivLabs sets a new standard for civic transparency in the digital age. Designed for accessibility and impact, it’s ready to be incorporated into newsrooms and civic media platforms, bringing clarity and accountability to the stories that shape public life.