Reflections

The Making of a Dashboard - Part 1: Decisions on the Tech Stack

This is the first of a series of technical blog posts that document how The Policy Lab at Brown University built an interactive data dashboard with United Way of Rhode Island to support analytics and decision-making with COVID-related 211 call data. This post will cover the background of this project and the decisions The Policy Lab team made on the tech stack. Please use the following link to jump to the rest of the story.

Background of the project

Operated by United Way, 211 is a free and confidential service that helps people across North America find the local resources they need 24 hours a day, 7 days a week. Since the beginning of the COVID-19 pandemic, the United Way of Rhode Island has played a vital role in handling a range of support calls to the COVID-19 hotline at the request of the Governor’s Office, including after hours information and managing a rental assistance program.

In order to track trends in these calls geographically,over time, and by assistance category, the 211 team asked The Policy Lab to help them build an interactive dashboard that caters to the most pressing needs in analytics and provides the easiest and quickest way to reveal trends and patterns in the 211 data.

First draft of the design

After communicating with the team at United Way of Rhode Island, Ben Guhin Delphine, then Head of Design at The Policy Lab, created the first sketch of the design (see below). This first draft includes a stacked area chart, a choropleth map, and a few dropdowns that allow the users to filter the data. The stacked area chart, compared with line charts, helps users to see trends in call volumes not only across categories but also in total. Mapping calls to the geographical regions where they originate also reveals needs for resources across RI cities and towns.

The initial design of the dashboard
The initial design of the dashboard.

Decisions on tech stack

For such a project, fast delivery of analytical insights is key. Therefore, we decided to make a custom-made dashboard for United Way of Rhode Island that maximizes interactivity. We initially decided to forgo a backend and use d3.js only. However, while d3 provides its own way to manipulate the DOM and process event triggers, it does not provide a good way to manage the state of user-applied filters. So we added Vue.js for state management and the reactivity required to update the visualizations created by d3. Below is all of the libraries we used to create this dashboard:

  • Vue.js
  • d3.js
  • Vuex (for advanced state management)
  • Vue-Formulate (a lightweight form library to create the filter dropdowns on-the-fly)
  • moment.js (to handle datetime operations, which can be a pain in JavaScript)

In addition, we used Python for data cleaning and producing a CSV loaded by d3 to produce the visualizations.

Next Up

In the next post, we'll cover some of the technical parts of creating such a tool, building out a skeleton which we'll work on through the following three posts.


How to cite this Reflection: Xu P. (2021, February 20). The Making of a Dashboard - Part 1: Decisions on the Tech Stack. The Policy Lab. https://thepolicylab.brown.edu/reflections/making-of-a-dashboard-part-1

More Reflections

The Policy Lab completes longitudinal study on the effectiveness of Providence Public School District’s Multilingual Learners programs

October 1, 2021 PROVIDENCE, RI — The Policy Lab at Brown University today released the results of an evaluation of the Providence Public School District (PPSD) Multilingual Learners (MLL) programs…

ZenTables: Stress-free table publishing in Google Docs with Python

zentables01 What is ZenTables? Data scientists often need to report descriptive statistics presented in neatly formatted tables, which is a process surprisingly not well-supported by either Python or…

Welcome to Reflections

I’m excited to welcome y’all to Reflections! Before I explain, you need to first notice that our website is growing. You can learn more about our projects in, well, in our new Projects section! There…

The Making of a Dashboard - Part 4: Refinements and Stakeholder Feedback

In the previous post we discussed general design patterns that put Vue and d3 together. This post will focus on how we improved the UI/UX design of the first prototype (shown above) according to the…

Get Updates

Sign up to get updates on projects, events, and new episodes of our podcast, 30,000 Leagues

Subscribe

Check out our podcast

30,000 Leagues

Listen with Apple Podcasts
Listen with Google Podcasts
Listen with Spotify

thepolicylab@brown.edu(401) 863-3392

An official website of Brown University