{% extends "document/document.html" %}


{% comment %}

Main page of the portal.

{% endcomment %}



{% block head %}
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_URL }}treemap/design.css"/>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/d3/d3.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/d3/d3.layout.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/pure_min.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}treemap/treemap.js"></script>
	
{% endblock %}


    <section>
        <h2>Welcome, {{ user.username }}</h2>
        <p>This is the main page of the web portal.</p>
    </section>
    


{% block content %}

    <section>
    	<h2>Filtres</h2>
    	<button onclick="filterTreeMapData()">filtrer</button>
    </section>
    
    <h1>Treemap et sa timeline sous forme de streamgraph</h1>
	
	<div id="streamgraphTimeline"></div>
	
	<div id="treemap"></div>
	
	<div id="streamgraphTemplate">
		<img class="streamgraph_img" src="" alt=""/>
		<p class="title"></p>
	</div>
	
	<script type="text/javascript" src="{{ STATIC_URL }}treemap/donnees.js"> </script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/relations.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/couleurs.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/streamgraph.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}libraries/nco/treemap.js"></script>
	
	
{% endblock %}