1. DemocracyApps, Inc. Community Budget Explorer A Technical Overview

2. DemocracyApps, Inc. Outline High-Level Snapshot Two Kinds of Data Organization Types Open Budget Site Structure CBE Front-End Design Tasks for News Challenge Work

3. DemocracyApps, Inc. High-Level Snapshot PurposeCustomizable, extensible software-as-a-service platform for building municipal and county open budget sites. Public version at http://communitybudgets.orghttp://communitybudgets.org Functional Components Public site pages and components Data API Organization & user administration Site administration Technology Frameworks Back end framework: Laravel (PHP) Front end: Bootstrap (CSS layout) ReactJS (Javascript components) Flux (user action and data flow) Code & Documentation https://github.com/DemocracyApps/Community- Budget-Explorer https://github.com/DemocracyApps/Community- Budget-Explorer https://github.com/DemocracyApps/Community- Budget-Explorer/wiki https://github.com/DemocracyApps/Community- Budget-Explorer/wiki

4. DemocracyApps, Inc. Two Kinds of Data Financial Datasets Per-year with month or day granularity Name & description distinguish different versions of a year Tied to a “chart of accounts” with account names and arbitrary-depth category hierarchy Multiple supported CSV upload formats Public API (used by front-end for asynchronous data load) Cards Cards provide all static data used on open budget sites (e.g., slides, resource tables, embedded HTML, page text, etc.) A named cardset contains an ordered set of cards Each card may contain: a title, a content block (plain text, Markdown or HTML), an image and a link. Use of this data depends on the component consuming it. Currently cards are created/edited via admin interface All relevant site cardsets included on site load

5. DemocracyApps, Inc. Organization Types Platform implements two types of organization today: – Government Can administer users, upload financial datasets, and create and edit multiple sites – Media Can administer users, use financial datasets from any government, and create and edit multiple sites Future – Add “Community Organization” as a new type with same capabilities as Media today. Intended for use by citizens groups, non-profits, etc. – Probably will differentiate organization types further by adding features specific to the needs of each type.

6. DemocracyApps, Inc. Open Budget Site Structure SiteA site consists of a name, a URL slug, an optional mapped domain name (e.g., http://avlbudget.org = http://communitybudgets.org/sites/asheville), and an ordered set of pages. The site is delivered as a single-page app with all data included or auto-loaded. Sites are designed to be embeddable (e.g., on a news site). http://avlbudget.orghttp://communitybudgets.org/sites/asheville PageA page is a container for site display components. It is assigned a layout and components are mapped to sections of the layout. A page also has a short name for URLs, a menu display name, and a description. LayoutA layout is simply a JSON representation of a Bootstrap layout to be used for the page. Sections of the layout are tagged so components may be assigned to them. New layouts may be uploaded. ComponentA widget that can be placed in a layout section; almost all budget site content is delivered via components, which consist of a specification of allowed data types and parameters plus the front-end ReactJS component implementation. Examples on avlbudget.org include the slideshow on the home page, the budget doc breakdown table, and all visualization/table components. New components may be easily added.

7. DemocracyApps, Inc. CBE Front-End Design Pluggable, composable components The component system is designed to make it extremely easy to add new components that visualize data, tell stories, or interact with the user and to make them available for use in any site. In line with the ReactJS philosophy, components are also designed to be easily included in higher-level components. Externalized stateComponents are 100% stateless – all user interactions or data changes pass through a central dispatcher and modify common stores. Among other advantages, this makes it easy to understand exactly where and how users engage. Data transformation layerFinancial datasets are loaded from the server into a local (in-browser) store for use by components. However, a local transformation can be specified to map the original data to a new category/account structure. Currently site- wide and doesn’t support fractional allocations.

8. DemocracyApps, Inc. Tasks for News Challenge Work Specific tasks will be determined as part of the design process, but potentially interesting candidates include: Category mapping – Extend the current category/account mapping to allow fractional amounts and mapping to individual components. – Create a usable interface for creating mappings (currently done in JSON files). Data context – Add ability to link and display contextual information (links, conversations, stories, quick facts, etc.) for specific data (e.g., specific values of categories and/or account in a specific year) New components – Visualizations, e.g., better ways to visualize $ flows – Components that better interweave story (cards) and visualizations (datasets) – Perspectives (likely just pages, but may require high-level component) Integrations – Integrate with AC-T or other comment/discussion platform – Integrate with a survey tool – Embed documents (PDFs, text files, possibly from DocumentCloud)