<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="eye_diagram_browser.js" charset="utf-8"></script>
<style>
#dg {
  background-color: #fff;
  font-size: 4px;
}
#dg .line {
  fill: none;
}
#dg .nodes {
  stroke: #000;
  stroke-width: 0.5;
}
</style>

<svg id="dg"></svg>

<script type="text/javascript">
// options, see the opts structure below for details
var height = 600;
var width = 700;
var tension = 1;
var ctrl_point_offset_coeff = 0.3;
var Z_y_margin_coeff = 0.25;
var radius = 400;
var nodesize = 3;
var Z_labels_dy = 8;
var Z_labels_dx = 0;
var Y_labels_dy = 2;
var Y_labels_dx = 5;
var Y_left_angle = 3.1415 / 2;
var Y_right_angle = 3.1415 / 2;

var opts = { height: height,
             width: width,
             // parameter of edge behaviour (d3 "bundle" spline parameter)
             tension: tension,
             // parameter of edge behaviour (determines where spline control
             // points lie between the connected nodes)
             ctrl_point_offset_coeff: ctrl_point_offset_coeff,
             // Z are the nodes in the middle of the diagram positioned on a
             // vertical line
             Z: {
               // nodes will lie in a vertical line between y0 and y1 at equal
               // spacing
               y0: Z_y_margin_coeff * height,
               y1: (1 - Z_y_margin_coeff) * height,
               // x position of the nodes
               x: width / 2,
               nodesize: nodesize,
               draw_labels: true,
               // label text horizontal offset
               labels_dx: Z_labels_dx,
               // label text vertical offset
               labels_dy: Z_labels_dy,
               // label text anchor
               labels_anchor: "middle"
             },
             // Y_left and Y_right are side nodes positioned along a part of
             //  the perimeter of a circle according to the options
             Y_left: {
               // how large part of the perimeter of the cirle is used
               // (angle_at_node runs from -angle/2 to angle/2 with equal
               // spacing)
               angle: Y_left_angle,
               // vertical radius of the cirle
               y_radius: radius,
               // vertical center of the circle
               // [node_y_pos = y_offset + y_radius * sin(angle_at_node)]
               y_offset: height / 2,
               // horizontal radius of the circle (negative for left size nodes)
               x_radius: -radius,
               // horizontal center of the cirle
               // [node_x_pos = x_offset + x_radius * cos(angle_at_node)]
               x_offset: radius + 0.05 * width,
               // 1 for left side nodes, -1 for right side (if 
               // x_radius != y_radius, edges will not be exactly normal to the
               // tangent of the circle)
               tan_dir: 1,
               nodesize: nodesize,
               draw_labels: true,
               labels_dx: -Y_labels_dx,
               labels_dy: Y_labels_dy,
               labels_anchor: "end"
             },
             Y_right: {
               angle: Y_right_angle,
               y_radius: radius,
               y_offset: height / 2,
               x_radius: radius,
               x_offset: 0.95 * width - radius,
               tan_dir: -1,
               nodesize: nodesize,
               draw_labels: true,
               labels_dx: Y_labels_dx,
               labels_dy: Y_labels_dy,
               labels_anchor: "start"
             }
           };

// load data and draw
d3.json("data.json", function(error, json) {
  if (error) return console.warn(error);
  draw_diagram("#dg", json.Y_left, json.Y_right, json.Z, json.Y_left_to_Z, json.Y_right_to_Z, opts);
});
</script>