Web Developers Portal

Sunday 11 March 2012

Cytoscape Web Examples

prerequestics:

you should install cytoscape web and adjust the javascript src path to the path where you extracted Cytoscape Web. set swfPath and flashInstallerPath correctly .
If you are facing any difficulties in setting the path, please refer Cytoscape web tutorial

Drawing a simple network with values on nodes

Drawing a network with nodes of different size

Drawing a network with different colored nodes and edges

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
            <script type="text/javascript" src="js/AC_OETags.min.js"></script>
            <script type="text/javascript" src="js/json2.min.js"></script>
            <script type="text/javascript" src="js/cytoscapeweb.min.js"></script>
        </head>
<script type="text/javascript">
window.onload=function() {
            // network data could alternatively be grabbed via ajax
     var xml = '\
    <graphml>\
    <key id="label" for="all" attr.name="label" attr.type="string"/>\
    <key id="weight" for="node" attr.name="weight" attr.type="double"/>\
    <graph edgedefault="undirected">\
        <node id="1"><data key="label">1</data><data key="weight">.7</data></node>\
        <node id="2"><data key="label">2</data><data key="weight">.5</data></node>\
        <node id="3"><data key="label">3</data><data key="weight">.5</data></node>\
        <node id="4"><data key="label">4</data><data key="weight">.5</data></node>\
        <node id="5"><data key="label">5</data><data key="weight">.2</data></node>\
        <node id="6"><data key="label">6</data><data key="weight">.2</data></node>\
        <edge source="1" target="2" id="gene"></edge>\
        <edge source="2" target="3" id="gene"></edge>\
        <edge source="4" target="5" id="gene"></edge>\
        <edge source="3" target="4" id="miR"></edge>\
        <edge source="6" target="5" id="miR"></edge>\
        <edge source="4" target="2" id="miR1"></edge>\
        <edge source="6" target="1" id="miR1"></edge>\
    </graph>\
    </graphml>\
    ';

            // init and draw
            // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };

                var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);

             // visual style we will use
                var visual_style = {
                    global: {
                        backgroundColor: "#ABCFD6"
                    },
                    nodes: {
                        shape: "circle",
                        borderWidth: 2,
                        borderColor: "#ffffff",
                        // setting different size to the nodes
                        size: {
                            defaultValue: 20,
                            continuousMapper: { attrName: "weight", minValue: 30, maxValue: 60 }
                        },
                        //setting different color to the node
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "1",
                                    value : "red"
                                }, {
                                    attrValue : "2",
                                    value : "gray"
                                }, {
                                    attrValue : "3",
                                    value : "gray"
                                }, {
                                    attrValue : "4",
                                    value : "gray"
                                }, {
                                    attrValue : "5",
                                    value : "yellow"
                                }, {
                                    attrValue : "6",
                                    value : "yellow"
                                } ]
                            }
                        },
                        labelHorizontalAnchor: "center"
                    },
                    edges : {
                        width : 2,
                        //setting different color to the edges
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "gene",
                                    value : "red"
                                }, {
                                    attrValue : "miR",
                                    value : "white"
                                }, {
                                    attrValue : "miR1",
                                    value : "blue"
                                } ]
                            }
                        }
                    }
                };

                var draw_options = {
                    // your data goes here
                    network: xml,

                    // show edge labels too
                    edgeLabelsVisible: false,


                 // set the style at initialisation
                    visualStyle : visual_style,

                    // circle layout for nodes
                    layout: "circle",

                    // hide pan zoom
                    panZoomControlVisible: true
                };

                vis.draw(draw_options);

            };
            </script>

            <style>
                /* The Cytoscape Web container must have its dimensions set. */
                html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
                #cytoscapeweb { width: 100%; height: 100%; }
            </style>
        </head>

        <body>
            <div id="cytoscapeweb">
                Cytoscape Web will replace the contents of this div with your graph.
            </div>
        </body>

    </html>

Cytoscape Web Tutorial

What is cytoscape web?

Cytoscape Web is a tool for developers to display networks on the web page. It is a network visualisation library. For using cytoscape web, you should familiar with HTML and Javascript.

