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");

	}