Biomedical Research Workforce Dashboard
The Biomedical Research Workforce Dashboard displays data collected from National Institutes of Health employees, their education level, and their ethnicity. We parsed the data from dozens of Institutes and Centers (IC) covering thousands of employees over 45 years. Our dashboard was built on Vue.js with eCharts.js and D3.js as the graphing libraries. Many of my graphs were moved into the NIH Data Book in 2020 and are currently live.
My work at The National Institutes of Health is largely internal, so I have included a functional example of the work I did on the project as a substitute for a url.
If you'd like to learn more about the Biomedical Research Workforce's mission, visit their website.
Net eSolutions Project team: Jalia Evans, Henry Lavoo, Meghan Wlodarczyk, Cuong Tran, Brie Coyle
The National Institutes of Health is the largest biomedical research agency in the world. They ensure the future of American competitiveness in biomedical research and understand the strength in a diverse workforce. My team at Net eSolutions was tasked with organizing 45 years of demographic statistics and displaying them in an easy to read, interactive dashboard. Our work is internal, so I have provided interactive examples on this page.
My role was building an interactive dashboard that displayed gender and racial trends in the employees of both The National Institutes of Health workforce and The American Association of Medical College faculty. I used a combination of eCharts.js and D3.js to do this.
The project scope was very vague, which was challenging. We had to comb through hundreds of thousands of lines of data, organize it, and figure out how to best display it. We used a combination of Excel and Javascript to parse data into objects, then rendered graphs to display it. We quickly decided to add filters to the charts because the large datasets made details difficult to read.
We also included a table on the back of a flip card (you can access this table by clicking the "Flip the graph to see the table" below) for easier reading if the user wanted to get a closer look. It also allows for accessibility, as the table works with screenreaders when the graph cannot. We offer tables with all of our graphs, and I typically build both the graphs and the tables containing the data.
We couldn’t display data smaller than 11 people because of privacy concerns. This requirement caused our graphs to have several gaps that were confusing users. The graph would show blank spaces when results were not available, but our client wanted a clear indication there was hidden data. The graphing library's option of connecting missing datapoints (the second option in the graphs below) wasn't acceptable because it looked as if there is data where there isn't any.
I customized the graphs to create dashed lines where there that there was no data present, but that kept the graph from disconnecting unattractively or making the user think it was broken. These graphs show the original visual (With Gaps), the graphing library's solution of connecting empty datapoints (Connected Nulls), and the custom option I offered (My Solution).
A gray dashed line is a fairly universal symbol for missing information, so our client was very happy with the customizations I made. I really enjoyed getting to play with eCharts and create my own spin. My team now uses this technique with all of our line graphs.
One of the core charts that was on I started the project in my first week at the company. I had to learn my team’s development environment on the fly. Within two weeks, I learned Sass (our CSS preprocessor), Gulp.js (our javascript toolkit and local server launcher) and linting.
I learned Vue.js as a frontend framework immediately because I needed to be able to comb through several other developer’s months of work and understand their coding styles and quirks. I needed to learn graphing libraries on quickly and had to heavily customize almost every single graph. I learned how to navigate eCharts.js’ Chinese documentation and D3.js to customize maps to meet client’s wishes
This project was exhausting but it served as a useful crash course in graphing with Javascript.
The first chart I was assigned had some major problems. It was large and overly complicated, and I knew instantly that it wouldn't display the information well. Learning to disagree was extremely intimidating as a junior developer. I wanted to keep the client and my senior developer happy, so I spent two weeks building the very complex chart and it wasn't a good use of time. It was flashy, but ultimately useless. I met with the client and my senior developer and convinced them to split the graph into multiple views, and we all ultimately agreed it was the right decision.
I stood by my position to focus on the usability and function of the site, worked extra hard to add polish to the rest of the graphs, and ultimately made my client happy while still keeping the data readable.
Starting on a project that has been in the works for a year was daunting and confusing. I did pair programming with my lead developer when I got stuck, learned a lot about graphing libraries and watched how the team customized components. I learned that it’s about making the technology work for you and customizing it when you need to.
When using eCharts' graphing library, I saw that there was no documentation for a chart I was assigned to build. I had no idea where to go to find out information because the documentation was written in Chinese, but my senior developer helped me understand how to maneuver within libraries to make the graphs do what I needed them to do.