Time management and documentation are critical elements in managing and fulfilling my work duties, but in them also resides enriched data to monitor my progress and evolution. The charts in the following dashboard were developed using the D3 JavaScript library that connects a dynamic CSV file linked from my daily tasks database to a CSS-generated SVG. As a result, this is a live dashboard that is updated dynamically from database to server and ultimately through the data visualizations. Scroll through the dashboard to the see just the first instances of D3-generated charts that I have developed. Then check out the data analysis workflow at the bottom of this page to get a quick glimpse of how data is generated and evolves into valuable information.
The pie chart to the right showcases the allocation of time dedicated for roles and responsibilities as the Design Technology Manager and a Project Architect at HOK’s Gulf Coast Region. The distribution notes the amount of Design Tech. Education & Documentation necessary to provide effective support in a very wide range of tools (see Tech. Analytics below).
The interactive scatter plot chart below is a visualization utilizing data from my daily task activities with the D3 JavaScript library for visualizing the distribution of design technology management tasks performed from the beginning of 2017 to the present. Hover over each data point to see the corresponding data label above the chart with more specific information. The term Support Hours noted in the data labels is used to define a wide range of tasks involving design technology, but is the subset of General & Project Design Tech. Support (noted in the pie chart). The scatter plot chart goes even further by differentiating the extent of tasks performed in support of the different offices throughout HOK.
Although this data collection is only for the past few months, an interesting trend is beginning to emerge in the scatter plot chart: the distribution of support is beginning to disperse more among various offices, particularly around the end of April and throughout May.
Throughout any given week, I use a variety of technology as Design Technology Manager for HOK (Gulf Coast Region), but also through my own endeavors in game programming, web design, and VR/AR technology. Both the bubble and bar chart below reflect my average utilization of technology itemized with each individual tool and presented graphically different to show the range and variation. The only exception to those listed here is Revit, which is and omitted for brevity and clarity.
DATA ANALYSIS WORKFLOW
The workflow to develop this dashboard requires the discipline to effectively manage the raw data regularly so that the live database linked to the data visualization stays current and can present valuable information.Airtable
Data input begins with daily task entries within an Airtable table (sample screenshot below). Various fields are populated with task information, such as the nature of the task, amount of time, design technology used in the task, and several other categories to assist with different analyses.MySQL
Data is exported weekly from Airtable as a CSV that is input into a MySQL database for further processing and sorting. Airtable has some limitations in formatting the data for a particular CSV configuration, but MySQL is able to perform these modifications in an web-based environment.JavaScript & D3
The modified CSV data is used along with JavaScript and the D3 (Data-Driven Documents) library to generate dynamic HTML and CSS based off of the linked CSV data.
HTML & CSS
With a basic HTML page framework, the programmed JavaScript and D3 is able to generate the rest of the HTML and CSS to present the data visualization on the web page.
