Posts from the Computing Category

+ high-res version

Visualizing Follower Growth at Twitter

I worked with the Visual Insights team of Data Science and Analytics over at Twitter this year as a data visualization scientist. My work here largely involved analyzing and narrating large and interesting data sets (or colloquially ‘big data’) in an understandable manner to general audience visually.

I worked on two projects there –

World Cup Team followers

This was a project was shipped on the Twitter Interactive website. I made this because I was working at Twitter during the 2014 World Cup. This project involved doing research on what forms of visualization strategies work for large datasets which ended up being the choices that needed to be made. e.g. binning vs overlaying; saturation vs multiplicity etc. Follow the link to see the project –

VIT (Verified accounts) followers

This was a similar project to the one above but focused primarily on Verified users and their follower growth. I made an internal tool to help other teams work with this data both for online as well as print media.

Some of the images are obfuscated and taken out of context for privacy concerns.

Myslite

Myslite was unified music service application that I made. It is a music hub that integrates music services from Last.fm and combines them with location services from Here Maps and social network like Twitter to provide a superior listening and music discovery experience.

It enables people to share the music they are listening to on a map in real-time as well as view information about friends’ playlists et al. It also displays personalised music recommendation and worldwide music trends in major cities responsively on a map. I was inspired by the semantics of music while designing the user interface for the app. In a way similar to musical notes, ancient languages often had a meaning attached to individual syllables or letters. This was a reason behind using the archaic Glagolitic typography as a theme for the interface. It is called ‘Myslite’ which means thought in Glagolitsa. It is a native Windows 8 application made entirely in C# and XAML.

Above are some of the screenshots of the last working prototype of the app (no, they are not wireframes). If you are interested in making a fork feel free to ping me.

+ high-res version

Smarter Energy Initiatives at IBM Research

I worked with IBM Research as a Research Engineer and Data Artist to produce visualizations for some of IBM’s smart-energy initiatives. My work was majorly concentrated on user-experience research, interaction design and engineering. I worked with the Smarter Energy Group to create real-time interactive visualizations for data coming from a smart electrical micro-grid which was deployed in specific sites [Project Link]. These responsive interfaces are currently deployed in a settings with large touchscreen-kiosks as well as computers, tablets and phones across various test-sites in Southeast Asia. I worked with D3.js, Ember.js and Django during this period. Due to various non-disclosure agreements, I am not able post more information about my work here.

Another project that I worked on, involved modeling demand-response methodologies into interfaces by using interactive visualizations about household energy consumption. The aim here was to motivate the user and provide him/her with incentives for reducing the energy consumption. Below are some screenshots of the final working front-end that I designed.

Actual screenshots of the final experiences. (Note: devices simulated)

Actual screenshots of the final working interfaces I created. (Note: devices simulated)

about:memory for real people aims to convey memory consumption statistics to web-developers as well as normal users. This was a project I did for Mozilla but never ended up submitting it for the summer of code.

The current about:memory page is primarily used by Firefox developers for various debugging purposes. Though the information provided on the page is exhaustive and full of tech jargon (which is awesome if you understand it), but its hard to interpret for everyday users. The plan was to use various forms of data visualizations for expressing the exhaustive details in a concise manner to users, while giving power users the option to view all the unabridged data.

The primary objectives in this project were to –

  1. Express information and functionalities in the easiest possible manner.
  2. Keep the data unabridged.
  3. Make the new page itself consume as less memory as possible. (this was a bummer considering visualizations are very memory-philic).

Visualizing the memory tree

This is the current about:memory page –

Previous about:memory

Nick Nethercote and Felipe Gomes from Mozilla helped me understand the structuring of the page.

The new design uses 3 primary forms of data visualizations – donut charts, line charts and sunburst charts to account for both basic as well as verbose views. It is kept visually in sync with the about:healthreport page.

Features of the new design

HEADER

  • The new header allows users to switch between the Raw Data view and the new Memory Report view. The Raw data section would display a similar text based memory tree like the one on the current about:memory page. The Memory Report section is illustrated below.
  • The three buttons on the header in the top right corner, will account for GC (garbage collection), CC (cycle collection) and minimize memory usage functionalities.

