Nov 20, 2014

Drawing a line chart for iPad

What seemed like an easy job at the beginning, turned out to be a bit more challenging later: drawing a dynamic interactive line chart for iPad, with basic features like pan and zoom, with focus+context visualization, with around 2000 data points.


1. Draw the chart with CAShape layer:

I created a UIBezierpath, made this Bezier path to be the 'path' attribute of the shape layer, so this path is now the 'shape' for the shape layer.

Now for zooming (using pinch gesture)  I was rendering the path every time, that is regenerate all the points in the path, and drawing the whole path over again, which is obviously a slow process. I could just change the scaling factor of the layer, but then the line becomes blurry and thick. But calculating the 2000 data points takes a fare amount of time, and there should be a better way to do this.

2. Scroll with scrollview:

Then I found this thing called scrollview, which does an excellent job with scaling, but for zooming I needed better. And the scrolling itself seemed slower with this large path. Scrollview takes care of scrolling and paging with swipe gesture.




3. Performance enhancement: use several segmented paths, instead of one large path:

It turned out that performance of scrolling is much better if I draw several smaller CAShapeLayer than one large one, the longer the path is, the slower it is to render, but if I have several small paths, the rendering is smooth. so I created a data structure that stored all the small path segments, and then I put all the paths inside one scrollview.
After doing this scroll became very fast. Now it is time to fight with zooming again.




4. Use of tiled layer for better zooming:

Then I came to know about this another thing called CATiledLayer:
after improving the performance with the use of scrollview and multiple segmented paths, it's time to make the line chart zoom with pinch gesture. The same problem persists, I can directly change the scaling factor, but that makes the line very blurry, and I can recalculate all the points in the path which make it super slow and almost non-responsive. Then I found about the tiles layer approach, which is basically making the underlying layer of the view an instance of CATilesLayer, so whatever we draw in that view, are actually drawn in multiple tiles. So instead of drawing the Bezier paths inside shape layers, now I am drawing the Bezier paths inside a tiled layer. This tiles layer is good for zooming, why? Because it takes care of the scaling factor, redraws the content with appropriate number of tiles as we zoom, keeping the drawable object sharp!  That's exactly what I wanted. But only if that was all!




5. zoom only horizontally:
6. double layering, keeping the line crisp:


Aug 21, 2014

Free data viz books

E book from visualization start up Infoactive CEO Trina Chiasson and Northwestern University Statistical Programmer Dyanna Gregory:
http://orm-atlas2-prod.s3.amazonaws.com/pdf/c8343f6ef7ec9b5380590bab54d6715f.pdf

Dr Tamara Munzner's info viz book's early draft copy on her website: http://www.cs.ubc.ca/~tmm/courses/533/book/

Aug 14, 2014

Viz examples


D3 examples:
https://github.com/mbostock/d3/wiki/Gallery

Census:
https://www.census.gov/dataviz/
Census for STEM:
http://www.census.gov/dataviz/visualizations/stem/stem-html/

NY times:
http://www.nytimes.com/upshot/ Mostly analysis, but they also provide interactive viz with most reports.
http://www.nytimes.com/interactive/2014/upshot/mapping-the-spread-of-drought-across-the-us.html


Blogs:

http://datastori.es/
http://fellinlovewithdata.com/

Flowing Data:
http://flowingdata.com/

http://www.visualizing.org/

http://www.tableausoftware.com/public/gallery

List of tools:
http://selection.datavisualization.ch/

Twitter visualizations:
http://twitter.github.io/interactive/newyear2014/



Summary papers for quick look up:

J Heer: Visualization zoo
http://queue.acm.org/detail.cfm?id=1805128

J Heer, Ben S: Interactive dynamics for visual analysis
http://queue.acm.org/detail.cfm?id=2146416

Jun 17, 2014

Human-Computer Interaction: UI & UX হিউম্যান-কম্পিউটার ইন্টারঅ্যাকশন:ইউসার ইন্টারফেস ও ইউসার এক্সপেরিয়েন্স

