Dashboard in Client Side JS

A static implementation of an R-lang KPI dashboard using Bootstrap, ChartJS and Bootstrap (as well as D3.js).

Dashboard in website

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. 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 create a static website that you could just change the data fed to it and it would update the dashboard.

Repository link — https://github.com/CityofSyracuse/PerformanceDashboard

Proof of concept website — https://cityofsyracuse.github.io/PerformanceDashboard/

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:

1
“obj”,”OKR”,cardDescription,on_time,out_of_total,dataDescription,timeDescription, movement,color.

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

The two data points that are interpreted strangely 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.

This data can be seen in this csv located on the Innovation Team repository: https://github.com/CityofSyracuse/PerformanceDashboard/blob/master/data/mainPageData.csv

Website data mapped
Website data mapped
objOKRcardDescriptionon_timeout_of_totaldataDescriptiontimeDescriptionmovementcolor
obj1obj1kr1Reduce the general fund budget variance from YOLO 11% to 5%1334Departments Comp1lyings1ince last month00
obj1obj1kr2Reduce the general fund budget variance from 11% to 5%1334Departments Compl2yingsi2nce last month01
obj1obj1kr3Reduce the general fund budget variance from 11% to 5%1334Departments Comply3ingsi3nce last month-12
obj2obj2kr1Reduce the general fund budget variance from 11% to 5%1334Departments Complyi4ngsi4nce last month01
obj2obj2kr2Reduce the general fund budget variance from 11% to 5%1334Departments Comply5ingsi5nce last month12
obj2obj2kr3Reduce the general fund budget variance from 11% to 5%1334Departments Complyi6ngsi6nce last month12
obj3obj3kr1Reduce the general fund budget variance from 11% to 5%1334Departments Comply7ingsi7nce last month12
obj3obj3kr2Reduce the general fund budget variance from 11% to 5%1334Departments Complyi8ngsi8nce last month02
obj3obj3kr3Reduce the general fund budget variance from 11% to 5%1334Departments Complyin9gsi9nce last month01
obj4obj4kr1Reduce the general fund budget variance from 11% to 5%1334Departments Complyin10si10nce last mont-10
obj4obj4kr2Reduce the general fund budget variance from 11% to 5%1334Departments Complyi11ngs11ince last month11
obj4obj4kr3Reduce the general fund budget variance from 11% to 5%1334Departments Comply12ingsin12ce last month01

view rawmainPageData.csv hosted with ❤ by GitHub

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. A JavaScript script fetches that data and interprets it and fills it into the HTML template.

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

Key result structure
Key result structure
OKRcategory_or_deptvariablevalueon_timeout_of_total
281obj1kr1Assessmentapproved in time761230
294obj1kr1Auditapproved in time251330
307obj1kr1Bureau of Administrative Adjudication (BAA)approved in time951430
313obj1kr1Bureau of Zoning Appealsapproved in time521555
323obj1kr1Citizens Reviewapproved in time151630
211obj1kr1City Clerkapproved in time241730
336obj1kr1Common Councilcompliance perc61830
346obj1kr1Engineeringcompliance perc21930
356obj1kr1Lawperc change in calls342030
396obj1kr1Division of Sewerspotholes34100100
404obj1kr1DPWno_heat509090
412obj1kr1Executivetrash348888
420obj1kr1Financefire_response349090
428obj1kr1Firepolice_response777979
432obj1kr1Neighborhood and Business Developmentovergrowth348888
436obj1kr1Parkspotholes986868
445obj1kr1Policesewer348888
446obj1kr1WaterWater341213
294obj2kr1Commercial Renovation Permitsapproved in time251330
307obj2kr1Residential Renovation Permitsapproved in time951430
313obj2kr1New Residential Permitsapproved in time521555
323obj2kr1New Commercial Permitsapproved in time151630
211obj2kr1(ROW) Road Cut Permitsapproved in time241730
336obj2kr1(ROW) Road Curb Permitscompliance perc61830
346obj2kr2Health and Safety Violationscompliance perc21930
356obj2kr2Other Violationsperc change in calls342030
356obj2kr3Census Tract Callsperc change in calls34202310
396obj4kr1Potholespotholes34100100
404obj4kr1No Heatno_heat509090
412obj4kr1Trashtrash348888
420obj4kr1Fire Responsefire_response349090
428obj4kr1Police Responsepolice_response777979
432obj4kr1Overgrowthovergrowth348888
436obj4kr2Potholespotholes986868
445obj4kr2Sewersewer348888
454obj4kr2Blue Binsblue bins348787
463obj4kr2Water Mainswater mains348888
472obj4kr2Trashtrash348686
481obj4kr2Overgrowthovergrowth348585
490obj4kr2Malfunctioning larmsmalfunctioning alarms347878
366obj3kr1Commentscomments52-3276
367obj3kr1Reactionscomments15-5425
368obj3kr1Sharesreactions242595
372obj3kr2Fire Responsecityline satisfaction34645
384obj3kr3census tract callscensus tracts6-102

view rawcombined_percentage_data.csv hosted with ❤ by GitHub

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.

Financial objective labels. These values are filled in from the FiscalObjective2.csv
Financial objective labels. These values are filled in from the FiscalObjective2.csv
OKRcategory_or_deptvariableproject_dollarsauthorized_dollarsspent_dollarsunspent_dollarsvalue
281obj1kr2DPW Projectsspent76000001234234232423430523401234232
281obj1kr2Enginneering Projectsspent7234612000002344330234234501324234
281obj1kr2General City Projectsspent723423612243234323423052344234014234234
281obj1kr2Police Projectsspent723424361223423323423405234234015234234
281obj1kr2Parks Department Projectsspent7234234612342342305016
281obj1kr2Fire Department Projectsspent7612342342305234234017234234234
281obj1kr2Water Projectsspent7623234234122342342330242342345018234234
281obj1kr2Sewer Projectsspent7623423423423412302342345013242349

view rawFiscalObjective2.csv hosted with ❤ by GitHub

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.

Financial objective labels. These values are filled in from the keyResultBannerData.csv
OKRcategory_or_deptvariablevalueon_timeout_of_total
obj1kr1titleon-time686588
obj1kr2titleon-time6466600
obj1kr3titleon-time6466600
obj2kr1titleon-time686588
obj2kr2titleon-time6400
obj2kr3titleon-time5400
obj4kr1titleon-time686588
obj4kr2titleon-time645444
obj3kr1titleon-time5400
obj3kr2titleon-time686588
obj3kr3titleon-time645444

view rawkeyResultBannerData.csv hosted with ❤ by GitHub

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. These values are filled in from the combined_data_v4.csv
Chart labels. These values are filled in from the combined_data_v4.csv