KEY STATS AND FUNCTIONS

Refer to the left sidebar shown below.

  • Functionalities to load and save reports.
  • Combined statistics about memory consumption by Tabs, Add Ons and System. “System” here will be a bucket for all the memory compartments, allocations and listings that do not contribute to either Tabs or Add-Ons.
  • Functionalities to close inactive tabs (i.e. tabs that are still about:blank in the memory because of the “Do not load tabs until selected” feature).
  • Functionalities to disable add-ons, extensions and plugins.

THE GROUPED VIEW

Three main views – Grouped, Live and Verbose will be used to display the various visualizations.

In the Grouped view, users can see two major categories namely – the tabs and the Add-Ons. Donut charts are used to illustrate the same because they give an abstract view of the proportions of memory used by each tabs just like pie-charts. Hovering over a partition of the donut chart will reveal more information about the consumption statistics by that partition. In the case of a large number of tabs or add-ons, people can alternatively switch to a list-view just in order to view precise data related to all the tabs in a more convenient manner. The list view will also allow users to sort tabs in ascending or descending orders and also to selectively close tabs.

Grouped View for about:memory

Grouped view for about:memory

THE VERBOSE VIEW

The Verbose view is essentially a sunburst chart showing the details of the verbose memory allocation tree. A sunburst chart is a hierarchical form of a donut chart that allows users to drill down to see metadata about each partition. A sunburst chart is a visualization that allows comprehensive details to be accommodated in abstract forms in order to reduce the so-called cognitive friction . As above, hovering over the partitions of the chart will reveal more information about the consumption statistics.

Verbose view for about:memory

Verbose view for about:memory

THE LIVE VIEW

The Live View enables people to view real-time information about Firefox’s overall memory consumption. Line charts as shown below would be used for the same. The update frequency is arbitrarily chosen to be 1.5s.

Live view for about:memory

Live view for about:memory

From several posts on the MemShrink project blog, I observed that developers were keen to find out memory leaks due to pages/add-ons/extensions from the memory tree on about:memory. Though this project focuses more on everyday users, power users and developers can always benefit if there is an option of an advanced view that can point out possible memory leaks, identify and aggregate extensions’ compartments or highlight entities that consume disproportionately large amounts of memory or portray abnormal behavior.

Mike Bostock‘s D3.js was chosen to be used because of my previous experience with the same. Some of the graphs above are from the D3.js samples.

+ high-res version

MinTwit – a minimal Twitter library

MinTwit is a Twitter library for WinRT based apps(Metro style) for Windows 8, written in C#. The current version provides – OAuth Authentication, updating status, fetching user timeline and search functionalities. Meanwhile, other RESTful calls are brewing in some part of my computer.
Download/Fork from Github.

 

+ high-res version

Low Carbon living

Carbon Champ was an idea which I initiated and carried forward at The No2Co2 Project. The idea was to make Indian Citizens aware of their own electricity consumption, carbon footprint and help them map these figures to their electricity bill, and thus react to the ongoing changes in the environment and the climate. The results were two tangible phone applications – One to help individuals “realize” their carbon footprints, the other to help them “minimize” it.

View/Download the apps.

Sphero is a virtual sphere that helps people track the things that they care about from their smartphone. The aim was to get the phone to “talk” with objects which can cannot compute. We explored the idea of a personal cloud which could compute on behalf of these objects. So the person has to tag the important stuff, like wallet, keys, books etc. with an NFC or an RF tag and let the system track the things. People can also customize profiles for the specific times of the day e.g. “When I am travelling, be extra careful of my wallet and keys”. A social network integration allows friends to exchange real-life objects and keep track of who has borrowed what. The concept was left largely open ended by us but the applications of the concept were numerous – right from a theft detector to a gaming rig.

We used the Arduino platform for prototyping the proof-of-concept.

Sphero_36x24in_poster_web

I was linked with Microsoft in many ways during my undergraduate. A developer, a student partner and later as tech-evangelist and proctor for Windows Phone and WinRT. I also worked with teams at Redmond to help develop a part of the native app for Wowzapp, which was a worldwide hackathon for Windows organized in 2012.