Syracuse Performance Dashboard in Client Side JavaScript

For an internship at the Syracuse Accountability Performance and Innovation ( Innovation team / iTeam) I was tasked with porting the current dashboard to something besides its current state of being 5+ individual R (R lang – data analysis language) scripts that would render the website. The goal was to make it easier to update the site. My implementation relied on hosting the site on Github pages, using ChartJS to create the graphs due to using SVGs it had a lighter performance hit than D3 based charting libraries. The code can be found here on the City of Syracuse’s Github repository: https://github.com/CityofSyracuse/PerformanceDashboard

Table of Contents

Description:

For an internship at the Syracuse Accountability Performance and Innovation ( Innovation team / iTeam) I was tasked with porting the current dashboard to something besides its current state of being 5+ individual R (R lang – data analysis language) scripts that would render the website. The goal was to make it easier to update the site. My implementation relied on hosting the site on Github pages, using ChartJS to create the graphs due to using SVGs it had a lighter performance hit than D3 based charting libraries. The code can be found here on the City of Syracuse’s Github repository: https://github.com/CityofSyracuse/PerformanceDashboard

Client:

I was an front-end developer intern at Syracuse Accountability Performance and Innovation ( Innovation team / iTeam)

Technologies used:

Notes:

The performance dashboard operates in a 3 layer design. The first layer is a broad view of all of the objectives that exists on the home page. The second layer is the specific objective pages that focus on the key reuslts in that objective. The third layer is a deeper dive on a specific key result. I was not able to tackle the problem of creating individual deep dive pages for the third layer 3, but I was able to achieve creating pages for the 1st and 2nd layer.

Timeline:

I worked on this at the same as I was a storytelling intern (content production) at the Syracuse Innovation Team.

Planning:

I worked with Jesse Cases a former data analyst on the Syracuse Innovation Team to understand how the dashboard was created and understand the major pain points in it. The major issue was the performance dashboard was 5 or more R scripts that had to be ran in a specific order to generate the HTML. So my thought upon hearing this was to crate a static website that you could just change the data fed to it and it would update the dashboard.

Development:

Creating a data structure:

I created the data structures I envisioned for the site by having them broken up into separate CSV files. The way I constructed these files was using D3 to initially to parse a CSV data dumps into separate Objectives, main page, and key result banner data. Within each of these file is the following header: “obj”,”OKR”,cardDescription,on_time,out_of_total,dataDescription,timeDescription,movement,color

Home page data structure:

This is from the mainPageData.csv https://github.com/CityofSyracuse/PerformanceDashboard/blob/master/data/mainPageData.csv

A JavaScript script fetches that data and interprets it and fills it into the HTML template.

City of Syracuse objective 1 key result 3 labels
Above: A labeling of objective 1 key result 3.

The two data points that are interprited strangley are “movement” and “color”.
If “movement” is:

  • 1 – an arrow pointing “up” will be presented.
  • 0 – a double horizontal arrow will be presented.
  • -1 – an arrow pointing “down” will be presented.

If “color” is:

  • 2 – the top rectangle will have a green background, and “success” will be shown.
  • 1 – the top rectangle will have a yellow background, and “On our way” will be shown.
  • 0 – the top rectangle will have a red background, and “Problem Solving” will be shown.

Key result data points structure:

Note: there are no color or movement fields. Also, category_or_dept is the department the field is for. “variable” is what we are measuring. “value” is our percentage value. “on_time” is the amount of money that has been spent. “out_of_total” is the amount of money allotted.

This is from the combined_percentage_data.csv https://github.com/CityofSyracuse/PerformanceDashboard/blob/master/data/combined_percentage_data.csv

A JavaScript script fetches that data and interprets it and fills it into the HTML template.

Objective 1 Labels
Objective 1 labels. These values are filled in from the combined_percentage_data csv.

Extended key result financial data:

There are key result points that stray from the norm and have extended financial data with them, these are Fiscal Objectives.

This is from the FiscalObjective2.csv
https://github.com/CityofSyracuse/PerformanceDashboard/blob/master/data/FiscalObjective2.csv

A JavaScript script fetches that data and interprets it and fills it into the HTML template.

Financial objective labels
Financial objective labels. These values are filled in from the FiscalObjective2.csv

Key result paragraph data:

For each objective page there are key result banners that appear before the specific data points. These are summations for the category. This data is in a keyResultBannerData.csv.

This is from keyResultBannerData.csv. https://github.com/CityofSyracuse/PerformanceDashboard/blob/master/data/keyResultBannerData.csv

A JavaScript script fetches that data and interprets it and fills it into the HTML template.

Key Result Banner Labels
Financial objective labels. These values are filled in from the keyResultBannerData.csv

The charts data:

The charts are loaded in from the combined_data_v4.csv. It has some unique values compared to the other data structures. OKR, date_or_period, category_or_dept, variable, value.

The value of date_or_period is the numbers 1-12 corresponding to the number of a month. OR, if the value is outside 1-12 it may be a UNIX time stamp to indicate an exact day.

The file can be found here: https://github.com/CityofSyracuse/PerformanceDashboard/blob/master/data/combined_data_v4.csv

A JavaScript script fetches that data and interprets it and fills it into the HTML template.

Chart Labels
Chart labels. These values are filled in from the combined_data_v4.csv

Styling:

When I received the source files the site was not correctly set up to use Bootstrap. In my restructuring of the site I created Bootstrap compliant templates for each page. Some styling issues that I encountered were making sure the sites were ADA compliant in terms of contrast levels. Also, I wanted to make sure there were tool-tips (the message that pops up when you hover) on the chart points.

Deployment:

The site uses github pages to host the site so as to reduce the IT cost that curretly exists.

Current Situation:

This project was not deployed to the real world.

Follow
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!