How to get it?

you can download Cytoscape Web from

http://cytoscapeweb.cytoscape.org/download.

Getting started.

1. Download cytoscape web.

2. Extract the files.

3. Open cytoscapeweb_v1.0 which contains 2 subfolders, js and swf.

4. Copy the files

AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js from js/min (java script files)

CytoscapeWeb.swf, playerProductInstall.swf from swf folder. (flash files)

you need the above 5 files for running cytoscape web.

5. Download a web server such as apache tomcat. (we can run the cytoscape with out using the server as it is a simple html.but we need to change the security settings to allow flash to run from the local system. You do not need to change the security settings if you deploy Cytoscape Web on a web server).

6. Open apache-tomcat-7.0.23\webapps folder. create a new folder say cytoscape inside webapps. create 2 folders js and swf in cytoscape. put the files AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js in js folder and CytoscapeWeb.swf, playerProductInstall.swf in swf folder.

7. Start the tomcat server by double clicking startup.bat in apache-tomcat-7.0.23\bin folder

8. For testing copy the below example in txt file and save it as html file. adjust the Script tag references to the path where you extracted Cytoscape Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<title>Cytoscape Web example</title>

window.onload=function() {

// id of Cytoscape Web container div

var div_id = "cytoscapeweb";

// you could also use other formats (e.g. GraphML) or grab the network data via AJAX

var network = {

data: {

nodes: [ { id: "1" }, { id: "2" }, { id: "3" } ],

edges: [ { id: "2to1", target: "1", source: "2" },{ id: "3to2", target: "3", source: "2" } ]

}

};

// initialization options

var options = {

// where you have the Cytoscape Web SWF

swfPath: "swf/CytoscapeWeb",

// where you have the Flash installer SWF

flashInstallerPath: "swf/playerProductInstall"

};

// init and draw

var vis = new org.cytoscapeweb.Visualization(div_id, options);

vis.draw({ network: network });

};

</script>

<style>

/* The Cytoscape Web container must have its dimensions set. */

html, body { height: 100%; width: 100%; padding: 0; margin: 0; }

#cytoscapeweb { width: 100%; height: 100%; }

</style>

</head>

<body>

Cytoscape Web will replace the contents of this div with your graph.

</div>

</body>

</html>

I have save the above example as NewFile.html .

9. open browser and type url : http://localhost:8080/cytoscape/NewFile.html

Tuesday 6 March 2012

How to expand and collapse rows in jsf datatable?

How to expand and collapse rows in jsf datatable?

<%@ taglib uri="http://myfaces/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://adesa.com/jsf/components" prefix="adesa"%>
<%@ taglib uri="http://www.adesa.com/security" prefix="security"%>
<script type="text/javascript">
function validate() {
     return false;
}

function addOnclickToDatatableRows(row) {

    var trs = document.getElementById('body:form1:dt1:'+row+':hide');

    if(trs.style.display=='none') {
        trs.style.display='block'
    } else {
        trs.style.display='none'
    }
}

function highlightRow(tr) {
    tr.style.display = 'none' ;
}
</script>
<f:view>
    <h:form id="form1" onsubmit="return validate();">
        <br>
        <br>
        <br>
        <t:dataTable id="dt1" rowIndexVar="row"
            value="#{TableBean.perInfoAll}" var="item" bgcolor="#F1F1F1"
            border="10" cellpadding="5" cellspacing="3" first="0" rows="4"
            width="50%" dir="LTR" frame="hsides" rules="all"
            summary="This is a JSF code to create dataTable.">
            <h:column>

                <t:div id="heading">
                    <h:outputText value="heading"></h:outputText>

                </t:div>
                <t:div id="hide">
                    <h:outputText value="#{item.id}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                    <h:outputText value="#{row}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                </t:div>
                <h:commandLink value="show/hide"
                    onclick="addOnclickToDatatableRows(#{row})"></h:commandLink>
            </h:column>
        </t:dataTable>
        <br>
        <br>
    </h:form>
</f:view>

How to Re-Execute Javascript on Ajax Render?

