Sunday, 6 September 2015

GSoC Proposal

                        Google Summer Of Code-2015

Personal Information

  • Name : Rishi Shah
  • Age : 18 years
  • E-mail address :
  • University :  Dhirubhai Ambani Institute of Information and Communication Technology,  
                               Gandhinagar (DA-IICT)
  • Location (City, Country and/or Time Zone) :  Gandhinagar, India. GMT: +5:30

Brief Background

 I   am an ICT( Information and Communication Technology) undergraduate student at Dhirubhai Ambani Institute of Information and Communication Technology (DA-IICT),Gandhinagar, India. I am very passionate about programming and coding from a very young age. I am a person who always wants to learn new things. I am a quick self-learner and persistent. I like to learn from my mistakes. Even when learning, I research a lot and do not hesitate to take help , of course after web surfing a lot.
 I have a keen interest in data structures, algorithms and programming. Besides this, I am a tech person who is always updated with different technologies and the impact it has on society. I am a Linux user from past 1 year.

Work and Open-Source Experience

Startup Experience
Employer Name - Rgybee(Social network)
Job - Web developer,
        My job is to design front end part using AngularJS and I have to make linkage between   
        servlet and JADE gateway through spring framework .                                 
Date - 5th January to March 2015

Open Source Experience
Organization Name - Sugar Labs
worked - Made one Web App based on HTML5,Javascript & CSS
Date - December 2014 onwards

Organization Name - Code Combat
worked - Solved bugs based on Javascript & coffeescript and CSS
Date - December 2014 onwards

Organization Name - The Concord Consortium
worked - Improved few lab-interactives
Date - December 2014 Onwards

Programming interest & strength

Programming Experience
  • Proficient in Javascript,C,HTML
          Used HTML & Javascript to build web-apps.Used C language for competitive coding    
  • Significant experience with Java,CSS,PHP
          Used PHP & CSS to make landing page for Rgybee. Used Java language for competitive
          coding purpose
  • Frameworks - AngularJs,Jquery,Spring
  • Database - OrientDB  

   I love web development. I always like to play with javascript and html components. I contributed a lot to three open source organizations. All of my contribution is related to web development.
    I wanted to spend my whole summer with open source projects. I wanted to dive more into web development and wanted to make some fantastic projects. I would also like to learn how to make real time connection applications.

Interest and background in biology & bioinformatics
   I have deep interest in biology & bioinformatics. During my school days I had courses related to biology. In future I also wanted to do research in this field. My specific interests are in DNA self-Assembly & DNA computational.
   I am always keen to learn more about biology, and I think it would be a great way to spend my summer.

Project Idea - Javascript component for interactive time-series data visualization

   Many people advised me to go for KDE or such organizations so that I have a better prospect. But it isn’t just about getting selected.
    First, the idea itself intrigues me a lot. Today the world is changing continuously. With the help of new technologies, computational science, & softwares we can build models to understand,to test, and to play with biology. I have deep interest in biology, and also wanted to do research in bioinformatics. This project will give me push up to dive in biology.

Implementation Details:
    My project would try and accomplish the aim of to enable users to interactively visualize and analyze the dynamics of their network models.
 On concentrating above aim I will implement the following features using D3.js library and techniques of AJAX to make it real time simulation.
 I wanted to use D3.js because it is easy to bind data with DOM elements. It is as flexible as the client side web technology stack (HTML, CSS, SVG). Along with D3.js I will use javascript and jquery to manipulate the DOM elements. Instead of HTML5 canvas I would use SVG elements,  because it is vector based technique.
So, basically my graph will look like this. It will be available in two sizes medium and large. Along with x-y axis labels and graph title.
Screenshot from 2015-03-23 15:47:31.png

