diff --git a/datalets/graph-datalet/demo/demo-clustering-2.html b/datalets/graph-datalet/demo/demo-clustering-2.html
new file mode 100644
index 0000000..f42fec8
--- /dev/null
+++ b/datalets/graph-datalet/demo/demo-clustering-2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Demo Graph with node clustering</title>
+    <link rel="import" href="../graph-clustering-datalet.html">
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
+    <script>
+        function loadDoc() {
+            var xhttp = new XMLHttpRequest();
+            xhttp.onreadystatechange = function() {
+                if (xhttp.readyState == 4 && xhttp.status == 200) {
+                    document.getElementById("graph-placeholder").innerHTML = '<graph-clustering-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
+                            '\'></graph-clustering-datalet>';
+                }
+            };
+            xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=1&type=comments", true);
+            xhttp.send();
+        }
+
+        loadDoc();
+
+    </script>
+</head>
+<body>
+<h1>Graph with clustering</h1>
+<div id="graph-placeholder"></div>
+<!--<graph-clustering-datalet width="1000"
+                               height="700"
+                               graph='{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},{"name":"Woman1","group":2},{"name":"Judge","group":2},{"name":"Champmathieu","group":2},{"name":"Brevet","group":2},{"name":"Chenildieu","group":2},{"name":"Cochepaille","group":2},{"name":"Pontmercy","group":4},{"name":"Boulatruelle","group":6},{"name":"Eponine","group":4},{"name":"Anzelma","group":4},{"name":"Woman2","group":5},{"name":"MotherInnocent","group":0},{"name":"Gribier","group":0},{"name":"Jondrette","group":7},{"name":"Mme.Burgon","group":7},{"name":"Gavroche","group":8},{"name":"Gillenormand","group":5},{"name":"Magnon","group":5},{"name":"Mlle.Gillenormand","group":5},{"name":"Mme.Pontmercy","group":5},{"name":"Mlle.Vaubois","group":5},{"name":"Lt.Gillenormand","group":5},{"name":"Marius","group":8},{"name":"BaronessT","group":5},{"name":"Mabeuf","group":8},{"name":"Enjolras","group":8},{"name":"Combeferre","group":8},{"name":"Prouvaire","group":8},{"name":"Feuilly","group":8},{"name":"Courfeyrac","group":8},{"name":"Bahorel","group":8},{"name":"Bossuet","group":8},{"name":"Joly","group":8},{"name":"Grantaire","group":8},{"name":"MotherPlutarch","group":9},{"name":"Gueulemer","group":4},{"name":"Babet","group":4},{"name":"Claquesous","group":4},{"name":"Montparnasse","group":4},{"name":"Toussaint","group":5},{"name":"Child1","group":10},{"name":"Child2","group":10},{"name":"Brujon","group":4},{"name":"Mme.Hucheloup","group":8}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":8},{"source":3,"target":0,"value":10},{"source":3,"target":2,"value":6},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":2},{"source":9,"target":0,"value":1},{"source":11,"target":10,"value":1},{"source":11,"target":3,"value":3},{"source":11,"target":2,"value":3},{"source":11,"target":0,"value":5},{"source":12,"target":11,"value":1},{"source":13,"target":11,"value":1},{"source":14,"target":11,"value":1},{"source":15,"target":11,"value":1},{"source":17,"target":16,"value":4},{"source":18,"target":16,"value":4},{"source":18,"target":17,"value":4},{"source":19,"target":16,"value":4},{"source":19,"target":17,"value":4},{"source":19,"target":18,"value":4},{"source":20,"target":16,"value":3},{"source":20,"target":17,"value":3},{"source":20,"target":18,"value":3},{"source":20,"target":19,"value":4},{"source":21,"target":16,"value":3},{"source":21,"target":17,"value":3},{"source":21,"target":18,"value":3},{"source":21,"target":19,"value":3},{"source":21,"target":20,"value":5},{"source":22,"target":16,"value":3},{"source":22,"target":17,"value":3},{"source":22,"target":18,"value":3},{"source":22,"target":19,"value":3},{"source":22,"target":20,"value":4},{"source":22,"target":21,"value":4},{"source":23,"target":16,"value":3},{"source":23,"target":17,"value":3},{"source":23,"target":18,"value":3},{"source":23,"target":19,"value":3},{"source":23,"target":20,"value":4},{"source":23,"target":21,"value":4},{"source":23,"target":22,"value":4},{"source":23,"target":12,"value":2},{"source":23,"target":11,"value":9},{"source":24,"target":23,"value":2},{"source":24,"target":11,"value":7},{"source":25,"target":24,"value":13},{"source":25,"target":23,"value":1},{"source":25,"target":11,"value":12},{"source":26,"target":24,"value":4},{"source":26,"target":11,"value":31},{"source":26,"target":16,"value":1},{"source":26,"target":25,"value":1},{"source":27,"target":11,"value":17},{"source":27,"target":23,"value":5},{"source":27,"target":25,"value":5},{"source":27,"target":24,"value":1},{"source":27,"target":26,"value":1},{"source":28,"target":11,"value":8},{"source":28,"target":27,"value":1},{"source":29,"target":23,"value":1},{"source":29,"target":27,"value":1},{"source":29,"target":11,"value":2},{"source":30,"target":23,"value":1},{"source":31,"target":30,"value":2},{"source":31,"target":11,"value":3},{"source":31,"target":23,"value":2},{"source":31,"target":27,"value":1},{"source":32,"target":11,"value":1},{"source":33,"target":11,"value":2},{"source":33,"target":27,"value":1},{"source":34,"target":11,"value":3},{"source":34,"target":29,"value":2},{"source":35,"target":11,"value":3},{"source":35,"target":34,"value":3},{"source":35,"target":29,"value":2},{"source":36,"target":34,"value":2},{"source":36,"target":35,"value":2},{"source":36,"target":11,"value":2},{"source":36,"target":29,"value":1},{"source":37,"target":34,"value":2},{"source":37,"target":35,"value":2},{"source":37,"target":36,"value":2},{"source":37,"target":11,"value":2},{"source":37,"target":29,"value":1},{"source":38,"target":34,"value":2},{"source":38,"target":35,"value":2},{"source":38,"target":36,"value":2},{"source":38,"target":37,"value":2},{"source":38,"target":11,"value":2},{"source":38,"target":29,"value":1},{"source":39,"target":25,"value":1},{"source":40,"target":25,"value":1},{"source":41,"target":24,"value":2},{"source":41,"target":25,"value":3},{"source":42,"target":41,"value":2},{"source":42,"target":25,"value":2},{"source":42,"target":24,"value":1},{"source":43,"target":11,"value":3},{"source":43,"target":26,"value":1},{"source":43,"target":27,"value":1},{"source":44,"target":28,"value":3},{"source":44,"target":11,"value":1},{"source":45,"target":28,"value":2},{"source":47,"target":46,"value":1},{"source":48,"target":47,"value":2},{"source":48,"target":25,"value":1},{"source":48,"target":27,"value":1},{"source":48,"target":11,"value":1},{"source":49,"target":26,"value":3},{"source":49,"target":11,"value":2},{"source":50,"target":49,"value":1},{"source":50,"target":24,"value":1},{"source":51,"target":49,"value":9},{"source":51,"target":26,"value":2},{"source":51,"target":11,"value":2},{"source":52,"target":51,"value":1},{"source":52,"target":39,"value":1},{"source":53,"target":51,"value":1},{"source":54,"target":51,"value":2},{"source":54,"target":49,"value":1},{"source":54,"target":26,"value":1},{"source":55,"target":51,"value":6},{"source":55,"target":49,"value":12},{"source":55,"target":39,"value":1},{"source":55,"target":54,"value":1},{"source":55,"target":26,"value":21},{"source":55,"target":11,"value":19},{"source":55,"target":16,"value":1},{"source":55,"target":25,"value":2},{"source":55,"target":41,"value":5},{"source":55,"target":48,"value":4},{"source":56,"target":49,"value":1},{"source":56,"target":55,"value":1},{"source":57,"target":55,"value":1},{"source":57,"target":41,"value":1},{"source":57,"target":48,"value":1},{"source":58,"target":55,"value":7},{"source":58,"target":48,"value":7},{"source":58,"target":27,"value":6},{"source":58,"target":57,"value":1},{"source":58,"target":11,"value":4},{"source":59,"target":58,"value":15},{"source":59,"target":55,"value":5},{"source":59,"target":48,"value":6},{"source":59,"target":57,"value":2},{"source":60,"target":48,"value":1},{"source":60,"target":58,"value":4},{"source":60,"target":59,"value":2},{"source":61,"target":48,"value":2},{"source":61,"target":58,"value":6},{"source":61,"target":60,"value":2},{"source":61,"target":59,"value":5},{"source":61,"target":57,"value":1},{"source":61,"target":55,"value":1},{"source":62,"target":55,"value":9},{"source":62,"target":58,"value":17},{"source":62,"target":59,"value":13},{"source":62,"target":48,"value":7},{"source":62,"target":57,"value":2},{"source":62,"target":41,"value":1},{"source":62,"target":61,"value":6},{"source":62,"target":60,"value":3},{"source":63,"target":59,"value":5},{"source":63,"target":48,"value":5},{"source":63,"target":62,"value":6},{"source":63,"target":57,"value":2},{"source":63,"target":58,"value":4},{"source":63,"target":61,"value":3},{"source":63,"target":60,"value":2},{"source":63,"target":55,"value":1},{"source":64,"target":55,"value":5},{"source":64,"target":62,"value":12},{"source":64,"target":48,"value":5},{"source":64,"target":63,"value":4},{"source":64,"target":58,"value":10},{"source":64,"target":61,"value":6},{"source":64,"target":60,"value":2},{"source":64,"target":59,"value":9},{"source":64,"target":57,"value":1},{"source":64,"target":11,"value":1},{"source":65,"target":63,"value":5},{"source":65,"target":64,"value":7},{"source":65,"target":48,"value":3},{"source":65,"target":62,"value":5},{"source":65,"target":58,"value":5},{"source":65,"target":61,"value":5},{"source":65,"target":60,"value":2},{"source":65,"target":59,"value":5},{"source":65,"target":57,"value":1},{"source":65,"target":55,"value":2},{"source":66,"target":64,"value":3},{"source":66,"target":58,"value":3},{"source":66,"target":59,"value":1},{"source":66,"target":62,"value":2},{"source":66,"target":65,"value":2},{"source":66,"target":48,"value":1},{"source":66,"target":63,"value":1},{"source":66,"target":61,"value":1},{"source":66,"target":60,"value":1},{"source":67,"target":57,"value":3},{"source":68,"target":25,"value":5},{"source":68,"target":11,"value":1},{"source":68,"target":24,"value":1},{"source":68,"target":27,"value":1},{"source":68,"target":48,"value":1},{"source":68,"target":41,"value":1},{"source":69,"target":25,"value":6},{"source":69,"target":68,"value":6},{"source":69,"target":11,"value":1},{"source":69,"target":24,"value":1},{"source":69,"target":27,"value":2},{"source":69,"target":48,"value":1},{"source":69,"target":41,"value":1},{"source":70,"target":25,"value":4},{"source":70,"target":69,"value":4},{"source":70,"target":68,"value":4},{"source":70,"target":11,"value":1},{"source":70,"target":24,"value":1},{"source":70,"target":27,"value":1},{"source":70,"target":41,"value":1},{"source":70,"target":58,"value":1},{"source":71,"target":27,"value":1},{"source":71,"target":69,"value":2},{"source":71,"target":68,"value":2},{"source":71,"target":70,"value":2},{"source":71,"target":11,"value":1},{"source":71,"target":48,"value":1},{"source":71,"target":41,"value":1},{"source":71,"target":25,"value":1},{"source":72,"target":26,"value":2},{"source":72,"target":27,"value":1},{"source":72,"target":11,"value":1},{"source":73,"target":48,"value":2},{"source":74,"target":48,"value":2},{"source":74,"target":73,"value":3},{"source":75,"target":69,"value":3},{"source":75,"target":68,"value":3},{"source":75,"target":25,"value":3},{"source":75,"target":48,"value":1},{"source":75,"target":41,"value":1},{"source":75,"target":70,"value":1},{"source":75,"target":71,"value":1},{"source":76,"target":64,"value":1},{"source":76,"target":65,"value":1},{"source":76,"target":66,"value":1},{"source":76,"target":63,"value":1},{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]}'
+        ></graph-clustering-datalet>-->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/graph-datalet/demo/demo-clustering.html b/datalets/graph-datalet/demo/demo-clustering.html
new file mode 100644
index 0000000..d7ad05f
--- /dev/null
+++ b/datalets/graph-datalet/demo/demo-clustering.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Demo Graph with node clustering</title>
+    <link rel="import" href="../graph-with-clustering-datalet.html">
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
+</head>
+<script>
+    function loadDoc() {
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+            if (xhttp.readyState == 4 && xhttp.status == 200) {
+                document.getElementById("graph-placeholder").innerHTML = '<graph-with-clustering-datalet width="1000" height="700" graph=\'' + JSON.parse(xhttp.responseText).graph +
+                                                                         '\'></graph-with-clustering-datalet>';
+            }
+        };
+        xhttp.open("GET", "http://192.168.164.128/public_room/ajax/get-graph?id=1&type=comments", true);
+        xhttp.send();
+    }
+
+    loadDoc();
+
+</script>
+<body>
+<h1>Graph with clustering</h1>
+<!--
+graph='{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},{"name":"Woman1","group":2},{"name":"Judge","group":2},{"name":"Champmathieu","group":2},{"name":"Brevet","group":2},{"name":"Chenildieu","group":2},{"name":"Cochepaille","group":2},{"name":"Pontmercy","group":4},{"name":"Boulatruelle","group":6},{"name":"Eponine","group":4},{"name":"Anzelma","group":4},{"name":"Woman2","group":5},{"name":"MotherInnocent","group":0},{"name":"Gribier","group":0},{"name":"Jondrette","group":7},{"name":"Mme.Burgon","group":7},{"name":"Gavroche","group":8},{"name":"Gillenormand","group":5},{"name":"Magnon","group":5},{"name":"Mlle.Gillenormand","group":5},{"name":"Mme.Pontmercy","group":5},{"name":"Mlle.Vaubois","group":5},{"name":"Lt.Gillenormand","group":5},{"name":"Marius","group":8},{"name":"BaronessT","group":5},{"name":"Mabeuf","group":8},{"name":"Enjolras","group":8},{"name":"Combeferre","group":8},{"name":"Prouvaire","group":8},{"name":"Feuilly","group":8},{"name":"Courfeyrac","group":8},{"name":"Bahorel","group":8},{"name":"Bossuet","group":8},{"name":"Joly","group":8},{"name":"Grantaire","group":8},{"name":"MotherPlutarch","group":9},{"name":"Gueulemer","group":4},{"name":"Babet","group":4},{"name":"Claquesous","group":4},{"name":"Montparnasse","group":4},{"name":"Toussaint","group":5},{"name":"Child1","group":10},{"name":"Child2","group":10},{"name":"Brujon","group":4},{"name":"Mme.Hucheloup","group":8}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":8},{"source":3,"target":0,"value":10},{"source":3,"target":2,"value":6},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":2},{"source":9,"target":0,"value":1},{"source":11,"target":10,"value":1},{"source":11,"target":3,"value":3},{"source":11,"target":2,"value":3},{"source":11,"target":0,"value":5},{"source":12,"target":11,"value":1},{"source":13,"target":11,"value":1},{"source":14,"target":11,"value":1},{"source":15,"target":11,"value":1},{"source":17,"target":16,"value":4},{"source":18,"target":16,"value":4},{"source":18,"target":17,"value":4},{"source":19,"target":16,"value":4},{"source":19,"target":17,"value":4},{"source":19,"target":18,"value":4},{"source":20,"target":16,"value":3},{"source":20,"target":17,"value":3},{"source":20,"target":18,"value":3},{"source":20,"target":19,"value":4},{"source":21,"target":16,"value":3},{"source":21,"target":17,"value":3},{"source":21,"target":18,"value":3},{"source":21,"target":19,"value":3},{"source":21,"target":20,"value":5},{"source":22,"target":16,"value":3},{"source":22,"target":17,"value":3},{"source":22,"target":18,"value":3},{"source":22,"target":19,"value":3},{"source":22,"target":20,"value":4},{"source":22,"target":21,"value":4},{"source":23,"target":16,"value":3},{"source":23,"target":17,"value":3},{"source":23,"target":18,"value":3},{"source":23,"target":19,"value":3},{"source":23,"target":20,"value":4},{"source":23,"target":21,"value":4},{"source":23,"target":22,"value":4},{"source":23,"target":12,"value":2},{"source":23,"target":11,"value":9},{"source":24,"target":23,"value":2},{"source":24,"target":11,"value":7},{"source":25,"target":24,"value":13},{"source":25,"target":23,"value":1},{"source":25,"target":11,"value":12},{"source":26,"target":24,"value":4},{"source":26,"target":11,"value":31},{"source":26,"target":16,"value":1},{"source":26,"target":25,"value":1},{"source":27,"target":11,"value":17},{"source":27,"target":23,"value":5},{"source":27,"target":25,"value":5},{"source":27,"target":24,"value":1},{"source":27,"target":26,"value":1},{"source":28,"target":11,"value":8},{"source":28,"target":27,"value":1},{"source":29,"target":23,"value":1},{"source":29,"target":27,"value":1},{"source":29,"target":11,"value":2},{"source":30,"target":23,"value":1},{"source":31,"target":30,"value":2},{"source":31,"target":11,"value":3},{"source":31,"target":23,"value":2},{"source":31,"target":27,"value":1},{"source":32,"target":11,"value":1},{"source":33,"target":11,"value":2},{"source":33,"target":27,"value":1},{"source":34,"target":11,"value":3},{"source":34,"target":29,"value":2},{"source":35,"target":11,"value":3},{"source":35,"target":34,"value":3},{"source":35,"target":29,"value":2},{"source":36,"target":34,"value":2},{"source":36,"target":35,"value":2},{"source":36,"target":11,"value":2},{"source":36,"target":29,"value":1},{"source":37,"target":34,"value":2},{"source":37,"target":35,"value":2},{"source":37,"target":36,"value":2},{"source":37,"target":11,"value":2},{"source":37,"target":29,"value":1},{"source":38,"target":34,"value":2},{"source":38,"target":35,"value":2},{"source":38,"target":36,"value":2},{"source":38,"target":37,"value":2},{"source":38,"target":11,"value":2},{"source":38,"target":29,"value":1},{"source":39,"target":25,"value":1},{"source":40,"target":25,"value":1},{"source":41,"target":24,"value":2},{"source":41,"target":25,"value":3},{"source":42,"target":41,"value":2},{"source":42,"target":25,"value":2},{"source":42,"target":24,"value":1},{"source":43,"target":11,"value":3},{"source":43,"target":26,"value":1},{"source":43,"target":27,"value":1},{"source":44,"target":28,"value":3},{"source":44,"target":11,"value":1},{"source":45,"target":28,"value":2},{"source":47,"target":46,"value":1},{"source":48,"target":47,"value":2},{"source":48,"target":25,"value":1},{"source":48,"target":27,"value":1},{"source":48,"target":11,"value":1},{"source":49,"target":26,"value":3},{"source":49,"target":11,"value":2},{"source":50,"target":49,"value":1},{"source":50,"target":24,"value":1},{"source":51,"target":49,"value":9},{"source":51,"target":26,"value":2},{"source":51,"target":11,"value":2},{"source":52,"target":51,"value":1},{"source":52,"target":39,"value":1},{"source":53,"target":51,"value":1},{"source":54,"target":51,"value":2},{"source":54,"target":49,"value":1},{"source":54,"target":26,"value":1},{"source":55,"target":51,"value":6},{"source":55,"target":49,"value":12},{"source":55,"target":39,"value":1},{"source":55,"target":54,"value":1},{"source":55,"target":26,"value":21},{"source":55,"target":11,"value":19},{"source":55,"target":16,"value":1},{"source":55,"target":25,"value":2},{"source":55,"target":41,"value":5},{"source":55,"target":48,"value":4},{"source":56,"target":49,"value":1},{"source":56,"target":55,"value":1},{"source":57,"target":55,"value":1},{"source":57,"target":41,"value":1},{"source":57,"target":48,"value":1},{"source":58,"target":55,"value":7},{"source":58,"target":48,"value":7},{"source":58,"target":27,"value":6},{"source":58,"target":57,"value":1},{"source":58,"target":11,"value":4},{"source":59,"target":58,"value":15},{"source":59,"target":55,"value":5},{"source":59,"target":48,"value":6},{"source":59,"target":57,"value":2},{"source":60,"target":48,"value":1},{"source":60,"target":58,"value":4},{"source":60,"target":59,"value":2},{"source":61,"target":48,"value":2},{"source":61,"target":58,"value":6},{"source":61,"target":60,"value":2},{"source":61,"target":59,"value":5},{"source":61,"target":57,"value":1},{"source":61,"target":55,"value":1},{"source":62,"target":55,"value":9},{"source":62,"target":58,"value":17},{"source":62,"target":59,"value":13},{"source":62,"target":48,"value":7},{"source":62,"target":57,"value":2},{"source":62,"target":41,"value":1},{"source":62,"target":61,"value":6},{"source":62,"target":60,"value":3},{"source":63,"target":59,"value":5},{"source":63,"target":48,"value":5},{"source":63,"target":62,"value":6},{"source":63,"target":57,"value":2},{"source":63,"target":58,"value":4},{"source":63,"target":61,"value":3},{"source":63,"target":60,"value":2},{"source":63,"target":55,"value":1},{"source":64,"target":55,"value":5},{"source":64,"target":62,"value":12},{"source":64,"target":48,"value":5},{"source":64,"target":63,"value":4},{"source":64,"target":58,"value":10},{"source":64,"target":61,"value":6},{"source":64,"target":60,"value":2},{"source":64,"target":59,"value":9},{"source":64,"target":57,"value":1},{"source":64,"target":11,"value":1},{"source":65,"target":63,"value":5},{"source":65,"target":64,"value":7},{"source":65,"target":48,"value":3},{"source":65,"target":62,"value":5},{"source":65,"target":58,"value":5},{"source":65,"target":61,"value":5},{"source":65,"target":60,"value":2},{"source":65,"target":59,"value":5},{"source":65,"target":57,"value":1},{"source":65,"target":55,"value":2},{"source":66,"target":64,"value":3},{"source":66,"target":58,"value":3},{"source":66,"target":59,"value":1},{"source":66,"target":62,"value":2},{"source":66,"target":65,"value":2},{"source":66,"target":48,"value":1},{"source":66,"target":63,"value":1},{"source":66,"target":61,"value":1},{"source":66,"target":60,"value":1},{"source":67,"target":57,"value":3},{"source":68,"target":25,"value":5},{"source":68,"target":11,"value":1},{"source":68,"target":24,"value":1},{"source":68,"target":27,"value":1},{"source":68,"target":48,"value":1},{"source":68,"target":41,"value":1},{"source":69,"target":25,"value":6},{"source":69,"target":68,"value":6},{"source":69,"target":11,"value":1},{"source":69,"target":24,"value":1},{"source":69,"target":27,"value":2},{"source":69,"target":48,"value":1},{"source":69,"target":41,"value":1},{"source":70,"target":25,"value":4},{"source":70,"target":69,"value":4},{"source":70,"target":68,"value":4},{"source":70,"target":11,"value":1},{"source":70,"target":24,"value":1},{"source":70,"target":27,"value":1},{"source":70,"target":41,"value":1},{"source":70,"target":58,"value":1},{"source":71,"target":27,"value":1},{"source":71,"target":69,"value":2},{"source":71,"target":68,"value":2},{"source":71,"target":70,"value":2},{"source":71,"target":11,"value":1},{"source":71,"target":48,"value":1},{"source":71,"target":41,"value":1},{"source":71,"target":25,"value":1},{"source":72,"target":26,"value":2},{"source":72,"target":27,"value":1},{"source":72,"target":11,"value":1},{"source":73,"target":48,"value":2},{"source":74,"target":48,"value":2},{"source":74,"target":73,"value":3},{"source":75,"target":69,"value":3},{"source":75,"target":68,"value":3},{"source":75,"target":25,"value":3},{"source":75,"target":48,"value":1},{"source":75,"target":41,"value":1},{"source":75,"target":70,"value":1},{"source":75,"target":71,"value":1},{"source":76,"target":64,"value":1},{"source":76,"target":65,"value":1},{"source":76,"target":66,"value":1},{"source":76,"target":63,"value":1},{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]}'
+-->
+<div id="graph-placeholder"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/graph-datalet/graph-clustering-datalet.html b/datalets/graph-datalet/graph-clustering-datalet.html
new file mode 100644
index 0000000..bc56e07
--- /dev/null
+++ b/datalets/graph-datalet/graph-clustering-datalet.html
@@ -0,0 +1,585 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../base-datalet/base-datalet.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
+
+<!--
+`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
+
+Example:
+
+    <preview-datalet data-url="http://spod.routetopa.eu"
+    </preview-datalet>
+
+
+@element preview-datalet
+@status beta
+@homepage
+@group datalets
+-->
+
+<dom-module id="graph-clustering-datalet">
+    <template>
+
+        <link rel="stylesheet" href="static/css/graphClusteringStyle.css">
+
+        <style is="custom-style">
+
+            #dialog{
+                position: absolute;
+                padding: 20px;
+                top: 20px;
+                right:5%;
+            }
+
+            #close{
+                position: absolute;
+                top: -20px;
+                right: 3px;
+                --iron-icon-height: 20px;
+                --iron-icon-width: 20px;
+                width: 24px;
+                height: 24px;
+                --paper-fab-background:#9e9e9e;
+                z-index: 1001;
+            }
+
+        </style>
+
+        <div style="align-content: center;overflow: visible" id="graph_content">
+            <svg id="sbiricuda"></svg>
+        </div>
+
+        <paper-dialog id="dialog">
+            <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
+            <h2 id="dialog_title"></h2>
+            <paper-dialog-scrollable id="dialog_content">cos</paper-dialog-scrollable>
+        </paper-dialog>
+
+    </template>
+
+    <script src="static/js/d3.v3.js"></script>
+
+    <script>
+        _this  = null;
+
+        var dr = 4,      // default point radius
+            off = 15,    // cluster hull offset
+            expand = {}, // expanded clusters
+            data, net, force, hullg, hull, linkg, link, nodeg, node;
+
+
+        var fill = d3.scale.category20();
+        var curve = d3.svg.line()
+                .interpolate("cardinal-closed")
+                .tension(.85);
+
+        Polymer({
+            is : 'graph-clustering-datalet',
+
+            properties: {
+                /**
+                 * It's the url for the preview
+                 *
+                 * @attribute url
+                 * @type Strig
+                 * @default ''
+                 */
+                width: {
+                    type: Number,
+                    value: undefined
+                },
+
+                height: {
+                    type: Number,
+                    type: undefined
+                },
+
+                svg: {
+                    type: Object,
+                    value: undefined
+                },
+
+                feelings: {
+                    type: Array,
+                    values: ["Agree", "Neutral", "Not agree"]
+                },
+
+                gnodes : {
+                    type : Array,
+                    value : []
+                },
+
+                glinks : {
+                    type :Array,
+                    value : []
+                },
+
+                graph : {
+                   type : Object,
+                   value : {}
+                },
+
+                prev_selected_node : {
+                    type : Object,
+                    value : null
+                }
+            },
+
+           /* fill : function(group){
+                d3.scale.category20();
+            },*/
+
+            noop : function() { return false; },
+
+            nodeid : function(n) {
+                return n.size ? "_g_"+n.group : n.name;
+            },
+
+            linkid: function(l) {
+                var u = _this.nodeid(l.source),
+                    v = _this.nodeid(l.target);
+                return u<v ? u+"|"+v : v+"|"+u;
+            },
+
+            getGroup: function(n) {
+                return n.group;
+            },
+
+            // constructs the network to visualize
+            network : function(prev, index, expand) {
+                expand = expand || {};
+                var gm = {},    // group map
+                        nm = {},    // node map
+                        lm = {},    // link map
+                        gn = {},    // previous group nodes
+                        gc = {},    // previous group centroids
+                        nodes = [], // output nodes
+                        links = []; // output links
+
+                // process previous nodes for reuse or centroid calculation
+                if (prev) {
+                    prev.nodes.forEach(function(n) {
+                        var i = index(n), o;
+                        if (n.size > 0) {
+                            gn[i] = n;
+                            n.size = 0;
+                        } else {
+                            o = gc[i] || (gc[i] = {x:0,y:0,count:0});
+                            o.x += n.x;
+                            o.y += n.y;
+                            o.count += 1;
+                        }
+                    });
+                }
+
+                // determine nodes
+                for (var k=0; k < this.graph.nodes.length; ++k) {
+                    var n = this.graph.nodes[k],
+                            i = index(n),
+                            l = gm[i] || (gm[i]=gn[i]) || (gm[i]={group:i, size:0, nodes:[]});
+
+                    if (expand[i]) {
+                        // the node should be directly visible
+                        nm[n.name] = nodes.length;
+                        nodes.push(n);
+                        if (gn[i]) {
+                            // place new nodes at cluster location (plus jitter)
+                            n.x = gn[i].x + Math.random();
+                            n.y = gn[i].y + Math.random();
+                        }
+                    } else {
+                        // the node is part of a collapsed cluster
+                        if (l.size == 0) {
+                            // if new cluster, add to set and position at centroid of leaf nodes
+                            nm[i] = nodes.length;
+                            nodes.push(l);
+                            if (gc[i]) {
+                                l.x = gc[i].x / gc[i].count;
+                                l.y = gc[i].y / gc[i].count;
+                            }
+                        }
+                        l.nodes.push(n);
+                    }
+                    // always count group size as we also use it to tweak the force graph strengths/distances
+                    l.size += 1;
+                    n.group_data = l;
+                }
+
+                for (i in gm) { gm[i].link_count = 0; }
+
+                // determine links
+                for (k=0; k<this.graph.links.length; ++k) {
+                    var e = this.graph.links[k],
+                            u = index(e.source),
+                            v = index(e.target);
+                    if (u != v) {
+                        gm[u].link_count++;
+                        gm[v].link_count++;
+                    }
+                    u = expand[u] ? nm[e.source.name] : nm[u];
+                    v = expand[v] ? nm[e.target.name] : nm[v];
+                    var i = (u<v ? u+"|"+v : v+"|"+u),
+                            l = lm[i] || (lm[i] = {source:u, target:v, size:0});
+                    l.size += 1;
+                }
+                for (i in lm) { links.push(lm[i]); }
+
+                return {nodes: nodes, links: links};
+            },
+
+            // constructs the network to visualize
+
+            convexHulls : function(nodes, index, offset) {
+                var hulls = {};
+
+                // create point sets
+                for (var k=0; k<nodes.length; ++k) {
+                    var n = nodes[k];
+                    if (n.size) continue;
+                    var i = index(n),
+                            l = hulls[i] || (hulls[i] = []);
+                    l.push([n.x-offset, n.y-offset]);
+                    l.push([n.x-offset, n.y+offset]);
+                    l.push([n.x+offset, n.y-offset]);
+                    l.push([n.x+offset, n.y+offset]);
+                }
+
+                // create convex hulls
+                var hullset = [];
+                for (i in hulls) {
+                    hullset.push({group: i, path: d3.geom.hull(hulls[i])});
+                }
+                return hullset;
+            },
+
+            drawCluster : function(d) {
+                return curve(d.path); // 0.8
+            },
+
+            init : function() {
+                if (force) force.stop();
+
+                net = this.network(net, this.getGroup, expand);
+
+                force = d3.layout.force()
+                        .nodes(net.nodes)
+                        .links(net.links)
+                        .size([this.width, this.height])
+                        .linkDistance(function(l, i) {
+                            var n1 = l.source, n2 = l.target;
+                            // larger distance for bigger groups:
+                            // both between single nodes and _other_ groups (where size of own node group still counts),
+                            // and between two group nodes.
+                            //
+                            // reduce distance for groups with very few outer links,
+                            // again both in expanded and grouped form, i.e. between individual nodes of a group and
+                            // nodes of another group or other group node or between two group nodes.
+                            //
+                            // The latter was done to keep the single-link groups ('blue', rose, ...) close.
+                            return 30 +
+                                    Math.min(20 * Math.min((n1.size || (n1.group != n2.group ? n1.group_data.size : 0)),
+                                                    (n2.size || (n1.group != n2.group ? n2.group_data.size : 0))),
+                                            -30 +
+                                            30 * Math.min((n1.link_count || (n1.group != n2.group ? n1.group_data.link_count : 0)),
+                                                    (n2.link_count || (n1.group != n2.group ? n2.group_data.link_count : 0))),
+                                            100);
+                            //return 150;
+                        })
+                        .linkStrength(function(l, i) {
+                            return 1;
+                        })
+                        .gravity(0.05)   // gravity+charge tweaked to ensure good 'grouped' view (e.g. green group not smack between blue&orange, ...
+                        .charge(-600)    // ... charge is important to turn single-linked groups to the outside
+                        .friction(0.5)   // friction adjusted to get dampened display: less bouncy bouncy ball [Swedish Chef, anyone?]
+                        .start();
+
+                hullg.selectAll("path.hull").remove();
+                hull = hullg.selectAll("path.hull")
+                        .data(this.convexHulls(net.nodes, this.getGroup, off))
+                        .enter().append("path")
+                        .attr("class", "hull")
+                        .attr("d", this.drawCluster)
+                        .style("fill", function(d) { return fill(d.group); })
+                        .on("click", function(d) {
+                            console.log("hull click", d, arguments, this, expand[d.group]);
+                            expand[d.group] = false; _this.init();
+                        });
+
+                link = linkg.selectAll("line.link").data(net.links, this.linkid);
+                link.exit().remove();
+                link.enter().append("line")
+                        .attr("class", "link")
+                        .attr("x1", function(d) { return d.source.x; })
+                        .attr("y1", function(d) { return d.source.y; })
+                        .attr("x2", function(d) { return d.target.x; })
+                        .attr("y2", function(d) { return d.target.y; })
+                        .attr("style", function(t){ return "stroke:" + t.color })
+                        .style("stroke-width", function(d) { return d.size || 1; });
+
+
+                node = nodeg.selectAll("circle.node").data(net.nodes, this.nodeid);
+                node.exit().remove();
+                node.enter().append("circle")
+                    // if (d.size) -- d.size > 0 when d is a group node.
+                        .attr("class", function(d) { return "node" + (d.size?"":" leaf"); })
+                        .attr("r", function(d) { return d.size ? d.size + dr : dr+1; })
+                        //.attr("r", function (t) { return t.r;})
+                        .attr("cx", function(d) { return d.x; })
+                        .attr("cy", function(d) { return d.y; })
+                        .attr("id", function(d){ return d.id; })
+                        //.attr("style", function (t) { return t.color ? "fill:" + t.color : !1 + "; stroke:white" })
+                        .style("fill", function(d) { return fill(d.group); })
+                        .on("mouseover", this.mouseover)
+                        .on("mouseout", this.mouseout)
+                        .on("click", this.active)
+                        .on("click", function(d) {
+                            //console.log("node click", d, arguments, this, expand[d.group]);
+                            expand[d.group] = !expand[d.group];
+                            _this.init();
+                        });
+
+                node.call(force.drag);
+
+                force.on("tick", function() {
+                    if (!hull.empty()) {
+                        hull.data(_this.convexHulls(net.nodes, _this.getGroup, off))
+                                .attr("d", _this.drawCluster);
+                    }
+
+                    link.attr("x1", function(d) { return d.source.x; })
+                            .attr("y1", function(d) { return d.source.y; })
+                            .attr("x2", function(d) { return d.target.x; })
+                            .attr("y2", function(d) { return d.target.y; });
+
+                    node.attr("cx", function(d) { return d.x; })
+                            .attr("cy", function(d) { return d.y; });
+                });
+            },
+
+            buildGraph: function (){
+
+                    this.svg = this.svg.append("g")
+                            .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom))
+                            .append("g");
+
+                    //set initial zoom
+                    scale = (1.0);
+                    //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
+                    translate = [0, 0];
+                    this.svg.transition()
+                            .duration(750)
+                            .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
+                            .each("end", function () {
+                                d3.behavior.zoom()
+                                        .scale(scale)
+                                        .translate(translate);
+                            });
+                    //end set initial zoom
+
+                    this.svg.append("rect")
+                            .attr("fill", "white")
+                            .attr("width", this.width)
+                            .attr("height", this.height);
+
+                    //pezzotto
+                    this.svg.append("filter")
+                            .attr("id","filter1")
+                            .attr("x","0%")
+                            .attr("y","0%")
+                            .attr("width","100%")
+                            .attr("height","100%")
+                            .append("feImage")
+                            .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
+
+                    for (var i = 0; i < this.graph.links.length; ++i) {
+                        o = this.graph.links[i];
+                        o.source = this.graph.nodes[o.source];
+                        o.target = this.graph.nodes[o.target];
+                    }
+
+                    hullg = this.svg.append("g");
+                    linkg = this.svg.append("g");
+                    nodeg = this.svg.append("g");
+
+                    this.init();
+
+                    this.svg.attr("opacity", 1e-6)
+                            .transition()
+                            .duration(1000)
+                            .attr("opacity", 1);
+            },
+
+            zoom: function() {
+                _this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+            },
+
+            text: function (t){
+                var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
+                e.attr("style", function (t) {
+                    return "color:" + (t.color ? t.color : "#000")
+                }).append("xhtml:div").html(function (t) {
+                    //return t.fixed ? t.name : null
+                    return t.name;
+                })
+            },
+
+            tick : function () {
+                // d3.select("svg").attr("style", "transform:translate(8%)");
+                d3.selectAll("g foreignObject").attr("x", function (t) {
+                    return t.x + (t.r ? 0.8 * t.r : 15)
+                }).attr("y", function (t) {
+                    return t.y - 20
+                });
+
+                d3.selectAll("#logo text").attr("x", function (t) {
+                    return t.x + .7 * (t.r ? t.r : 15)
+                }).attr("y", function (t) {
+                    return t.y
+                });
+
+
+                _this.gnodes.attr("cx", function (t) {
+                    return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
+                }).attr("cy", function (t) {
+                    return t.y = Math.max(8, Math.min(600, t.y))
+                });
+
+                _this.glinks.attr("x1", function (t) {
+                    return t.source.x
+                }).attr("y1", function (t) {
+                    return t.source.y
+                }).attr("x2", function (t) {
+                    return t.target.x
+                }).attr("y2", function (t) {
+                    return t.target.y
+                })
+            },
+
+            mouseover : function (t) {
+                d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
+                    //return 1 == t.fixed ? 1.4 * t.r : 15
+                    return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
+                });
+
+                _this.$.dialog.close();
+                _this.$.dialog_title.innerHTML   = t.name;
+                _this.$.dialog_content.innerHTML = t.content;
+
+                _this.$.dialog.open();
+            },
+
+            mouseout : function () {
+                d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
+                    return t.r ? t.r : 15
+                });
+                _this.$.dialog.close();
+            },
+
+            active : function (t) {
+                _this.fire('graph-datalet_node-clicked', {node : t});
+
+                if(_this.prev_selected_node != null){
+                    _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
+                    _this.prev_selected_node.style.stroke = "#FFFFFF";
+                }
+
+                _this.prev_selected_node = document.getElementById("" + t.id);
+                _this.prev_selected_node.style.fill   = "#FFFFFF"
+                _this.prev_selected_node.style.stroke = t.color;
+
+                /* _this.$.dialog.close();
+                 _this.$.dialog_title.innerHTML   = t.name;
+                 _this.$.dialog_content.innerHTML = t.content;
+
+                 _this.$.dialog.open();*/
+            },
+
+            _onCloseClick : function(){
+                //_this.$.dialog.close();
+            },
+
+            /**
+             * It is called after the element’s template has been stamped and all elements inside the element’s local
+             * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
+             * and had their ready method called.
+             *
+             * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
+             *
+             * @method ready
+             *
+             */
+            ready: function(){
+
+                _this = this;
+
+                this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
+                    width: "100%",
+                    height: "100%"
+                }).attr("viewBox", "0 0 " + this.width + " " + this.height)
+                  .attr("pointer-events", "all")
+                  .attr("style", "transform:translate(0px)")
+                  .style("position", "absolute");
+
+                var groups = [];
+                for(var i= 0,j=0; i < this.graph.nodes.length;i++,j+=3){
+                    groups.push([{key : "" + j, values : []}, {key : "" + (j + 1), values : []}, {key : "" + (j + 2), values : []}]);
+                    if(this.graph.nodes[i].father != null){
+                        switch (parseInt(this.graph.nodes[i].sentiment)){
+                            case 1:
+                                groups[this.graph.nodes[i].father.id][0].values.push(this.graph.nodes[i]);
+                                break;
+                            case 2:
+                                groups[this.graph.nodes[i].father.id][1].values.push(this.graph.nodes[i]);
+                                break;
+                            case 3:
+                                groups[this.graph.nodes[i].father.id][2].values.push(this.graph.nodes[i]);
+                                break;
+                        }
+                    }
+                }
+
+                var index = 0;
+                for(var i=0; i < groups.length; i++){
+                    for(var j=0; j < groups[i].length;j++){
+                        for(var k=0; k < groups[i][j].values.length;k++)
+                            this.graph.nodes[groups[i][j].values[k].id].group = i;
+                    }
+                }
+
+                this.buildGraph();
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/graph-datalet/graph-datalet.html b/datalets/graph-datalet/graph-datalet.html
index 58279e1..a9b8151 100755
--- a/datalets/graph-datalet/graph-datalet.html
+++ b/datalets/graph-datalet/graph-datalet.html
@@ -74,6 +74,9 @@ Example:
                 --paper-fab-background:#9e9e9e;
                 z-index: 1001;
             }
+            #dialog_content{
+                padding : 10px;
+            }
 
         </style>
 
@@ -84,7 +87,7 @@ Example:
         <paper-dialog id="dialog">
             <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
             <h2 id="dialog_title"></h2>
-            <paper-dialog-scrollable id="dialog_content">cos</paper-dialog-scrollable>
+            <div id="dialog_content">cos</div>
         </paper-dialog>
 
     </template>
@@ -203,6 +206,8 @@ Example:
 
                 this.svg.selectAll(".link").attr("style", function(t){
                     return "stroke:" + t.color
+                }).attr("style", function(t){
+                    return "stroke-width:" + (t.size ? t.size : 1.0) + "px";
                 });
 
                 gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) {
@@ -225,7 +230,10 @@ Example:
                                                                                                     return t.color ? "fill:" + t.color : !1 + "; stroke:white"
                                                                                                 });
 
-                d3.selectAll('circle').attr("filter", function(t){return  t.image ? 'url(#filter1)' : ""});
+                d3.selectAll('circle').attr("filter", function(t){return  t.image ? 'url(#filter1)' : ""})
+                                         .selectAll('feImage')
+                                            .attr("xlink:href", function(t){
+                            return t.image ? t.image : "http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png"});
 
                 //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text);
                 d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
@@ -355,6 +363,7 @@ Example:
                 g.nodes[0].y = this.height / 2;
                 this.buildGraph(g);*/
 
+                var json = JSON.stringify(this.data);
                 var g = this.data;
                 g.nodes[0].x = this.width / 2;
                 g.nodes[0].y = this.height / 8;
diff --git a/datalets/graph-datalet/graph-with-clustering-datalet.html b/datalets/graph-datalet/graph-with-clustering-datalet.html
new file mode 100644
index 0000000..288e851
--- /dev/null
+++ b/datalets/graph-datalet/graph-with-clustering-datalet.html
@@ -0,0 +1,544 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../base-datalet/base-datalet.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
+
+<!--
+`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
+
+Example:
+
+    <preview-datalet data-url="http://spod.routetopa.eu"
+    </preview-datalet>
+
+
+@element preview-datalet
+@status beta
+@homepage
+@group datalets
+-->
+
+<dom-module id="graph-with-clustering-datalet">
+    <template>
+
+        <link rel="stylesheet" href="static/css/graphStyle.css">
+
+        <style is="custom-style">
+
+            #dialog{
+                position: absolute;
+                padding: 20px;
+                top: 20px;
+                right:5%;
+            }
+
+            #close{
+                position: absolute;
+                top: -20px;
+                right: 3px;
+                --iron-icon-height: 20px;
+                --iron-icon-width: 20px;
+                width: 24px;
+                height: 24px;
+                --paper-fab-background:#9e9e9e;
+                z-index: 1001;
+            }
+
+        </style>
+
+        <div style="align-content: center;overflow: visible" id="graph_content">
+            <svg id="sbiricuda"></svg>
+        </div>
+
+        <paper-dialog id="dialog">
+            <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
+            <h2 id="dialog_title"></h2>
+            <paper-dialog-scrollable id="dialog_content">cos</paper-dialog-scrollable>
+        </paper-dialog>
+
+    </template>
+
+    <script src="static/js/d3.v3.js"></script>
+
+    <script>
+        _this  = null;
+
+        Polymer({
+            is : 'graph-with-clustering-datalet',
+
+            properties: {
+                /**
+                 * It's the url for the preview
+                 *
+                 * @attribute url
+                 * @type Strig
+                 * @default ''
+                 */
+                graph : {
+                    type : Object,
+                    value : undefined
+                },
+
+                svgNodes : {
+                   type : Array,
+                   value : []
+                },
+
+                svgLinks : {
+                    type : Array,
+                    value : []
+                },
+
+                width: {
+                    type: Number,
+                    value: undefined
+                },
+
+                height : {
+                    type : Number,
+                    value: undefined
+                },
+
+                svg: {
+                    type: Object,
+                    value: undefined
+                },
+                feelings:{
+                    type: Array,
+                    values: ["Agree", "Neutral", "Not agree"]
+                },
+                prev_selected_node : {
+                    type : Object,
+                    value : null
+                },
+
+                force : {
+                    type : Object,
+                    value : null
+                },
+
+                edgesMap : {
+                    type : Array,
+                    value : []
+                },
+
+                groups: {
+                    type: Array,
+                    value: []
+                },
+
+                hull : {
+                    type : Array,
+                    value : []
+                },
+                /*test*/
+                hullg : {
+                    type : Array,
+                    value : []
+                },
+
+                offset :{
+                    type : Number,
+                    value : 15
+                }
+
+                /*end test*/
+            },
+
+            convexHulls : function() {
+                var hullset = [];
+                for(var i in _this.groups){
+                    for(var j=0; j < _this.groups[i].length;j++){
+                        var vertices = [];
+                        for(var v=0;v < _this.groups[i][j].values.length; v++){
+                            vertices.push([_this.groups[i][j].values[v].x - _this.offset, _this.groups[i][j].values[v].y - _this.offset]);
+                            vertices.push([_this.groups[i][j].values[v].x - _this.offset, _this.groups[i][j].values[v].y + _this.offset]);
+                            vertices.push([_this.groups[i][j].values[v].x + _this.offset, _this.groups[i][j].values[v].y - _this.offset]);
+                            vertices.push([_this.groups[i][j].values[v].x + _this.offset, _this.groups[i][j].values[v].y + _this.offset]);
+                        }
+
+                        hullset.push({id :  parseInt(i) + 3, sentiment: j , path: d3.geom.hull(vertices), extend : _this.groups[i][j].extend});
+                    }
+                }
+
+                return hullset;
+            },
+
+            fill : function(d){
+                /*var fill = d3.scale.category20();
+                return fill(d);*/
+                switch((d % 3)){
+                    case 0 :
+                        return "#1F77B4";
+                    case 1 :
+                        return "#2CA02C";
+                    case 2:
+                        return "#FF1E1E";
+                }
+            },
+
+            drawCluster : function(d) {
+                var curve = d3.svg.line()
+                        .interpolate("cardinal-closed")
+                        .tension(.85);
+
+                return curve(d.path); // 0.8
+            },
+
+            getNetwork : function(){
+
+                var nodes = [], links = [];
+                this.groups = [];
+
+                for(var i= 0,j=0; i < this.graph.nodes.length;i++,j+=3){
+
+                    var f = this.graph.nodes[i].father;
+                    if(f != null) {
+                        while (f.sentiment == this.graph.nodes[i].sentiment) f = f.father;
+                    }
+
+                    if(f != null){
+                        if(this.groups[f.id] == undefined){
+                            this.groups[f.id] = ([
+                                {key: "" + j, values: [], extend: true},
+                                {key: "" + (j + 1), values: [],extend: true},
+                                {key: "" + (j + 2), values: [], extend: true}
+                            ]);
+                        }
+
+                        this.graph.nodes[i].group = f.id;
+
+                        switch (parseInt(this.graph.nodes[i].sentiment)){
+                            case 1:
+                                if(this.groups[f.id][0].extend) {
+                                    this.groups[f.id][0].values.push(this.graph.nodes[i]);
+                                }
+                               break;
+                            case 2:
+                                if(this.groups[f.id][1].extend)
+                                   this.groups[f.id][1].values.push(this.graph.nodes[i]);
+                                break;
+                            case 3:
+                                if(this.groups[f.id][2].extend)
+                                   this.groups[f.id][2].values.push(this.graph.nodes[i]);
+                                break;
+                        }
+                    }else{
+                        this.graph.nodes[i].group = 0;
+                    }
+                }
+
+                var nodesMap = [];
+
+                for(var g in this.groups){
+                    for(var s in this.groups[g]) {
+                        if(this.groups[g][s].values.length > 0) {
+                            var node =  ({
+                                group: g,
+                                sentiment: parseInt(s) + 1,
+                                nodes: this.groups[g][s].values,
+                                r: this.groups[g][s].values.length * 6,
+                                extend: false
+                            });
+
+                            node.id = nodes.length;
+                            nodes.push(node);
+
+                            for(var n=0; n < this.groups[g][s].values.length;n++)
+                               nodesMap[this.groups[g][s].values[n].id] = node;
+
+                        }
+                    }
+                }
+
+                for(var e = 0; e < this.graph.links.length; e++){
+                    if(this.graph.nodes[this.graph.links[e].source.id].group !=  this.graph.nodes[this.graph.links[e].target.id].group) {
+                        links.push({
+                            //id: nodesMap[this.graph.nodes[this.graph.links[e].source.id].group].id + "-" + nodesMap[this.graph.nodes[this.graph.links[e].target.id].group].id,
+                            source: nodesMap[this.graph.links[e].source.id],
+                            target: nodesMap[this.graph.links[e].target.id],
+                            value: 100
+                        });
+                    }
+
+                }
+
+                //return {nodes : nodes, links : links};
+                return {nodes : this.graph.nodes, links : this.graph.links};
+
+            },
+
+            init : function(){
+
+                var net = this.getNetwork();
+
+                if(this.force != null) this.force.stop();
+                force = d3.layout.force()
+                                     .nodes(net.nodes)
+                                     .links(net.links)
+                                        .size([this.width, this.height])
+                                        .charge(-1e3)
+                                        .friction(.7)
+                                        .linkDistance(function (t){ return t.value ? t.value : 80})
+                                        .on("tick", this.tick).start();
+
+                this.hullg.selectAll("path.hull").remove();
+                this.hull = this.hullg.selectAll("path.hull")
+                        .data(this.convexHulls)
+                        .enter().append("path")
+                        .attr("class", "hull")
+                        .attr("d", this.drawCluster)
+                        .style("fill", "#60df20")
+                        .style("opacity", .2)
+                        .on("click", function(d) {
+                            alert(d.id);
+                        });
+
+
+                this.svg.selectAll(".link").data(net.links).remove();
+                this.svgLinks = this.svg.selectAll(".link").data(net.links).enter()
+                        .append("line")
+                        .attr("class", "link")
+                        .attr("style", function(t){ return "stroke:#333"; /*+ t.color*/ })
+                        .style("stroke-width", function(d) { return d.size || 0.3; });
+
+                this.svg.selectAll(".node").data(net.nodes).remove();
+                this.svgNodes = this.svg.selectAll(".node").data(net.nodes).enter()
+                        .append("g")
+                        .on("mouseover", this.mouseover)
+                        .on("mouseout", this.mouseout)
+                        .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
+                        .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
+                        .append("circle")
+                            .on("click", this.active)
+                            .attr("id", function(t){ return t.id })
+                            .attr("class", function (t) { return t.fixed ? "" : "drag"})
+                            .attr("r", function (t){ return t.r ? t.r : 15 })
+                            .attr("style", function (t) {
+                                switch(parseInt(t.sentiment)){
+                                    case 1 :
+                                        t.color = "#1F77B4";
+                                        break;
+                                    case 2 :
+                                        t.color = "#2CA02C";
+                                        break;
+                                    case 3:
+                                        t.color = "#D62728";
+                                        break;
+                                    default:
+                                        t.color = "#333";
+                                }
+                                //return t.color ? "fill:" + t.color : !1 + "; stroke:white"
+                                return "fill:" + t.color + "; stroke:white"
+                             })
+                            .attr("filter", function(t){return  t.image ? 'url(#filter1)' : ""});
+
+                this.svg.style("opacity", 1e-6)
+                        .transition()
+                        .duration(1000)
+                        .style("opacity", 1);
+
+                d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
+            },
+
+            buildGraph: function (){
+
+                this.svg = this.svg.append("g")
+                        .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom))
+                        .append("g");
+
+                //set initial zoom
+                scale = (1.0);
+                translate = [0, 0];
+                this.svg.transition()
+                        .duration(750)
+                        .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
+                        .each("end", function () {
+                            d3.behavior.zoom()
+                                    .scale(scale)
+                                    .translate(translate);
+                        });
+                //end set initial zoom
+
+                this.svg.append("rect")
+                        .attr("fill", "white")
+                        .attr("width", this.width)
+                        .attr("height", this.height);
+
+                //pezzotto
+                this.svg.append("filter")
+                        .attr("id","filter1")
+                        .attr("x","0%")
+                        .attr("y","0%")
+                        .attr("width","100%")
+                        .attr("height","100%")
+                        .append("feImage")
+                        .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
+
+                for (var i = 0; i < this.graph.links.length; ++i) {
+                    o = this.graph.links[i];
+                    o.source = this.graph.nodes[o.source];
+                    o.target = this.graph.nodes[o.target];
+                }
+
+                this.hullg = this.svg.append("g");
+
+                this.init();
+            },
+
+            zoom: function() {
+                _this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+            },
+
+            text: function (t){
+                var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
+                e.attr("style", function (t) {
+                    return "color:" + (t.color ? t.color : "#000")
+                }).append("xhtml:div").html(function (t) {
+                    //return t.fixed ? t.name : null
+                    return t.name;
+                })
+            },
+
+            tick : function () {
+
+                if (!_this.hull.empty()) {
+                    _this.hull.data(_this.convexHulls)
+                              .style("fill", function(d) {
+                                       return _this.fill(d.sentiment);
+                                    })
+                              .attr("d", _this.drawCluster);
+                }
+
+                d3.selectAll("g foreignObject").attr("x", function (t) {
+                    return t.x + (t.r ? 0.8 * t.r : 15)
+                }).attr("y", function (t) {
+                    return t.y - 20
+                });
+
+                d3.selectAll("#logo text").attr("x", function (t) {
+                    return t.x + .7 * (t.r ? t.r : 15)
+                }).attr("y", function (t) {
+                    return t.y
+                });
+
+                _this.svgNodes.attr("cx", function (t) {
+                    return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
+                }).attr("cy", function (t) {
+                    return t.y = Math.max(8, Math.min(600, t.y))
+                });
+
+                _this.svgLinks.attr("x1", function (t) {
+                    return t.source.x
+                }).attr("y1", function (t) {
+                    return t.source.y
+                }).attr("x2", function (t) {
+                    return t.target.x
+                }).attr("y2", function (t) {
+                    return t.target.y
+                });
+
+            },
+
+            mouseover : function (t) {
+                d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
+                    return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
+                });
+
+                _this.$.dialog.close();
+                _this.$.dialog_title.innerHTML   = t.name;
+                _this.$.dialog_content.innerHTML = t.content;
+
+                _this.$.dialog.open();
+            },
+
+            mouseout : function () {
+                d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
+                    return t.r ? t.r : 15
+                });
+                _this.$.dialog.close();
+            },
+
+            active : function (t) {
+
+                _this.init();
+                _this.fire('graph-datalet_node-clicked', {node : t});
+
+                if(_this.prev_selected_node != null){
+                    _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
+                    _this.prev_selected_node.style.stroke = "#FFFFFF";
+                }
+
+                _this.prev_selected_node = document.getElementById("" + t.id);
+                _this.prev_selected_node.style.fill   = "#FFFFFF"
+                _this.prev_selected_node.style.stroke = t.color;
+
+                /* _this.$.dialog.close();
+                 _this.$.dialog_title.innerHTML   = t.name;
+                 _this.$.dialog_content.innerHTML = t.content;
+
+                 _this.$.dialog.open();*/
+            },
+
+            _onCloseClick : function(){
+                //_this.$.dialog.close();
+            },
+
+            /**
+             * It is called after the element’s template has been stamped and all elements inside the element’s local
+             * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
+             * and had their ready method called.
+             *
+             * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
+             *
+             * @method ready
+             *
+             */
+            ready: function(){
+
+                _this = this;
+
+                this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
+                    width: "100%",
+                    height: "100%"
+                }).attr("viewBox", "0 0 " + this.width + " " + this.height)
+                  .attr("pointer-events", "all")
+                        .attr("style", "transform:translate(0px)")
+                  .style("position", "absolute");
+
+                this.buildGraph();
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/graph-datalet/graph-with-clustering-datalet_.html b/datalets/graph-datalet/graph-with-clustering-datalet_.html
new file mode 100644
index 0000000..5e0efbf
--- /dev/null
+++ b/datalets/graph-datalet/graph-with-clustering-datalet_.html
@@ -0,0 +1,516 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../base-datalet/base-datalet.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
+
+<!--
+`preview-datalet` is a datalet that allow user to preview the content of a web page. It creates a thumbnail of the site using the data-url attribute passed as input.
+
+Example:
+
+    <preview-datalet data-url="http://spod.routetopa.eu"
+    </preview-datalet>
+
+
+@element preview-datalet
+@status beta
+@homepage
+@group datalets
+-->
+
+<dom-module id="graph-with-clustering-datalet">
+    <template>
+
+        <link rel="stylesheet" href="static/css/graphStyle.css">
+
+        <style is="custom-style">
+
+            #dialog{
+                position: absolute;
+                padding: 20px;
+                top: 20px;
+                right:5%;
+            }
+
+            #close{
+                position: absolute;
+                top: -20px;
+                right: 3px;
+                --iron-icon-height: 20px;
+                --iron-icon-width: 20px;
+                width: 24px;
+                height: 24px;
+                --paper-fab-background:#9e9e9e;
+                z-index: 1001;
+            }
+
+        </style>
+
+        <div style="align-content: center;overflow: visible" id="graph_content">
+            <svg id="sbiricuda"></svg>
+        </div>
+
+        <paper-dialog id="dialog">
+            <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
+            <h2 id="dialog_title"></h2>
+            <paper-dialog-scrollable id="dialog_content">cos</paper-dialog-scrollable>
+        </paper-dialog>
+
+    </template>
+
+    <script src="static/js/d3.v3.js"></script>
+
+    <script>
+        _this  = null;
+
+        Polymer({
+            is : 'graph-with-clustering-datalet',
+
+            properties: {
+                /**
+                 * It's the url for the preview
+                 *
+                 * @attribute url
+                 * @type Strig
+                 * @default ''
+                 */
+                graph : {
+                    type : Object,
+                    value : undefined
+                },
+
+                svgNodes : {
+                   type : Array,
+                   value : []
+                },
+
+                svgLinks : {
+                    type : Array,
+                    value : []
+                },
+
+                width: {
+                    type: Number,
+                    value: undefined
+                },
+
+                height : {
+                    type : Number,
+                    value: undefined
+                },
+
+                svg: {
+                    type: Object,
+                    value: undefined
+                },
+                feelings:{
+                    type: Array,
+                    values: ["Agree", "Neutral", "Not agree"]
+                },
+                prev_selected_node : {
+                    type : Object,
+                    value : null
+                },
+
+                force : {
+                    type : Object,
+                    value : null
+                },
+
+                edgesMap : {
+                    type : Array,
+                    value : []
+                },
+
+                groups: {
+                    type: Array,
+                    value: []
+                },
+
+                hulls : {
+                    type: Array,
+                    value: []
+                },
+                hull : {
+                    type : Array,
+                    value : []
+
+                }
+            },
+
+            groupPath : function(d) {
+                return "M" +
+                        d3.geom.hull(d.values.map(function(i) { return [i.x, i.y];}))
+                           .join("L")
+                        + "Z";
+            },
+
+            groupFill : function(d, i) {
+                var fill = d3.scale.category10();
+                return fill(i & 3);
+            },
+
+            createHulls : function(nodes){
+                this.svg.selectAll("path")
+                        .data(nodes)
+                        .attr("d", this.groupPath)
+                        .enter().insert("path", "g")
+                        //.style("fill", _this.groupFill)
+                        .style("fill", "#60df20")
+                        //.style("stroke", _this.groupFill)
+                        .style("stroke", "#60df20")
+                        .style("stroke-width", 30)
+                        .style("stroke-linejoin", "round")
+                        .style("opacity", .2)
+                        .attr("d", this.groupPath);
+            },
+
+            getNetwork : function(){
+
+                var nodes = [], links = [], prevLevel = 1, prevGroupIndex = 1;
+
+                //for(var i=0; i < 27; i++) groups.push({key : "" + i , values : []});
+
+                //nodes.push(this.graph.nodes[0])
+
+                for(var i= 0,j=0; i < this.graph.nodes.length;i++,j+=3){
+                    var node = this.graph.nodes[i];
+                    var l = node.level;
+                    var sentiment = node.sentiment;
+                    var id = node.id;
+                    var father = node.father;
+
+                    this.groups.push([{key : "" + j, values : []}, {key : "" + (j + 1), values : []}, {key : "" + (j + 2), values : []}]);
+                    if(this.graph.nodes[i].father != null){
+                        switch (parseInt(this.graph.nodes[i].sentiment)){
+                            case 1:
+                                this.groups[this.graph.nodes[i].father.id][0].values.push(this.graph.nodes[i]);
+                               break;
+                            case 2:
+                                this.groups[this.graph.nodes[i].father.id][1].values.push(this.graph.nodes[i]);
+                                break;
+                            case 3:
+                                this.groups[this.graph.nodes[i].father.id][2].values.push(this.graph.nodes[i]);
+                                break;
+                        }
+                    }
+
+                   /*var node = this.graph.nodes[i];
+                   var l = node.level;
+                   var sentiment = node.sentiment;
+                   var id = node.id;
+
+                   var gi = (((this.graph.nodes[i].level - 1) * 3) + parseInt(this.graph.nodes[i].sentiment));
+                   groups[gi].values.push(node);*/
+
+                }
+
+                this.hulls = [];
+                var index = 0;
+                for(var i=0; i < _this.groups.length; i++){
+                    for(var j=0; j < _this.groups[i].length;j++){
+                        if(_this.groups[i][j].values.length != 0) {
+                            if(_this.groups[i][j].values.length > 0){
+                                _this.groups[i][j].key = "" + index;
+                                index++;
+                                this.hulls.push(_this.groups[i][j]);
+                            }
+                        }
+                    }
+                }
+            },
+
+            /*TEST*/
+            convexHulls : function(nodes, index, offset) {
+                var hulls = {};
+
+                // create point sets
+                for (var k=0; k<nodes.length; ++k) {
+                    var n = nodes[k];
+                    if (n.size) continue;
+                    var i = index(n),
+                            l = hulls[i] || (hulls[i] = []);
+                    l.push([n.x-offset, n.y-offset]);
+                    l.push([n.x-offset, n.y+offset]);
+                    l.push([n.x+offset, n.y-offset]);
+                    l.push([n.x+offset, n.y+offset]);
+                }
+
+                // create convex hulls
+                var hullset = [];
+                for (i in hulls) {
+                    hullset.push({group: i, path: d3.geom.hull(hulls[i])});
+                }
+                return hullset;
+            },
+
+            drawCluster : function(d) {
+                return this.curve(d.path); // 0.8
+            },
+
+            curve : function(d){
+                var curve = d3.svg.line()
+                      .interpolate("cardinal-closed")
+                      .tension(.85);
+                return curve(d);
+            },
+            /*END TEST*/
+
+            init : function(){
+
+                this.getNetwork();
+
+                if(this.force != null) this.force.stop();
+                force = d3.layout.force()
+                                     .nodes(this.graph.nodes)
+                                     .links(this.graph.links)
+                                        .size([this.width, this.height])
+                                        .charge(-1e3)
+                                        .friction(.7)
+                                        .linkDistance(function (t){ return t.value ? t.value : 80})
+                                        .on("tick", this.tick).start();
+
+                _this.svg.selectAll("path").remove();
+                _this.hull = _this.svg.append("path")
+                        .style("fill", "#60df20")
+                        .style("stroke", "#60df20")
+                        .style("stroke-width", 30)
+                        .attr("class", "hull")
+                        .style("stroke-linejoin", "round")
+                        .style("opacity", .2);
+                
+
+                this.svg.selectAll(".link").data(this.graph.links).remove();
+                this.svgLinks = this.svg.selectAll(".link").data(this.graph.links).enter()
+                        .append("line")
+                        .attr("class", "link")
+                    /* .attr("x1", function(d) { return d.source.x; })
+                     .attr("y1", function(d) { return d.source.y; })
+                     .attr("x2", function(d) { return d.target.x; })
+                     .attr("y2", function(d) { return d.target.y; })*/
+                        .attr("style", function(t){ return "stroke:" + t.color })
+                        .style("stroke-width", function(d) { return d.size || 1; });
+
+                this.svg.selectAll(".node").data(this.graph.nodes).remove();
+                this.svgNodes = this.svg.selectAll(".node").data(this.graph.nodes).enter()
+                        .append("g")
+                        .on("mouseover", this.mouseover)
+                        .on("mouseout", this.mouseout)
+                        .attr("class", function (t) { return t.fixed ? "node fixed" : "node"})
+                        .attr("name", function (t) { return t.name ? t.name.split(" ").join("_").toLowerCase() : ""})
+                        .append("circle")
+                            .on("click", this.active)
+                            .attr("id", function(t){ return t.id })
+                            .attr("class", function (t) { return t.fixed ? "" : "drag"})
+                            .attr("r", function (t){ return t.r ? t.r : 15 })
+                            .attr("style", function (t) { return t.color ? "fill:" + t.color : !1 + "; stroke:white"})
+                            .attr("filter", function(t){return  t.image ? 'url(#filter1)' : ""});
+
+                //d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
+
+                this.svg.style("opacity", 1e-6)
+                        .transition()
+                        .duration(1000)
+                        .style("opacity", 1);
+
+                d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text);
+            },
+
+            buildGraph: function (){
+
+                this.svg = this.svg.append("g")
+                        .call(d3.behavior.zoom().scaleExtent([.25, 20]).on("zoom", this.zoom))
+                        .append("g");
+
+                //set initial zoom
+                scale = (1.0);
+                //translate = [(width-scale*width)/2, ((height-scale*height)/4)];
+                translate = [0, 0];
+                this.svg.transition()
+                        .duration(750)
+                        .attr("transform", "translate(" + translate + ")scale(" + scale +    ")")
+                        .each("end", function () {
+                            d3.behavior.zoom()
+                                    .scale(scale)
+                                    .translate(translate);
+                        });
+                //end set initial zoom
+
+                this.svg.append("rect")
+                        .attr("fill", "white")
+                        .attr("width", this.width)
+                        .attr("height", this.height);
+
+                //pezzotto
+                this.svg.append("filter")
+                        .attr("id","filter1")
+                        .attr("x","0%")
+                        .attr("y","0%")
+                        .attr("width","100%")
+                        .attr("height","100%")
+                        .append("feImage")
+                        .attr("xlink:href","http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png");
+
+                this.init();
+            },
+
+            zoom: function() {
+                _this.svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+            },
+
+            text: function (t){
+                var e = t.append("svg:foreignObject").attr("width", 120).attr("height", 30);
+                e.attr("style", function (t) {
+                    return "color:" + (t.color ? t.color : "#000")
+                }).append("xhtml:div").html(function (t) {
+                    //return t.fixed ? t.name : null
+                    return t.name;
+                })
+            },
+
+            tick : function () {
+                // d3.select("svg").attr("style", "transform:translate(8%)");
+                d3.selectAll("g foreignObject").attr("x", function (t) {
+                    return t.x + (t.r ? 0.8 * t.r : 15)
+                }).attr("y", function (t) {
+                    return t.y - 20
+                });
+
+                d3.selectAll("#logo text").attr("x", function (t) {
+                    return t.x + .7 * (t.r ? t.r : 15)
+                }).attr("y", function (t) {
+                    return t.y
+                });
+
+                _this.svgNodes.attr("cx", function (t) {
+                    return t.x = Math.max(25, Math.min(_this.width - 50, t.x))
+                }).attr("cy", function (t) {
+                    return t.y = Math.max(8, Math.min(600, t.y))
+                });
+
+                _this.svgLinks.attr("x1", function (t) {
+                    return t.source.x
+                }).attr("y1", function (t) {
+                    return t.source.y
+                }).attr("x2", function (t) {
+                    return t.target.x
+                }).attr("y2", function (t) {
+                    return t.target.y
+                });
+
+                //create hulls
+                //var n = [{key : "0", values : [ _this.graph.nodes[14],  _this.graph.nodes[15], _this.graph.nodes[16],_this.graph.nodes[17], _this.graph.nodes[18]]}];
+
+                //_this.createHulls([_this.hulls[2]]);
+                //_this.createHulls(_this.hulls);
+
+                var vertices = [];
+                for(var i=0; i < _this.groups[0][0].values.length;i++){
+                   vertices.push([_this.groups[0][0].values[i].x, _this.groups[0][0].values[i].y]);
+                }
+                _this.hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; });
+            },
+
+            mouseover : function (t) {
+                d3.select(this).selectAll("circle").transition().duration(600).ease("elastic").attr("r", function (t) {
+                    //return 1 == t.fixed ? 1.4 * t.r : 15
+                    return 1 == t.fixed ? 1.4 * t.r : t.r + 10;
+                });
+
+                _this.$.dialog.close();
+                _this.$.dialog_title.innerHTML   = t.name;
+                _this.$.dialog_content.innerHTML = t.content;
+
+                _this.$.dialog.open();
+            },
+
+            mouseout : function () {
+                d3.select(this).selectAll("text").style("visibility", "hidden"), d3.select(this).selectAll("circle").transition().duration(400).attr("r", function (t) {
+                    return t.r ? t.r : 15
+                });
+                _this.$.dialog.close();
+            },
+
+            active : function (t) {
+
+                _this.init();
+                _this.fire('graph-datalet_node-clicked', {node : t});
+
+                if(_this.prev_selected_node != null){
+                    _this.prev_selected_node.style.fill = _this.prev_selected_node.style.stroke;
+                    _this.prev_selected_node.style.stroke = "#FFFFFF";
+                }
+
+                _this.prev_selected_node = document.getElementById("" + t.id);
+                _this.prev_selected_node.style.fill   = "#FFFFFF"
+                _this.prev_selected_node.style.stroke = t.color;
+
+                /* _this.$.dialog.close();
+                 _this.$.dialog_title.innerHTML   = t.name;
+                 _this.$.dialog_content.innerHTML = t.content;
+
+                 _this.$.dialog.open();*/
+            },
+
+            _onCloseClick : function(){
+                //_this.$.dialog.close();
+            },
+
+            /**
+             * It is called after the element’s template has been stamped and all elements inside the element’s local
+             * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
+             * and had their ready method called.
+             *
+             * Extract the dataset domain from the entire URL and set the text content of the datalet footer.
+             *
+             * @method ready
+             *
+             */
+            ready: function(){
+
+                _this = this;
+
+                this.svg = d3.select("svg#sbiricuda").attr("class", "svg").attr({
+                    width: "100%",
+                    height: "100%"
+                }).attr("viewBox", "0 0 " + this.width + " " + this.height)
+                  .attr("pointer-events", "all")
+                        .attr("style", "transform:translate(0px)")
+                  .style("position", "absolute");
+
+                this.buildGraph();
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/graph-datalet/static/css/graphClusteringStyle.css b/datalets/graph-datalet/static/css/graphClusteringStyle.css
new file mode 100644
index 0000000..c5b81a2
--- /dev/null
+++ b/datalets/graph-datalet/static/css/graphClusteringStyle.css
@@ -0,0 +1,22 @@
+#sbiricuda {
+    border: 1px solid #ccc;
+}
+
+.node {
+    fill: lightsteelblue;
+    stroke: #FFFFFF;
+    stroke-width: 3px;
+}
+.leaf {
+    stroke: #fff;
+    stroke-width: 1.5px;
+}
+.hull {
+    fill: lightsteelblue;
+    fill-opacity: 0.3;
+}
+.link {
+    stroke: #333;
+    stroke-opacity: 0.5;
+    pointer-events: none;
+}
\ No newline at end of file
diff --git a/datalets/graph-datalet/static/css/graphStyle.css b/datalets/graph-datalet/static/css/graphStyle.css
index f6ab1b5..8e62053 100755
--- a/datalets/graph-datalet/static/css/graphStyle.css
+++ b/datalets/graph-datalet/static/css/graphStyle.css
@@ -1,5 +1,5 @@
 circle{
-    stroke-width: 2.5px;
+    stroke-width: 1.5px;
 }
 
 .text {
@@ -11,8 +11,8 @@ circle{
     cursor: pointer;
     fill: #fff;
     stroke: #FFFFFF;
-    stroke-width: 4.5px
-    z-index: 100;
+    stroke-width: 2.5px
+    z-index: 10;
 }
 
 .node.fixed {
