portfolio

Dashboard in Client Side JS

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

Edward C Deaver IV

Aug 31, 2019 • 6 min read

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

obj	OKR	cardDescription	on_time	out_of_total	dataDescription	timeDescription	movement	color
obj1	obj1kr1	Reduce the general fund budget variance from YOLO 11% to 5%	13	34	Departments Comp1lying	s1ince last month	0	0
obj1	obj1kr2	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Compl2ying	si2nce last month	0	1
obj1	obj1kr3	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Comply3ing	si3nce last month	-1	2
obj2	obj2kr1	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Complyi4ng	si4nce last month	0	1
obj2	obj2kr2	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Comply5ing	si5nce last month	1	2
obj2	obj2kr3	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Complyi6ng	si6nce last month	1	2
obj3	obj3kr1	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Comply7ing	si7nce last month	1	2
obj3	obj3kr2	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Complyi8ng	si8nce last month	0	2
obj3	obj3kr3	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Complyin9g	si9nce last month	0	1
obj4	obj4kr1	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Complyin10	si10nce last mont	-1	0
obj4	obj4kr2	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Complyi11ng	s11ince last month	1	1
obj4	obj4kr3	Reduce the general fund budget variance from 11% to 5%	13	34	Departments Comply12ing	sin12ce last month	0	1

view raw mainPageData.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

	OKR	category_or_dept	variable	value	on_time	out_of_total
281	obj1kr1	Assessment	approved in time	76	12	30
294	obj1kr1	Audit	approved in time	25	13	30
307	obj1kr1	Bureau of Administrative Adjudication (BAA)	approved in time	95	14	30
313	obj1kr1	Bureau of Zoning Appeals	approved in time	52	15	55
323	obj1kr1	Citizens Review	approved in time	15	16	30
211	obj1kr1	City Clerk	approved in time	24	17	30
336	obj1kr1	Common Council	compliance perc	6	18	30
346	obj1kr1	Engineering	compliance perc	2	19	30
356	obj1kr1	Law	perc change in calls	34	20	30
396	obj1kr1	Division of Sewers	potholes	34	100	100
404	obj1kr1	DPW	no_heat	50	90	90
412	obj1kr1	Executive	trash	34	88	88
420	obj1kr1	Finance	fire_response	34	90	90
428	obj1kr1	Fire	police_response	77	79	79
432	obj1kr1	Neighborhood and Business Development	overgrowth	34	88	88
436	obj1kr1	Parks	potholes	98	68	68
445	obj1kr1	Police	sewer	34	88	88
446	obj1kr1	Water	Water	34	12	13
294	obj2kr1	Commercial Renovation Permits	approved in time	25	13	30
307	obj2kr1	Residential Renovation Permits	approved in time	95	14	30
313	obj2kr1	New Residential Permits	approved in time	52	15	55
323	obj2kr1	New Commercial Permits	approved in time	15	16	30
211	obj2kr1	(ROW) Road Cut Permits	approved in time	24	17	30
336	obj2kr1	(ROW) Road Curb Permits	compliance perc	6	18	30
346	obj2kr2	Health and Safety Violations	compliance perc	2	19	30
356	obj2kr2	Other Violations	perc change in calls	34	20	30
356	obj2kr3	Census Tract Calls	perc change in calls	34	202	310
396	obj4kr1	Potholes	potholes	34	100	100
404	obj4kr1	No Heat	no_heat	50	90	90
412	obj4kr1	Trash	trash	34	88	88
420	obj4kr1	Fire Response	fire_response	34	90	90
428	obj4kr1	Police Response	police_response	77	79	79
432	obj4kr1	Overgrowth	overgrowth	34	88	88
436	obj4kr2	Potholes	potholes	98	68	68
445	obj4kr2	Sewer	sewer	34	88	88
454	obj4kr2	Blue Bins	blue bins	34	87	87
463	obj4kr2	Water Mains	water mains	34	88	88
472	obj4kr2	Trash	trash	34	86	86
481	obj4kr2	Overgrowth	overgrowth	34	85	85
490	obj4kr2	Malfunctioning larms	malfunctioning alarms	34	78	78
366	obj3kr1	Comments	comments	52	-32	76
367	obj3kr1	Reactions	comments	15	-54	25
368	obj3kr1	Shares	reactions	24	25	95
372	obj3kr2	Fire Response	cityline satisfaction	34	6	45
384	obj3kr3	census tract calls	census tracts	6	-10	2

view raw combined_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

	OKR	category_or_dept	variable	project_dollars	authorized_dollars	spent_dollars	unspent_dollars	value
281	obj1kr2	DPW Projects	spent	7600000	12342342	32423430	52340	1234232
281	obj1kr2	Enginneering Projects	spent	72346	1200000	2344330	23423450	1324234
281	obj1kr2	General City Projects	spent	7234236	12243234	3234230	523442340	14234234
281	obj1kr2	Police Projects	spent	72342436	1223423	32342340	52342340	15234234
281	obj1kr2	Parks Department Projects	spent	72342346	12342342	30	50	16
281	obj1kr2	Fire Department Projects	spent	76	12342342	30	52342340	17234234234
281	obj1kr2	Water Projects	spent	7623234234	12	2342342330	2423423450	18234234
281	obj1kr2	Sewer Projects	spent	76234234	23423412	30	23423450	13242349

view raw FiscalObjective2.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

OKR	category_or_dept	variable	value	on_time	out_of_total
obj1kr1	title	on-time	68	65	88
obj1kr2	title	on-time	64	66	600
obj1kr3	title	on-time	64	66	600
obj2kr1	title	on-time	68	65	88
obj2kr2	title	on-time	64	0	0
obj2kr3	title	on-time	54	0	0
obj4kr1	title	on-time	68	65	88
obj4kr2	title	on-time	64	54	44
obj3kr1	title	on-time	54	0	0
obj3kr2	title	on-time	68	65	88
obj3kr3	title	on-time	64	54	44

view raw keyResultBannerData.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