এখন আমরা অনেকেই মোবাইল এ app বানাই, কিন্তু সব app সমান জনপ্রিয় কিংবা লাভজনক হয়না, কীভাবে বুঝব আমার এত কষ্ট করে বানানো app সফল হবে কিনা! যে দু'টা জিনিস একদম এক লাইন কোড লিখার আগেই ভেবে নিতে হবে:
- আমি কাদের জন্য বানাচ্ছি (who are the users)
- এই সফটওয়্যার/app ব্যবহার করে মানুষ কী কী করতে পারবে (what are the tasks)
HCI এর বেশ কিছু মৌলিক ধারণাগুলোর মাঝেও এই বেপারগুলোই বার বার আসে। আজকে এরকম দুইটা মূল ধারণা নিয়ে কথা বলি।

১. ইউসার ইন্টারফেস: 
উদাহরণ: কম্পিউটার এর স্ক্রিন, কীবোর্ড, মাউস, মোবাইল এর টাচ-স্ক্রিন, কী প্যাড,  এ.টি.এম. এর স্ক্রিন,- অর্থাত যা কিছু ব্যবহার করে আমরা কম্পিউটার কে নির্দেশ দেই।

ঠিক কোন বাটনটা কোন বাটনের পরে থাকবে? ক্যানসেল আর ও.কে. বাটন কি পাশাপাশি রাখব? বেশি কাছে রাখলে মানুষ ভুলে একটার জায়গায় আরেকটায় ক্লিক করে ফেলতে পারে, আবার বেশি দূরে রাখলে খুঁজে পাবে না।  আবার অনেকে বেশি মাউস টানাটানি পছন্দ করে না, তাদের জন্য তো একটা কীবোর্ড শর্টকাট রাখা দরকার।
মানুষ কি পুরো পেজটা পড়ে  দেখবে? নাকি কোনো নির্দিষ্ট শব্দ খুঁজে বের করে ঐ অংশটুকুই পড়বে ? তাহলে তো একটা Search অপশন অবশ্যই রাখতে হয়।
পেজ এ লাল, নীল, হলুদ, সবুজ দুনিয়ার রং ব্যবহার করলাম, তাও লোকে বলে পেজটা খ্যাত লাগে, তাহলে কী কী রং বেবহার করা উচিত ছিল? মানুষ ফেসবুক এত ব্যবহার করে, তাহলে অর্কুট(২) কেন ফেল করল? ফেসবুক কেন নীল আর গুগল কেন বর্ণিল?
ফেসবুকের সব এডগুলি ডানদিকে থাকে কেন?  আর প্রোফাইল পেজ এ সব পোস্ট ডান দিকে, আর অন্য জিনিস বাঁ কোনায়, এইগুলি কারা  কীভাবে ঠিক করে?

অর্থাত, UI ডিসাইন এ যেই জিনিসগুলি নিয়ে আমাদের চিন্তা করতে হয় সেগুলো অনেকটা এরকম:
- পেজ এর বর্ণ বিন্যাস (কালার পালেট)
- লেআউট
- ইনপুট এলিমেন্ট (বাটন, সার্চ box, লিংক..., যেসব জিনিস ব্যবহারকারীর থেকে ইনপুট আশা করে)
- নন-ইনপুট এলিমেন্ট(ছবি, টেক্সট, যেইগুলি ক্লিক করলেও কিছু হবে না)

২. ইউসার এক্সপেরিয়েন্স:
শুধু নির্দেশ দিয়েই আমরা বসে থাকি না, আমরা এটাও আশা করি যে আমি যা বলতে চাইছি, কম্পিউটার সেটা বুঝে ঠিক সেই কাজতাই করবে। কিন্তু আসলেও কি সবসময় তা হয়? অনেক সময়েই আমরা মহা বরকত হয় কম্পিউটার এর উপর; বলি একটা করে আরেকটা, নয়তো একশবার জিগেশ করে "Are you sure?", "Do you really want to delete?". আরে বেটা ডিলিট করতে চাইলাম দেখেই তো ক্লিক করলাম! একটু পরে মনে হয়, আরে ওই ফাইলটা তো দরকার ছিল! মানুষের এরকম অভিজ্ঞতা থেকেই কম্পিউটার এর recycle bin এর ধারণাটা এলো। অর্থাত ওই বারে বারে জিগেশ করাতে বিরক্ত হবার অভিজ্ঞতা আর পরে "আহ! জীবনটা বাঁচলো!"-এই অভিজ্ঞতা - এই দুটার মাঝামাঝি একটা আপোষ করা। HCI এই বেপারটা নিয়েও গবেষণা করে, ঠিক কতটুকু বিরক্তি মানুষ সহ্য করে, আর কিসে খুশি হয়, আর কিসে একেবারে প্রোগ্রাম uninstall করে দেয়, কিংবা অপারেটিং সিস্টেমই বদলে ফেলে!

