Wednesday 27 April 2011

Here are my project details:
Title: Zoom Search

The basic functionality of system can be described as:
  • user selects a table, ie movies
  • user picks two columns, ie popularity and year
  • a visual grid is built, showing year on the X axis and popularity on Y; each movie is represented by a dot on the grid
  • user can select a part of the grid to zoom the specific portion; then dots become more spaced and hovering over them shows for example the movie's title
  • user clicks on a dot to browse this data row

The system can be divided into three components:
1) Plot criteria/Interface:
This component will consist of an interface which allows users to select the two columns, constraints and data point labels that they want to be represented in the plot. To avoid duplication of functionality the table search page, multi-table query generator page from the phpMyAdmin project along with some additions can provide us with a suitable form to fulfill the input criteria.

2) Plotting using a charting library:
This component calculates the coordinates of each data point based on a predefined distance measures while handling cases like overlapping data points. Also, each data point will consist of a label and a clickable link which can display the contents of the data row.

The plot can be created using charting libraries like pChart, JpGraph, SVG, jquery-SVG. pChart has the advantage that it is currently being used in phpMyAdmin so it saves us from including another charting library but it does not supports clickable links. JpGraph allows clickable links at the cost of inclusion of another library. SVG provides vector images compared to bitmaps of pChart/JpGraph which suits the quality of zoom feature and also saves us from including another charting library. jQuery-SVG is a jQuery plugin that lets us interact with an SVG canvas. With jQuery-SVG it will also be easier to include other jQuery plugins(zoom/pan for example). Looking at the pros and cons I will prefer using SVG/jQuery-SVG.

3) Zoom-In/Out:
A jQuery script will allow the plot to be zoomed-in/out on demand. Zoom can either be gradual or in increments. As per the the system requirements a zoom and pan image or zoom and crop image tool will work well.  Another way could be a simple + and - zoom bar (just like google maps) over the plot image, it will also look familiar to users. The focus will be on having a fast response time so we can try different plugins or write our own code and based on usability tests we can fix which one suits our system better.
Absolutely delighted for being selected into GSoC 2011 for phpMyAdmin.
Looking forward to "Zoom search" :)  I am sure it will be a wonderful opportunity and also, its my first step towards working as an open source contributor. I hope this journey continues .
Thanks phpMyAdmin team and Google.