<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta content="text/html" http-equiv="encoding">
<title>Suite Sunburst</title>
<meta name="description" content="A visualisation of coffee flavours.">
<script src="http://d3js.org/d3.v3.min.js"></script>
<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>
<h3>{{ title }}</h3>
<a href="{{ top }}">top</a>
<a href="{{ json_url | safe }}">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>.
  Sunburst zooming based on
  an <a href="http://bl.ocks.org/mbostock/4348373">example</a>
  by <a href="http://bost.ocks.org/mike">Mike Bostock</a>.
<script>
var jsondata ="{{ json_url }}";
// var jsondata ="flare.json";
var WIDTH=1024, HEIGHT= 1024;
</script>
<script src="/static/ecflow.js"></script><br/>
<script src="/static/sunburst.js"></script><br/>
</body></html>
