Press "Enter" to skip to content

Day: March 10, 2018

DWD Final: Annual Report

A definition of an annual report is a comprehensive report on a company’s activities throughout the preceding year. During January to February, I worked on the annual report for NYU Office of Global Services. Due to its “comprehensive” nature, it was inevitable to cover large amount of data, such as number of international students, visa types of international scholars, inbound data (NYC campus) and global campus demographics.

While the categories and wording weren’t so different from last year’s version, the most time-consuming process was contacting and collecting data from different teams. Furthermore, often the data had to be modified several times, which led me to revisit and edit the report again and again.

It was more time-consuming for other members in the office as well, because they didn’t have any other choices than going through me in order to make even a small change in numbers.

It led me to an idea of removing the middle step, and allowing different team members in the office to directly modify the data. To prototype the idea, I used the existing interactive annual report that contains relatively minimized information (compared with PDF version).


The report now consists of two pages: (1) a page for data input and (2) page with infographic results. Page 2 will be built based on data from page 1, which is only accessible by the office people – while page 2 is the public report for everyone.

Other graphs were built with chart.js since they only required small number of input. However, in case like student demographic over the world that contains at least 200 countries and populations – leaving it as a separate file seemed more reasonable. In fact, the current map uses Google Fusion because it’s easy to modify via Google Sheets. For my new prototype, I tried d3.js with topojson.

CSV format is easy to edit by Excel, just like Google Sheets, but one of the problems was that I didn’t want to collect stacks of CSV file every time it gets modified. As a solution, with multer.diskStroage I set up the file name to be always consistent as population.csv, thus the new file upload will only replace the old one.

Conclusion + Links

All icons by Dinosoft Labs

This structure will be useful if there’re more categories to present like its PDF version (which can possibly happen in our office.) The new system can achieve better results for both reporters and designers – because reporters don’t have to go through an extra step or feel sorry about making changes, while designers can solely focus on visualizing data.

GitHub: Code,
Annual Report: Page 1 + Page 2