Cytoscape JS
Lors du projet iHKG viewer, j’ai utilisé cytoscape JS pour générer les réseaux de gènes. Nous allons voir ici comme générer un graphe simple avec Cytoscape S.
Comment faire ?
1- Importer le script JS de Cytoscapape dans le head
Plusieurs solutions sont disponibles dans la documentation (ici). Je vous propose ici celle de CDNJS :
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.2/cytoscape.min.js" integrity="sha512-PqivlaNWoXvHYlvku80fbWO/yBiRmGhISj5uVdAodyqsGprDcVZy6aecJDVNE0fIIE/YeiOzp5yJTR5ZjFlR4Q==" crossorigin="anonymous"></script>
2- Ajouter dans le body de votre page HTML
Une division pour accueillir le réseau :
1
<div id="cy" style="width:100%; height:400px;"></div>
Le script pour créer le réseau :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// Ajouter les nodes
{ data: { id: 'a' } },
{ data: { id: 'b' } },
//Ajouter les egdes
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}],
// Ajouter le nom des nodes
style: [
{
selector: 'node',
style: {
label: 'data(id)'
}
}]
});
</script>
3- Ensemble du code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.15.2/cytoscape.min.js" integrity="sha512-PqivlaNWoXvHYlvku80fbWO/yBiRmGhISj5uVdAodyqsGprDcVZy6aecJDVNE0fIIE/YeiOzp5yJTR5ZjFlR4Q==" crossorigin="anonymous"></script>
</head>
<body>
<div id="cy" style="width:100%; height:400px;"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}],
style: [
{
selector: 'node',
style: {
label: 'data(id)'
}
}]
});
</script>
</body>
</html>