<!DOCTYPE html>
<html lang="en" ng-app="querypro">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Jesse Cascio">

    <title>SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- d3 @ 3.5.5 -->
    <script src="js/d3.min.js"></script>

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <div ng-include src="'includes/navigation.html'"></div>

        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Blank</h1>
                        <div class="d3"></div>
                        <!-- d3 code -->
                        <script type="text/javascript">

                            // From http://mkweb.bcgsc.ca/circos/guide/tables/
                            var matrix = [
                              [11975,  5871, 8916, 2868],
                              [ 1951, 10048, 2060, 6171],
                              [ 8010, 16145, 8090, 8045],
                              [ 1013,   990,  940, 6907]
                            ];

                            var chord = d3.layout.chord()
                                .padding(.05)
                                .sortSubgroups(d3.descending)
                                .matrix(matrix);

                            var width = 960,
                                height = 500,
                                innerRadius = Math.min(width, height) * .41,
                                outerRadius = innerRadius * 1.1;

                            var fill = d3.scale.ordinal()
                                .domain(d3.range(4))
                                .range(["#000000", "#FFDD89", "#957244", "#F26223"]);

                            var svg = d3.select("div.d3").append("svg")
                                .attr("width", width)
                                .attr("height", height)
                              .append("g")
                                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

                            svg.append("g").selectAll("path")
                                .data(chord.groups)
                              .enter().append("path")
                                .style("fill", function(d) { return fill(d.index); })
                                .style("stroke", function(d) { return fill(d.index); })
                                .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
                                .on("mouseover", fade(.1))
                                .on("mouseout", fade(1));

                            var ticks = svg.append("g").selectAll("g")
                                .data(chord.groups)
                              .enter().append("g").selectAll("g")
                                .data(groupTicks)
                              .enter().append("g")
                                .attr("transform", function(d) {
                                  return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
                                      + "translate(" + outerRadius + ",0)";
                                });

                            ticks.append("line")
                                .attr("x1", 1)
                                .attr("y1", 0)
                                .attr("x2", 5)
                                .attr("y2", 0)
                                .style("stroke", "#000");

                            ticks.append("text")
                                .attr("x", 8)
                                .attr("dy", ".35em")
                                .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
                                .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
                                .text(function(d) { return d.label; });

                            svg.append("g")
                                .attr("class", "chord")
                              .selectAll("path")
                                .data(chord.chords)
                              .enter().append("path")
                                .attr("d", d3.svg.chord().radius(innerRadius))
                                .style("fill", function(d) { return fill(d.target.index); })
                                .style("opacity", 1);

                            // Returns an array of tick angles and labels, given a group.
                            function groupTicks(d) {
                              var k = (d.endAngle - d.startAngle) / d.value;
                              return d3.range(0, d.value, 1000).map(function(v, i) {
                                return {
                                  angle: v * k + d.startAngle,
                                  label: i % 5 ? null : v / 1000 + "k"
                                };
                              });
                            }

                            // Returns an event handler for fading a given chord group.
                            function fade(opacity) {
                              return function(g, i) {
                                svg.selectAll(".chord path")
                                    .filter(function(d) { return d.source.index != i && d.target.index != i; })
                                  .transition()
                                    .style("opacity", opacity);
                              };
                            }

                           
                            /*
                            var columns = ['hash', 'query', 'duration'];
                            var points  = [
                                [123,'query1',.230],
                                [124,'query2',.231],
                                [125,'query3',.232],
                                [126,'query4',.233],
                                [127,'query5',.234],
                                [128,'query6',.235],
                                [129,'query7',.236],
                                [131,'query8',.237],
                            ];

                            d3.select("body").append("p").text("New paragraph!");
                            */
                        </script>

                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- angularjs @ 1.4.1 -->
    <script src="js/angular.min.js"></script>

    <!-- app -->
    <script src="js/app.js"></script>

    <!-- jQuery -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="dist/js/sb-admin-2.js"></script>

</body>

</html>
