Press "Enter" to skip to content

Category: Dynamic Web Development

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


Data Storage and MongoDB

This is the modified version of week 2 project, with few changes. The online submit form looks the same, but now the data gets stored in MongoDB. Also, reflecting last week’s feedback – now when the answer is submitted the section scroll directly goes to bottom of the page.

The process got bit delayed due to constant authentication error.




Remake of one of my old projects with Express.js. The project is a collection of survey answers about Marcel Duchamp’s artwork – and further extending it via online submit form on the bottom of the website.  Code