How to Re-Execute Javascript on Ajax Render?

Enclose all the ajax call and java script with in the output panel and set ajaxRendered = true

<a4j:outputPanel ajaxRendered="true">

Monday 5 March 2012

UML Tutorial

Introducing the UML

•The Unified Modeling Language or UML is a standard language for specifying, visualizing, constructing, and documenting the software systems.

•The UML uses mostly graphical notations to express the design of software projects.

•UML describes a notation and not a process.

•UML model describes what a system is supposed to do. It does not tell how to implement the system.

Uml diagrams

•In UML certain number of graphical elements combined into diagrams.

•Because it is a language, the UML has rules for combining these elements.

•Uml consists of eight basic diagram

Class Diagram
Object Diagram
Component Diagram
Deployment Diagram
Use Case Diagram
Collaboration Diagram
Activity Diagram
State Diagram

Class Diagram
•It is used to describe the structure of a class including the properties and methods and the relationship between the classes.

Notations

class

Relationship between classes

Aggregation ->line with a hollow diamond

Composition ->line with a filled diamond

Generalization-> line with a hollow arrow head

realization->dashed line with a hollow arrow head

Association->line connecting two classes

Object diagram

•It is used to describe the system at a particular point of time.

Notations

Objects

objects are the instance of class.

Association

it represents the association between the objects

Component Diagram

•It is used to describe the dependency between various software components.

Notations

Component ->represents a software entity in a system.

Dependency ->represents the relationship between the components.

Deployment Diagram

•It is used to represent the hardware used to implement the system and association between hardware components.

Notation

Components->represents the software entity.

Node ->represents a piece of hardware in a system.

Association->represents the communication between hardware components

example

Use case diagram

•It identifies the functionality provided by the system (use case) ,the users that interact with the system (Actor) and the association between the user and functionality.

Notations

use case->functionality provided by the system

Actor-> user or another system that interact with the use case

Association -> link actors with the use case

example shows a user placing an order with a sales company might follow these steps.

State Diagram

It represents the various state an object can go through and event that cause the state transition.

Notations

state ->

Transition-> represent the changing object state caused by events

Initial State -> state of an object before transition

Final State ->represent the destruction of an object.

State diagram of a light

Activity Diagram

•It is used to represent the work flow with in a system.

•It shows steps (activities) ,decision point and branch

Notations

–Activity->each step in a work flow

–Initial state->entry point

–Final state->end of work flow

–Transition ->

–Decision ->represent a condition

Activity diagram to find the factorial of a number

Collaboration Diagram

•It represent the interaction between the objects.

Notations

Object->

Message->tells the receiving object to execute one of its operation

Actor->communicate with the object

example:

Administrator use a web application to manage user account

Find User
   LookUpUser
Update User
   ValidateUser
   UpdateUser

Conclusion

•It is independent of particular programming languages.

•It encourage the growth of the OO tools market.

Thursday 16 February 2012

LIBSVM tutorial

What is SVM?

A Support Vector Machine is a learning algorithm typically used for classification
problems (Weather prediction, text categorization, handwritten character recognition, image
classification,Facial expression classification etc.). ie, if we have some sets of things classified
But we know nothing about how we classified it, or we don't know the rules used for classification),
when a new data comes, SVM can PREDICT which set the data should belong to.

Suppose we have to differentiate a square from rectangle. how can we do it?
we know the logic is

if length=breadth then it is a square
else
it is a rectangle.

this is the logic we want to cluster using the SVM, we would have to give the have data in following format:

1 1:2 2:2
1 1:4 2:4
1 1:9 2:9
1 1:10 2:10
..........
..........
-1 1:5 2:6
-1 1:3 2:4
-1 1:6 2:9
-1 1:4 2:1
..........
..........

The above example is a TWO-class classification with labels +1 and -1 . +1 represents square and -1 represents rectangle.

Consider the 4 th line in the above format ie 1 1:10 2:10

1 represents this is a square.
For the second column (eg: 1:10) 1: represents the index value and 10 represents the length.
For the third column (eg: 2:10) 2: represents the index value and 10 represents the bredth.