(to be continued...draft, lots to add)
১. http://www.usability.gov/
২. যারা অনেক ছোট তারা হয়ত অর্কুট এর নাম ও শুনেনি, ঐটা আদিকালের একটা সোশ্যাল নেটওয়ার্ক।
৩. https://www.cs.umd.edu/users/ben/goldenrules.html

Jun 5, 2014

হিউম্যান-কম্পিউটার ইন্টারঅ্যাকশন: কী ও কেন

মাঝে মাঝে নিজের কাজ নিয়ে কাউকে বোঝাতে গেলে আটকে যাই, বিশেষ করে বাংলায়, আবার এর উল্টোটাও হয় কখনো কখনো।উইকিপিডিয়াতে হিউমান-কম্পিউটার ইন্টারঅ্যাকশন এর এই পাতাটা পেলাম, এর কোনো বাংলা সংস্করণ নেই, তাই ভাবলাম নিজেই একটা লিখে ফেলি, তার আগে একটু ব্লগ এ চেষ্টা করে দেখি।

প্রথমেই দেখি এটা আসলে কী।

সভ্যতার সূচনালগ্ন থেকে মানুষ বিভিন্ন যন্ত্র ব্যবহার করে আসছে, ছুরি, হাতুড়ি, চাকা, এসব থেকে শুরু করে বড় বড় শিল্পকারখানার ভারী যন্ত্র, আবার আছে কিছু নিত্যদিনের ব্যবহার্য যন্ত্র, যেমন লিফ্ট, গাড়ি, ফ্যান, টিভি, ইত্যাদি ইত্যাদি। একটা লিফট আস্ত কত গুলো মানুষ নিয়ে সারা দিন উপর নিচ উঠানামা করে, অথচ এর কাজ ওই একটাই, সেই অর্থে এটাকে খুব সহজ সরল একটা যন্ত্র বলা যায়, আমরা এর ভিতর ঢুকি, কত তলায় যাব সেই সুইচ দেই, এর পর চলে যাই, কতই সহজ! কিন্তু না, BUET  এর লিফট এর অভিজ্ঞতা যাদের আছে তারা জানে একটা আপাত সরল যন্ত্র কত ভোগান্তি করতে পারে! একটাই কাজ, তাও ঠিকমত করতে পারে না!

এবার আসি টিভি এর কথায়, একটা বাচ্চাও জানে কীভাবে টিভি অন/অফ করতে হয়, আরেকটু বড় হয়ে শিখে ফেলে চানেল পাল্টানো, এর পর শুরু হয় রিমোট দখলের যুদ্ধ! কীভাবে তারের মাঝ দিয়ে ছবি এসে জাদুর বাক্সে ঢুকে গেল তা জানার কোনো দরকার হয় না, দরকার কেবল একটা ইন্টারফেস, একটা যোগাযোগের প্রক্রিয়া।

আরেকটু জটিল যন্ত্রের দিকে তাকাই, যেমন গাড়ি। চোখ, কান, হাত, পা সব কিছু ব্যবহার করে এই জিনিসটা চালাতে হয়, এর একটাই কাজ, আমাদের এক জায়গা থেকে অন্য জায়গায় নিয়ে যাওয়া। কিন্তু চালানোটা এত সহজ না।  তার একটা অন্যতম কারণ এর বাজে ইন্টারফেস।

