Press "Enter" to skip to content

→ Alice Sun / Blog Posts

Untrack Me

Assignment 06: Hack your tracker / Untrack me

Develop a method to hack one (or more) of your tracking apps. Write a short reflection about your hack – how did you do it? What information is gained or lost? What are the implications of hacking your data in the way that you did?

  • Obfuscate data/circumvention collection assignment. Develop a method to hack one (or more) of your tracking apps. Software or hardware solutions or a combo of both are welcome. Document your process.
  • Make an instructable about your hack (e.g. DNA Spoofing); you don’t need to make a video, but you should outline the steps to your circumvention in a public place, like Instructables.

So far I’ve been using both Reporter Application and Chrome Extensions along with Chrome History, however, for this week’s activity using Chrome Extension seemed to be a suitable target. Although Reporter Application also tracks various data such as distance and temperature, because it’s “reporting” system – I can always refuse to submit my report.

The Chrome site tracking happens all the time, but in order to have the history in json format, I’m weekly using another extension called History export. There’s another way to download the history as csv format. For my convenience, I use the extension. However, the extension does not include IP location so I have to manually type in the information.

The best way to obfuscate the Chrome history tracking is simple: usage of incognito window Under incognito, it’s possible to avoid the auto-tracking of my website visits – therefore, those won’t be exported to json file at the end of the week. I’ve actually been using this method when I revisit some websites in order to check their IP locations; because as I mentioned above, they don’t automatically get saved and exported. All the extensions are off in incognito window as default, so it’s important to allow access of IP Tracking Extension.




Assignment 06: Reflection

Write a short reflection about your hack – how did you do it? What information is gained or lost? What are the implications of hacking your data in the way that you did?

This week’s activity was relatively simple, due to the nature of Chome browser that is easy to adjust tracking options. Not only that, but also it was something I’ve been intentionally doing since the beginning of website tracking to collect IP location. It derived from the idea that revisiting of websites (to recheck IP location) shouldn’t be included in Chrome history list – because it’s only part of “tracking” process, not a natural visit. Consequently, my website visits during the process of rechecking IP locations are lost forever, under my decision. However, for certain decisions, there are always room for a debate. It made me rethink about a correlation between arbitrary decisions and data cleansing.


Research Presentation

Presentation Slides: Income and Lifespan Inequality

All reference sources are included in each slide under the speakers notes:


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


And Our Faces, My Heart, Brief As Photos

An acrostic poem generator using some existing peoms from And our faces, my heart, brief as photos by John Berger.

Inporting 4 different poems: Leaving, Waterfront, A Forest I Knew, and Factory by John Berger; then combine them as one list. Initially I started with only a single poem, but soon I realized that an acrostic generator requires an adequate amount of source text, especially because I’m collecting lines, not words.

Now the list contains all lines from four different poems. The following code checks the first letter [0] in each line, and creates a dictionary of lines in alphabetical order.

The dictionary is completed, although it’s still missing some letters (those ones won’t be available to form the poem). Then, set up a word that will be the seed: first letters of each line. Once the seed word is decided, the next step is going through initials{} dictionary and check if it contains any sentence starting with the same letter. Then, it will choose randomly among the list of sentences, if there are more than one.




Box2D & Typeface

More typographic experiment based on Daniel Shiffman’s Polygon example using Box2D. Typeface: Brown Bold Full Screen, Code

  • How to build a physical boundary out of textToPoints()?
  • reference: Patrik Huebner’s typographic example


Quant Self Intervention

Assignment 05: Quant Self Intervention

Design or prototype an intervention that would help you to change your behavior based on the data you’ve gathered or based on the service you designed in you Quant Self Service. Tech or community or social based interventions are fair game.

  • make your intervention tangible; make it visual or physical in some way.
  • justify how your intervention works and why it is convincing for you and why it might (or might not) be a useful strategy for others.
    You might consider: – paper prototypes, a slide deck, a screen dummy, video, etc – using your quant self service idea as a foundation to build your intervention on

Language Usage Tracking

The following application only focuses on writing thorough keyboard in either mobile device or pc. If you are a new user, it will ask the access to data about when you change your language, because it can be sensitive information. Once the user confirms, it lands to the Welcome (Get Started) page and will set up language types and devices to synchronize.


After the registration, the application won’t ask accessibility question unless the user desires to stop the process of collecting data. Instead of Welcome page, now it will directly land on profile page and shows the average usage of different languages, list of languages, and list of synchronized devices. This page also has a role as setting page, so any visual change, language and device reset can be done in here as well. In order to see more details about data, tap the left top button and it will land on Time Map page. The default view of Time Map page is daily based.

Time Map

Once in the Time Map page, the user can navigate to further information as weekly based, monthly based, or yearly based data. Each page’s graphic is color-coded according to language, which is adjustable element in setting page. Through these Time Map sections, the user can discover such aspects like: “I use more Korean during weekends”, “English is my main language while I’m not on vacation”, and “My usage of English is increasing every year”.

Overall Wireframe



Assignment 05: Reflection

A short paragraph or phrase on what you learned this week.

There has been some confusion on the order of documentation posts, so I merely spent time reorganizing and making some updates on existing posts. The previous comment by Joey on assignment #6 is now under the proper post as a copy. It is definitely my mistake to carelessly overlooked the assignment details. On another hand, I realized that my assignment #4 and #5 were in a combined form after looking at some other classmates’ work – and how I’ve been often thinking user research and design as one chunk of practice, but they’re not.

It’s important to conduct user research in isolated manner from the design work itself, especially to keep objective view in both areas. One of the best ways to increase accuracy is testing many users as possible – which wasn’t an option in my assignment #4, because I was the only user to form the persona figure. At the same time, I’m aware that this service is targeted towards very limited user pool: people who speak more than one language. However, I still decided to proceed the idea regarding that this class is more about “I” and personal data.

p5 & Typeface

Assignment 4 was based on one of generative font examples in Processing. The original version could directly input text but I wasn’t successful in transferring the part. Full ScreenCode

Second trial based on Daniel Shiffman’s Particles code and textToPoints() example – interactive with mouse hovering and clicking. Typeface: GT Sectra Super Full ScreenCode