Consider the 8 th line in the above format ie -1 1:4 2:1

-1 represents this is a rectangle.
For the second column (eg: 1:4) 1: represents the index value and 4 represents the length.
For the third column (eg: 2:1) 2: represents the index value and 1 represents the bredth.

This is the input file format of SVM.

[label] [index1]:[value1] [index2]:[value2] ...
[label] [index1]:[value1] [index2]:[value2] ...

label
Sometimes referred to as 'class', the class (or set) of your classification. Usually we put integers here.

index
Ordered indexes. usually continuous integers.

value
The data for training. Usually lots of real (floating point) numbers.

Why value, value2, ...?

The reason is usually the input data to the problem you were trying to solve involves lots of 'features'
or say 'attributes', so the input will be a set (or say vector/array).

For the above example we have 2 features lenght and breadth.

Installing Libsvm

We can download the libsvm from http://www.csie.ntu.edu.tw/~cjlin/libsvm/
libsvm.zip or libsvm.tar.gz

Contents in the .zip and .tar.gz are the same.
For windows users unzip the file. libsvm folder will be created.
UNIX users mostly prefer .tar.gz.

What is Libsvm?
Libsvm is a library for support vector machines.

How to Use Libsvm

We must follow the below procedure :
1. Data Preparation for SVM
2. Convert data into SVM format
3. Conduct simple scaling on the data
4. Consider the RBF kernel K(x; y) = e
5. Use cross-validation to find the best parameter C and gamma
6. Use the best parameter C and gamma to train the whole training set
7. Test

We discuss this procedure in detail in the following sections

1. Data Preparation for SVM
We need to collect maximum data as possible. data set should contains both positive and negative data.
if it contains only one type of data(ie either positive or negative), it will shows wrong accuracy.
The selection of a negative data set is essential to the reliability of the prediction model.
we need to split the data set into two, one for training and other for testing.
After collecting the data , we need to convert both the training set and testing set into SVM format.

2. Convert the data into SVM format
The SVM algorithm operates on numeric attributes.
So we need to convert the data into libsvm format which contains only numerical values.

For example , If we have imaginary data records like this:

man voice:low figure:big income:good
woman voice:high figure:slim income:fare

1. Convert the feature values to its numeric representation.
Let's say, that best salary would be 5 and worst salary 1 (or no salary = 0), the same with other enumarated variables.
2. We have 2 classes, man and women . convert the classes to numeric values: man = 1, woman = -1
3. Save it in libsvm data format:

[class/target] 1:[firstFeatureValue] 2:[secondFeatureValue] etc.
ex.:
a women with great salary, low voice and small figure would be encoded like:
-1 1:5 2:1.5 3:1.8

In general the input file format of SVM is

[label] [index1]:[value1] [index2]:[value2] ...
[label] [index1]:[value1] [index2]:[value2] ...

label
Sometimes referred to as 'class', the class (or set) of your classification. Usually we put integers here.

index
Ordered indexes. usually continuous integers.

value
The data for training. Usually lots of real (floating point) numbers.

Is there a program to check if my data are in the correct format?
yes.
we can use the python script libsvm-3.11/tools /checkdata.py

Before doing that you need to install Python.
put checkdata.py in the Python folder. open a command prompt and type python checkdata.py filename.

3. Conduct simple scaling on the data

The original data maybe too huge or small in range, thus we can
rescale them to the proper range so that training and predicting will be faster.
The main advantage of scaling is to avoid attributes in greater numeric
ranges dominating those in smaller numeric ranges. Another advantage is to avoid
numerical difficulties during the calculation.

We recommend linearly scaling each attribute to the range [1; +1] or [0; 1].
we have to use the same method to scale both training and testing
data.

svm-scale is a tool for scaling input data file.
It is available at libsvm-3.11\windows

The syntax of svm-scale is
svm-scale [options] data_filename.

For options please refer README file in libsvm.

Running the above command generates 2 files. training.scale and range file.

In the above example we scale the file training.txt and scale each attribute/feature to the range [-1 +1].

