function liste(json)
	{
		content = "<div class=\"articles\">";
		
		for (i = 0; i < json.clusters.length && i<4; i++)
		{
			content += "<div name=\"cluster_id\" class=\"article\" id=\""+json.clusters[i].id+"\"><div class=\"inner-article clearfix\"><h2><a title=\"Lire l\'article\" id=\""+json.clusters[i].id+"\" href=\"http://localhost:8000/documents_cluster?query_id="+json.query.query_id+"&cluster_id="+json.clusters[i].id+"&offset=0&count=10\">";
			content += json.clusters[i].title;
			content += "</a></h2><p class=\"number-article\"><a href=\"#\">";
			content += json.clusters[i].documents_number;
			content +=" articles | ";
			content += json.clusters[i].annotations.length;
			content += " annotations </a><a title=\"ajouter une annotation\" class=\"add-annotation\" href=\"#\"></a></p> <div class=\"article-annotations\"><a title=\"title\" class=\"blue\" href=\"#\" style=\"width:20%;\"></a><a title=\"title\" class=\"green\" href=\"#\" style=\"width:20%;\"></a><a title=\"title\" class=\"red\" href=\"#\" style=\"width:40%;\"></a><a title=\"title\" class=\"empty\" href=\"#\" style=\"width:20%;\"></a></div><div class=\"article-content\">";
			content +="<div class=\"article-visuel-wrap\"><img class=\"article-visuel\" src=\"/static/img/visuel-article.jpg\" alt=\"\" /></div>";	 
			content +="<p class=\"resume\">";
			content += json.clusters[i].abstract;
			content += "</p><ul class=\"links\"><ul>";
			for (j = 0; j < json.clusters[i].documents.length; j++)
			{
				content += "<li><a href=\"\" id=\""+json.clusters[i].documents[j].id+"\">";
				content += json.clusters[i].documents[j].title;
				content += "</a></li>";
			}
			content +="</ul></ul>";
			content +="</div></div></div>";
		}
		content +="</div>";
		$("#right").empty();
		$(content).appendTo("#right");
	}
	
	
	function treemap(json)
	{
		var k =1;
		content = "<div class=\"actus\">";
		for (i = 0; i < json.clusters.length && i<4; i++)
		{
			content += "<a id=\""+json.clusters[i].id+"\" href=\"http://localhost:8000/documents_cluster?query_id="+json.query.query_id+"&cluster_id="+json.clusters[i].id+"&offset=0&count=10\"><div  class=\"actu\"><img src=\"/static/img/home-visuel-"+k+".jpg\" alt=\"\" /><div class=\"inner-actu\">";
			content += "<h2> ";
			content += json.clusters[i].title;
			content += "</h2></div></div></a>";
			k++;
		}
		content +="</div>";
		$("#right").empty();
		$(content).appendTo("#right");
	}