<!DOCTYPE html>
<meta charset="utf-8">
<title>Partition - Icicle</title>
<style>

.node {
  fill: #ddd;
  stroke: #fff;
}

.label {
  font: 10px sans-serif;
  text-anchor: middle;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/static/ecflow.js"></script><br/>
<h4>{{ title }}</h4>
{{ time }} 
  <a href="{{ top }}">top</a>
  <a href="{{ json_url }}">json</a>
 {% for item in items %}
  <a href="{{ item.href }}">{{ item.key }}</a>
 {% endfor %}<br/>
  Built with <a href="http://d3js.org">D3.js</a>. Based on
  an <a href="http://bl.ocks.org/tgk/6044254">example</a>
  by <a href="http://bost.ocks.org/mike">Mike Bostock</a>.
  <a href="http://www.ecmwf.int" class="test">ecmwf</a>
  <input name="updateButton" 
         type="button" 
         value="Update" 
         onclick="updateData()" /><br/>
<div id="timer"></div>
<script type="text/javascript">
var seconds_left = 1;
 document.getElementById('timer').innerHTML = 300;
var interval = setInterval(function() {
    document.getElementById('timer').innerHTML -= seconds_left;
    if (document.getElementById('timer').innerHTML <= 10)
    {
        document.getElementById('timer').innerHTML = '!!!';
        clearInterval(interval);
    }
}, 1000);

var jsondata ="{{ json_url }}";

var width = 960,
    height = 500;

var color = d3.scale.category20();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var partition = d3.layout.partition()
    .size([width, height])
    .value(function(d) { return d.size; });

// d3.json("/static/flare.json", function(error, root) {
d3.json(jsondata, function(error, root) {
  var nodes = partition.nodes(root);

  svg.selectAll(".node")
      .data(nodes)
    .enter().append("rect")
      .attr("class", "node")
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("width", function(d) { return d.dx; })
      .attr("height", function(d) { return d.dy; })
      .style("fill", colour);
//.style("fill", function(d) { return color((d.children ? d : d.parent).name);});

  svg.selectAll(".label")
      .data(nodes.filter(function(d) { return d.dx > 6; }))
    .enter().append("text")
      .attr("class", "label")
      .attr("dy", ".35em")
      .attr("transform", function(d) { return "translate(" + (d.x + d.dx / 2) + "," + (d.y + d.dy / 2) + ")rotate(90)"; })
      .text(function(d) { return d.name; });
});

</script>

<!--DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta content="utf-8" http-equiv="encoding">
<title>Suite Icicle</title>
<meta name="description" content="A visualisation of coffee flavours.">
<style>
@import url(http://d3js.org/../media/style.css);
path {
  stroke: #000;
  stroke-width: 1.5;
  cursor: pointer;
}

text {
  font: 11px sans-serif;
  cursor: pointer;
}

body {
  width: 880px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin: .5em 0;
}

p#intro {
  text-align: center;
  margin: 1em 0;
}
</style>
</head><body>
<script>
var jsondata ="{{ jsondata }}";
var WIDTH=1024, HEIGHT= 1024;
</script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/static/ecflow.js"></script><br/>
<script src="/static/icicle.js"></script><br/>
<h3>{{ title }}</h3>
<p> {{ time }} <a href="{{ jsondata }}">json</a>
  Built with <a href="http://d3js.org">D3.js</a>. Based on
  an <a href="http://bl.ocks.org/mbostock/1005873">example</a>
  by <a href="http://bost.ocks.org/mike">Mike Bostock</a>.
</body></html-->