The output of scaling is training.scale file, which is used for creating the model.
(model will be discussed later).
here we use option -s for saving the scaling parameters to range file.
Scaling factors are stored in the file range and that file is used for scaling the
test data.

we should scale the testing and scaling data in same range.
so for scaling the testing file we can use the range file .

Above example uses the range file for scaling the testing data. It generates the output testing.scale.

note: we can scale training and testing data in a similar way.

> svm-scale -s scaling_parameters train_data > scaled_train_data

> svm-scale -r scaling_parameters test_data > scaled_test_data

But using the same scaling factors for training and testing sets, we obtain much better
accuracy

4. Model Selection

After scaling the data set , we have to choose a kernel function for creating the model.
4 basic kernels are

linear
polynomial
radial basis function
sigmoid

In general, the RBF kernel is a reasonable first choice.
A recent result shows that if RBF is used with model selection, then there is no need to consider the linear kernel. The kernel matrix using sigmoid may not be positive definite and in general it's accuracy is not better than RBF. Polynomial kernels are ok but if a high degree is used, numerical difficulties tend to happen.

In some cases RBF kernel is not used.
case 1: Number of instances < number of features/attributes

(instance means each entry in the txt file)

Consider an example1 .
we have 2 data sets one for training and other for testing
training set contains 38 instance and testing set contains 34 instance. number of features:7,129.

If you use RBF kernel the accuracy is 71.05
and for linear kernel accuracy is 94.73 (please see below)

In such cases linear kernel have more accuracy than RBF kernel.

There are two parameters for an RBF kernel: C and gamma
linear kernel has a penalty parameter C.
It is not known beforehand which C and gamma are best for a given problem; consequently some kind of model selection(parameter search) must be done. The goal is to identify good (C , gamma) so that the
classifier can accurately predict unknown data (i.e. testing data).

For selecting the best parameter value , we can use grid.py in the libsvm-3.11\tools directory.

grid.py is a parameter selection tool for C-SVM classification using
the RBF (radial basis function) kernel. It uses cross validation (CV) (will discuss later)
technique to estimate the accuracy of each parameter combination in
the specified range and helps you to decide the best parameters for
your problem.
grid.py directly executes libsvm binaries (so no python binding is needed)
for cross validation and then draw contour of CV accuracy using gnuplot.

Before using the grid.py , we should edit grid.py for setting the path of svmtrain_exe and gnuplot_exe

grid.py

if not is_win32:
svmtrain_exe = "../svm-train"
gnuplot_exe = "/usr/bin/gnuplot"
else:
# example for windows
svmtrain_exe = r"F:\lekshmi\libsvm-3.11\windows\svm-train.exe"
# svmtrain_exe = r"c:\Program Files\libsvm\windows\svm-train.exe"
gnuplot_exe = r"F:\lekshmi\gp444win32\gnuplot\binary\gnuplot.exe"

you should install python and gnuplot before running grid.py.
After installing python set the environment variable "PYTHONPATH" as C:\Python27(in my system python is installed in C directory)
put the grid.py in the python folder. open the command promt and change directory to the folder contains grid.py.

Consider the above example1 (Number of instances < number of features/attributes)

for linear kernel

for RBF kernel

now we can discuss the grid.py in detail
The syntax for grid.py is

grid.py [-log2c begin,end,step] [-log2g begin,end,step] [-v fold]
[-svmtrain pathname] [-gnuplot pathname] [-out pathname] [-png pathname]
[additional parameters for svm-train] dataset

Monday 9 January 2012

Connecting MySQL in xampp with java

phpMyAdmin in xampp server is used to manage MySQL database.We can connecting java with mysql xampp using the below code:

Prerequisite
Xampp should be installed.

In the java code
String url = "jdbc:mysql://localhost:3306/"; ( MySQL server in xampp is installed in port 3306)
String dbName = "test";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "";
try {
Class.forName(driver).newInstance();
Connection con =DriverManager.getConnection(url+dbName,userName,password);
}
We need to put mysql-connector-java-5.1.18-bin.jar in the classpath.