Features To Add (Along with details of implementing) :

  • Zooming
         I would like to use zoom functionality of D3.js. zoomHandler() function is fit to do zooming     
         with SVG elements. Everything I need to do is just to apply the zoom function on the svg  
  • Panning
  • Scrolling
         Users can scroll x-y axis to set the new range of axis. The graph will    
            self adjustable to this. By this feature users can observe graph efficiently.
  • Interaction with data points
           On hover to data points it will show additional text box to show its x-y     
           axis values. On hover to line graph it will show popup text box to show its  
           properties and name of it.

  • Chart annotations
           I am going to add four types of annotations in this model.
       1.Draw vertical annotations
       2.Draw horizontal annotations
       3.Draw vertical bar annotations
       4.Draw horizontal bar annotations
       Looks of All these annotations are shown below.
  Screenshot from 2015-03-23 14:37:17.png

 Along with it I will add the reset button to reset the graph so that all annotations will be   

  • Chart styling options
           We mostly just need line chart. So for this I will add color feature to distinguish line  
           charts. Graph will contain different colors for multiple data lines. I will add button  on the  
           side of the graph that will give information related to data line's  color.
  • I will use font  awesome toolkit to render creative charts and icons. Font Awesome gives   
           scalable vector icons that can instantly be customized — size, color, drop shadow, and     
           anything that can be done with the power of CSS.
           Link -
  • Data thresholds
           For this I will add one graph controller bar below to the graph. It contains following     
               User can set threshold data to stop rendering graph after that point.If values reach   
          over there then graph automatically stops rendering and  play button becomes active.
          Through this controller bar users can fast forward and rewind the graph.
          I will create separate text boxes of x-y axis to set data thresholds.
               Here is the good example of controller bar that I am talking about. I also worked on t   
          this feature so had good enough knowledge to develope it.

  • Ability to add and remove series(Data table)
             On the side of graph there will be one data-table in which details of line chart are    
           availables.Properties of this table are
           -Colour of Data line
           -Name of the data line
           -Check box to show that line chart. User can manually add or remove data lines from
            chart by just clicking on this check box

  • Self-adjusting View Window
           After the crossing certain values of x-y axis,graph will automatically adjust  
           range of axis to maintain range and view of graph.

  • Support for multiple data sources:
           Local Data – requires minimal effort to load data from local array. JSON Data – chart can  
           be loaded from JSON data using AJAX request. It will continuously talk with the server &    
           the server sends the list of drop-down items as a JSON  and caller function places the
           HTML at the appropriate place and update graph components using AJAX & will make it
           real time data visualization.To make this success.
             Here is the link to good example of this technique -  

  • Data Adapters  
         d3.json asynchronous function this is a wrapper that acts on all the code within it bringing
         the data in the form of graph to the remaining code.Only when the data is received from
         the backend, the callback function passed to it will be called.This command will load  
         data from json file and attach its behaviour to graph components according to function we
         define.We can then add nodes,title links etc, into our graph according to data derive in
         json. D3.js doesn't require a specific format. It all depends on your application.

  • Cross Browser
            The link mentioned below has the good example of grapher made by The Concord Consortium organization.This model fully based on javascript,jquery and D3.js. All the data input is in JSON format and will render it using svg elements.
      I contributed in this model. So I have sufficient experience and understanding of these tools to develop such grapher .

This list of features to be added is not the end. After further work on the project and discussion with my mentor, other features that deem themselves useful or necessary for this application will also be implemented after verifying feasibility and time constraints.

Tentative Timeline :

Coding, documentation and bug fixing will be more or less done simultaneously
in phases as mentioned below so that much work is not left for the last.

April 27-May 25 (Pre-selection period and Community Bonding period)
  • Discussion with the mentor(s) for any change in the project abstract plans.
  • Start understanding D3.js and related libraries.
  • Implementing basic graph components, including zooming & panning feature.

Coding PHASE I
Basically work on frontend part of graph components.

May 25-June 1
  • Add more features to graph.(Chart annotations,Chart styling options)
June 1-June 8
  • Implementing support for multiple types of chart
June 8-June 15
  • Implementing Data-threshold &  controller bar

June 15-June 30
  • Add feature related to data reply
  • Starting with documentation, bug-fixing for Phase-I
  • Mid-term evaluation

July 1 - July 7
  • Implementing Self-adjusting View Window
  • Researching D3.js functionality for the data adapters and about it support to multiple data sources
July 8 - July 15
  • Implementing support for multiple data sources using AJAX GET request
July 15-July 22
  • Add feature to control the graph component using JSON objects
  • Implementing interaction with data points
  • Implementing data table
July 23-August 17
  • Adding new features to graph components according to need
  • Cleaning the new code, documentation, bug-fixing for Phase-II
  • Testing the whole system

Pencil down PHASE III

August 17 – August 31
  • Submitting code to Google
  • Wrapping up the project
  • Documentation
    I will be able to achieve the milestones as scheduled above by giving at least 6 hours to code every day on weekdays and 3 hours on weekends. Weekends will be devoted to the evaluation of my week's work and scheduling the piece of code to be done next week (documenting code of previous week and scheduling milestones for each day in coming week). I will be in touch with the mentor.

Your commitment this summer
 I don't have any other obligation other than my GSOC Project and intend to devote more than 40 hours a week for this project. My college vacations are from early May to late July. My college course load is light so even after the start of the next academic semester, I will not have many time constraints. I will be able to work for about 40 hours a week.

Link to my CV :

No comments:

Post a Comment