di Programming Tutorials 492 Words

Drawing Simple Network Visualization Using Cytoscape.js

Since I start working on bioinformatics field, I was surprised with how it deeply connected with network. One important thing in this field is visualization. We usually want to know how (i.e. one sequence) connected with existing groups. Thus when we working with so many groups or member, the linking would seems complicated. Then network visualization software such as cytoscape play an important role. However in this post I only talk about script version of the cytoscape (thus it called cytoscape.js).

When I said js, it basically a script which we embedded into a webpage. So for starter we need to create a simple page with included js script and container which we want to displaying cytoscape. On index.html:

<!doctype html>
<html>

<head>
    <title>Introduction to cytoscape.js</title>
    <**script src='cytoscape.js'> </script>
</head>

<style>
#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>

<body>
    <**div id="cy"></div>
</body>

</html>

Because it is HTML, of course we can setup the style in whatever suit yourself. In this case, let say we just want to make the cytoscape canvas in full screen.

Then how about we put the code into work? One thing about cytoscape js is the main code is written in form of script. Even though it is included at HTML. For example if we want to create two node connected with one edge, we write this into <**script>:

var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
        { data: { id: 'node_1' } },
        { data: { id: 'node_2' } },
        {
            data: {
                id: 'edge',
                source: 'node_1',
                target: 'node_2'
            }
        }]
});

Note that: var cy = cytoscape create new graph instance. Each data (either node or edge) was written in data: format.

For each node and edge, both is marked with id as their “name”. With exception of edge that needs additional information such as source: and target: to define the direction of the edge. In much more complicated data, we can specify a group of nodes using group: ‘nodes’.

The complete code should be like this:

<!doctype html>
<html>

<head>
    <title>Introduction to cytoscape.js</title>
    <**script src='cytoscape.js'> </script>
</head>

<style>
#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>

<body>
    <**div id="cy"></div>
    <**script>
        var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [
            { data: { id: 'node_1' } },
            { data: { id: 'node_2' } },
            {
                data: {
                    id: 'edge',
                    source: 'node_1',
                    target: 'node_2'
                }
            }]
        });
    </script>
</body> 
</html>

And then you have the (still ugly) graph of 2 nodes and 1 edge connecting them. In next tutorial I will try to explain about changing the layout.

Happy Coding!

 

Tinggalkan komentar