Skip to content

Instantly share code, notes, and snippets.

@jyohjyoh
jyohjyoh / README.md
Last active August 29, 2015 14:06
80/20 Rule Visualized in Application Usage Pattern

This is a d3 visualization version of the data published in CHI 2013 Case Study by Ji-Young Oh and Ananth Uggirala.The chart demonstrates that there are top 20-30 commands that takes up 80% of usage in an application. The pattern is used to re-design the UI of the application. The data only represents the small part of the application (~1%), which is the sample of snapshot of four month period in year 2010.

The charts loads data stored in tsv (name, value, cumulative columns) and shows transition from the value (%usage) to the cumulative usage. To demonstrate the increment pattern, I customized tick marks by the values in the data. The y-axis is rendered twice, one for the long grid line for each value point, and then y-axis label for important threshold values (maximum and 80% point mark for cumulative usage). Overall, the code follows the typical pattern of creating a bar chart from D3.

For the pattern I followed, refer to: [Bar Chart](http://bost.ock