আর কম্পিউটার নামক যন্ত্রটা তাহলে কোন দল এ পড়ে? এটা তো কেবল অন/অফ করেই শেষ না, বরং শুরু বলা যায়। আসলে কম্পিউটার এমন একটা যন্ত্র যার কাজের কোন সীমা নেই, বরং বলা যায় এটা অনেক অনেক যন্ত্রের একটা আড্ডাখানা, আর ওই অনেক যন্ত্রগুলো আমরা যন্ত্র না বলে বলি প্রোগ্রাম কিংবা এপ্লিকেশন। টিভির মত কম্পিউটার ও এখন বাচ্চারাও সহজে ব্যবহার করতে পারে, কিন্তু কম্পিউটার এর এই অবস্থায় আসতে কিন্তু এক দিন দুদিন লাগে নি, দেখি আগের কম্পিউটারগুলো কেমন ছিল:
https://www.youtube.com/watch?v=PF7EpEnglgk

উপরের ভিডিও তে এই যে বাচ্চাগুলো কম্পিউটার ব্যবহার করতে হিমশিম খাচ্ছে এটা কিন্তু ওদের দোষ না, বরং সেই বাজে ডিযাইন এরই দোষ। ধীরে ধীরে আজকের কম্পিউটার যে সবার জন্য এত সহজে ব্যবহারযোগ্য হয়ে উঠেছে তার পেছনে যারা কাজ করেছেন তারা ভেবেছেন সাধারণ মানুষের কথা, কীভাবে মানুষ কম্পিউটার ব্যবহার করে সেটা তারা পর্যবেক্ষণ করেছেন, কী কী জিনিস এ আমরা বিরক্ত হই সেগুলো দূর করে কীভাবে আরো সহজে একে সবার কাছে আনা যায় সেই চেষ্টা করেছেন, আর এভাবেই জন্ম হয়েছে বিজ্ঞানের নতুন একটা শাখার, যার নাম 'হিউম্যান-কম্পিউটার ইন্টারঅ্যাকশন' ।









Reference:
1. http://www.smartgirl.org/brain-food/career-hubs/human-computer-interaction.html
2. http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction

May 13, 2014

OpenGL and Cocoa Framework in OSx/iOS

tutorials on OpenGL and GLKit in iOS:

Good introduction:
http://t-machine.org/index.php/2013/09/08/opengl-es-2-basic-drawing/
http://t-machine.org/index.php/2013/10/18/ios-open-gl-es-2-multiple-objects-at-once/

Simple and fast start:
http://www.raywenderlich.com/5235/beginning-opengl-es-2-0-with-glkit-part-2

http://games.ianterrell.com/opengl-basics-with-glkit-in-ios5-encapsulated-drawing-and-animation/

http://games.ianterrell.com/how-to-texturize-objects-with-glkit/

A quick summary:
http://chrismiles.info/presentations/SwipeConf-2012-OpenGL-ES-iOS5/Swipe-2012-OpenGL-ES-iOS5-Part1.pdf

Apple's own guideline to use vertex data efficiently:
https://developer.apple.com/library/ios/documentation/3ddrawing/conceptual/opengles_programmingguide/TechniquesforWorkingwithVertexData/TechniquesforWorkingwithVertexData.html


Adding custom subview:

iOS: init with storyboard
  UIStoryboard *myStoryboard = [UIStoryboard storyboardWithName:@"main"                                                           bundle:[NSBundle mainBundle]];
  
 // setup the opengl controller
    // first get an instance from storyboard
    self.glkViewController = [myStoryboard instantiateViewControllerWithIdentifier:@"glkviewcontroller"]; 
    // then add the glkview as the subview of the parent view
    [self.view addSubview: self.glkViewController.view];


Mac OS: init with nib


    SettingsViewController* settingsController = [[SettingsViewController alloc]      initWithNibName:@"SettingsViewController"
                 bundle:[NSBundle mainBundle]
           parentWidget:self
      withDefaultValues: self.graphPanel.chartType
              withColor: self.graphPanel.colorScheme

               dataType: self.attr];