demos/d3-errorbars-rectangle-ellipse.html


<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>

html, body {
  position: relative;
  height: 100%;
    font-family: 'Open Sans' !important;
}

#plot1 {
    width: 100%;
    height: 75%;;
}

svg,
canvas {
  position: absolute;
  image-rendering: optimizeSpeed;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.axis-label {
  font-size: 18px;
}

.axis .tick text {
  font-size: 14px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


.grid path {
      stroke-width: 1;
      fill: none;
}
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
    stroke-width: 1;
    shape-rendering: crispEdges;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}
 
.axis path {
    fill: none;
    stroke: #bbb;
    shape-rendering: crispEdges;
}
 
.axis text {
    fill: #555;
}
 
.axis line {	
    stroke: #e7e7e7;
    shape-rendering: crispEdges;
}
 
.axis .axis-label {
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}

text.axis-label tspan.sub, text.axis-label tspan.sup {
    font-size: 50%;
}

.legend, .tick {
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}
 
.line {
    fill: none;
    stroke-width: 1.5px;
}

.line.highlight {
    opacity: 1;
    stroke-width: 4.5px;
}

.line.unhighlight {
  opacity: 0.2;
}
 
.dot {
    /* consider the stroke-with the mouse detect radius? */
    stroke: transparent;
    stroke-width: 10px;  
    cursor: pointer;
}
 
.dot:hover {
    stroke: rgba(68, 127, 255, 0.3);
}

.centerline {
    stroke: orange;
    stroke-dasharray: 10,2;
}

rect {
  fill: none;
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none;
}

rect.zoom {
  stroke: steelblue;
  fill-opacity: 0.5;
}
</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="../lib/jquery-extend.js"></script>
  <script src="../lib/xy-chart.js" charset="utf-8"></script>
  <script src="../lib/rectangle-interactor.js"></script>
  <script src="../lib/ellipse-interactor.js"></script>
  <script src="../lib/angle-slice-interactor.js"></script>
  <script src="../lib/x-slice-interactor.js"></script>
  <script src="../lib/polygon-interactor.js"></script>
  <script src="../lib/monotonic-function-interactor.js"></script>
</head>
<body>
<!--<script src="d3.v3.min.js"></script>-->
<script>
var rectangle;
window.onload = function() {    
  chart = xyChart.default({show_line: true, show_errorbars: true, ytransform: 'linear', legend: {show: true}})
  var opts1 = { 
      type:'Rectangle', 
      name:'roi_rectangle',
      color1: '#ff0000',
      color2: '#ff0000',
      fill: "none",
      showcenter: true,
      show: false,
      xmin: 0.022, 
      ymin: 1.0,
      xmax: 0.024, 
      ymax: 6
  }
  
  var opts2 = { 
      type:'Ellipse', 
      name:'ellipse_1',
      color1: '#00ffff',
      color2: '#00ffff',
      fill: "none",
      show_center: true,
      show_points: false,
      show: false,
      cx: 0.022, 
      cy: 10.0,
      rx: 0.001,
      ry: 10
  }
  
  var opts3 = { 
      type:'Ellipse', 
      name:'ellipse_2',
      color1: '#00ff00',
      color2: '#00ff00',
      fill: "none",
      show_center: true,
      show_points: false,
      show: false,
      cx: 0.023, 
      cy: 20.0,
      rx: 0.0005,
      ry: 20
  }
  
  var opts4 = {
    type: "AngleSlice",
    name: "angle_slice",
    show_lines: true,
    color1: "red",
    color2: "pink",
    cx: 0.024,
    cy: 25.0,
    angle_offset: Math.PI/4.0,
    angle_range: Math.PI/60.0
  }
  
  var optsx = {
    type: "xslice",
    name: "xslice",
    show_lines: true,
    color1: "blue",
    color2: "green",
    x1: 0.022,
    x2: 0.025
  }
  
  var opts_poly = { 
    type:'Polygon',
    radius: 5, 
    name:'roi_polygon',
    color1: 'purple',
    color2: 'LightOrange',
    interpolation: 'linear',
    prevent_crossing: false,
    show_points: true,
    show_lines: true,
    close_path: true,
    fill: "none",
    //showcenter: true,
    //show: true,
    points: [[0.021,0], [0.0215,15],[0.023, 50], [0.02, 40], [0.0205,10]]
  }
  
  var opts_functional = {
    type: "Function",
    name: "gaussian",
    color1: "khaki",
    functional: function(x) { return 80 * Math.exp(-Math.pow((x - 0.0225), 2) / (2 * Math.pow(0.001, 2))) + 5 }, 
    show_lines: true, 
    dx: 4
  }
  
  d3.json("sample_data/pbr_live_data.json", function(error, data) {
      mydata = data;
      c = d3.select("#plot1")
        .data([data[0].data])
        .call(chart);
      rectangle = new rectangleInteractor.default(opts1);
      ellipse_1 = new ellipseInteractor.default(opts2);
      ellipse_2 = new ellipseInteractor.default(opts3);
      angle_slice = new angleSliceInteractor.default(opts4);
      x_slice = new xSliceInteractor.default(optsx);
      polygon = new polygonInteractor.default(opts_poly);
      functional = new monotonicFunctionInteractor.default(opts_functional);
      chart
        .options(data[0].options)
        .interactors(x_slice)
        .interactors(rectangle)
        .interactors(ellipse_1)
        .interactors(ellipse_2)
        .interactors(angle_slice)
        .interactors(polygon)
        .interactors(functional)
        .zoomRect(true)
      chart.options({axes: {xaxis: {label: 'Q<tspan dy="2" class="sub">efgh</tspan><tspan dx="-2em" dy="-10" class="sub">1234abcg</tspan>'}}}).update()
  });
}
// chart.target_ratio(1).update(); // changes aspect ratio!
// var new_dims = chart.dims();
// new_dims.xmax = 256;
// chart.dims(new_dims).update(); // new dimensions for 2d plot object
// chart.show_grid(false); // grid off

</script>
<div id="plot1">
</div>
<div id="demos">
</div>
</body>
</html>