“Visual Budget” is a set of open-source tools including a WordPress plug-in which manages budget datasets and creates “shortcodes” which can be embedded into a WordPress post or page to produce one of many interactive financial visualizations, described below. Detailed documentation and all the code are available from our GitHub repository: github.com/VIsualGovernmentInc/
The Visual Budget plug-in is installed by uploading it into your WordPress site in the usual “manual” method, by uploading a ZIP file from your computer. (Visual Budget is not yet available through wordpress.org.) Go to the Github repository, open “Visual-Budget-Core-Plugin”, open the “zip” folder, download the most recent ZIP file (visualbudget x_xx.zip, where x_xx is the current version number), upload it into your WordPress site as a new plug-in and activate it. You should see a new Visual Budget link in the dashboard.
For more information, see the Visual Budget FAQs.
The Visual Budget plug-in utilizes technologies based on the latest open-source libraries, including D3.js, mustache.js, jQuery and Angular.js. In particular, the visualizations are created from the D3 library.
The Visual Budget plug-in comprises two main components which are built separately but are both included in the repository:
- a WordPress plug-in which manages the datasets and interprets the shortcodes
The plug-in is built using the Gulp toolkit, and gulpfile.js is included in the repository.
Visual Budget datasets are arrays of budget information. Each dataset starts with a number of columns identifying the budget line items, followed by a few columns of metadata (comment, source of the data, etc.) followed by columns with the budget value for a series of years, one year per column. A dataset can represent expenses,
A dataset file is in comma-separated-value (CSV) format, a common format easily created in Excel or database report writers. Datasets are uploaded into your site using the Visual Budget plugin.
A dataset can represent a hierarchical expense or revenue budget, funds or other assets, or debts and other liabilities.
The line item columns reflect the hierarchical nature of municipal budgets. For example, the highest level might be “DPW”, the next level “personnel” and “expenses”. The “personnel” item might be further split into “salaries”, “overtime” and “insurance”. This hierarchy is directly expressed in the treemap visualization.
In WordPress, a “shortcode” is an expression enclosed in square [[brackets]] which is replaced by WordPress or a plug-in into some characters or code inserted into the page or post. For example, a [gallery id="123" size="medium"] inserts the photo gallery named “123” into the post, with a size of “medium”.
Each visualization created by Visual Budget is placed into a posts and pages as specific shortcodes described below.
More detailed information about the Visual Budget shortcodes is available on our Github repository.
A Line Chart is a simple display of a value through a number of years. Line Charts are often used in budget presentations to show population growth, inflation, and other one-dimensional time series.
A Line Chart is normally interactive – using the cursor, the viewer can slide back and forth through years past and future. Most of the visualizations on a page are coupled together through the current year – so if you slide the cursor back and forth in the line chart, a treemap on the same page will present the budget data for that year.
Stacked Area Chart
A Stacked Area Chart or stacked column chart can show multi-part data through a number of years. The different segments in the stack show how the total of all lines breaks down and changes over time.
Like the line chart, a stacked area chart can control the “current year” and effect all other visualizations on the page.
A legend can be generated automatically for a dataset to identify segments in a Stacked Area Chart.
A Comparison chart is a column chart used to compare different values side by side through a number of years.
Like the Line Chart, a Stacked Area Chart can control the “current year” and effect all other visualizations on the page.
A treemap is a visually compelling interactive presentation of hierarchical data at a single point in time. A treemap is built from a Visual Budget dataset using the hierarchy of budget line items for the values in a single year. For example, a treemap could present a town’s expenses for FY 2018, starting at the top level with “Town”, “Schools” and “Insurance”. When a viewer clicks on the “Town” box, the treemap “zooms in” to show “Police”, “Fire”, “DPW” and “Administration”, and so-on, to the deepest level available in the data. The viewer can then zoom back out and dive into another department.
When a user hovers over a region in the treemap, the item name and description pop-up. If the dataset is an expense budget, the pop-up can show the portion of the viewers property tax bill which is appropriated to that line item. So a viewer can find “what does police protection cost me?” by entering their own My Tax BIll, and hovering over the Police segment in the treemap.
The treemap shows the “current year”, which can be controlled by any of the visualizations showing a time series, such as a Line Chart or Stacked Area Chart.
Tables are used to display the numbers in a dataset in tabular form. The table rows collapse and expand to open up more detail in the hierarchy.
There are a variety of “metric” visualizations which insert specific bits of calculated information into a page. Currently available metrics are:
- The current date
- The dollar amount for the current year
- An average of dollar amounts over the entire range of years
- A rolling 5-year average of the dollar amount
- Dollar growth from the previous year
- Percent growth from the previous year
- The current value of “My Tax Bill” (see below)
- A link to download the dataset
My Tax Bill
The “My Tax Bill” shortcode lets viewers insert their own tax bill.
The default value can be set in the Visual Budget configuration tab.
Of course, a budget presentation web site based in WordPress is not limited to the visualizations produced by Visual Budget. It’s simple to create complex graphs, charts and other presentations in Microsoft Excel, Adobe Illustrator, Microsoft Power BI, etc. and embed them into your site in the usual way, as a media file or iframe. Likewise, YouTube and Vimeo videos can be embedded in pages for more detailed explanations, In addition, thousands of other WordPress plugins can be installed to create all sorts of different presentations.
Pages with visualizations can be formatted without any header, menu or borders, so that they can be “iframed” into other web pages on this site or others. This allows independent presentation of different data sources which do not interact, such as the two budget summaries on the Comparisons page.
An example of an iframeable page is this summary of Arlington’s expenses.