Motivation
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.
Features To Add (Along with details of implementing) :
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
elements.
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.
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.
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.
Along with it I will add the reset button to reset the graph so that all annotations will be
disappeared.
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.
scalable vector icons that can instantly be customized — size, color, drop shadow, and
anything that can be done with the power of CSS.
For this I will add one graph controller bar below to the graph. It contains following
buttons.
-rewind
-fastforward
-play
-stop
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.
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
After the crossing certain values of x-y axis,graph will automatically adjust
range of axis to maintain range and view of graph.
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 -
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.
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
June 1-June 8
June 8-June 15
June 15-June 30
Coding PHASE II
July 1 - July 7
July 8 - July 15
July 15-July 22
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
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 :
