D3 Examples - JS Bin // source http://jsbin.com/zezovo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"></script>
<script src="https://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="https://static.gsmlg.com/data.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#paper {
  box-shadow: 0 0 1px 3px rgba(200,200,200,.3);
  margin: 10px;
}
</style>
</head>
<body>
  <div id="paper"></div>
  <div id="canvas"></div>
<script id="jsbin-javascript">
"use strict";
​
var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };
​
var R = Raphael;
​
var LineChart = (function () {
  function LineChart() {
    var options = arguments[0] === undefined ? {} : arguments[0];
    this._initOptions(options);
    this._initPaper();
  }
​
  _prototypeProperties(LineChart, null, {
    _initOptions: {
      value: function _initOptions(options) {
        this.options = _.defaults(options, {
          el: document.createElement("div"),
          width: 640,
          height: 480,
          paddingLeft: 40,
          paddingTop: 40,
          paddingRight: 40,
          paddingBottom: 40,
          axis: {
            x: {
              start: 0,
              end: 1000000 },
            y: {
              start: 0,
              end: 10000000
            }
          },
          data: []
        });
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    _initPaper: {
      value: function _initPaper() {
        this.canvas = R(this.options.el, this.options.width, this.options.height);
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    box: {
      value: function box(point) {
        var x = point.x,
            y = point.y,
            pl = this.options.paddingLeft,
            pb = this.options.paddingBottom,
            height = this.options.height;
        return {
          x: x + pl,
          y: height - pb - y
        };
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    ruleX: {
      value: function ruleX(x) {
        var o = this.options,
            bw = o.width - o.paddingLeft - o.paddingRight,
            start = o.axis.x.start,
            end = o.axis.x.end;
        return bw * ((x - start) / (end - start));
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    ruleY: {
      value: function ruleY(y) {
        var o = this.options,
            bh = o.height - o.paddingTop - o.paddingBottom,
            start = o.axis.y.start,
            end = o.axis.y.end;
        return bh * ((y - start) / (end - start));
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    createPoints: {
      value: function createPoints() {
        this.points = [];
        this.options.data.forEach((function (d) {
          // debugger
          var x = this.ruleX(d.x),
              y = this.ruleY(d.y);
          this.points.push({ x: x, y: y, data: d });
        }).bind(this));
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    drawAxis: {
      value: function drawAxis() {
        var o = this.options,
            w = o.width - o.paddingRight - o.paddingLeft,
            h = o.height - o.paddingTop - o.paddingBottom,
            b = (function (x, y) {
          var p = this.box({ x: x, y: y });
          return p.x + "," + p.y;
        }).bind(this);
​
        this.xAxis = this.canvas.path("M" + b(0, 0) + "L" + b(w, 0));
        this.yAxis = this.canvas.path("M" + b(0, 0) + "L" + b(0, h));
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    drawLine: {
      value: function drawLine() {
        var path = "M50,300L120,200L190,190";
        var points = this.points,
            b = (function (p) {
          p = this.box(p);
          return p.x + "," + p.y;
        }).bind(this);
​
        line = "";
        for (var i = 0; i < points.length; i++) {
          var mark = i === 0 ? "M" : "L";
          line += mark + b(points[i]);
        }
        this.dataLine = this.canvas.path(line).attr({ stroke: "blue" });
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    drawPoints: {
      value: function drawPoints() {
        var r = this.canvas;
        var pc = r.set();
        var pr = r.set();
        r.setStart();
        var o = this.options,
            h = o.height - o.paddingTop - o.paddingBottom;
        this.points.forEach((function (p) {
          var b = this.box(p);
          var c = r.circle(b.x, b.y, 4);
          pc.push(c);
          var br = this.box({ x: p.x - 3, y: h });
          var rect = r.rect(br.x, br.y, 6, h);
          pr.push(rect);
          rect.hover(function (e) {
            var time = new Date(p.data.x),
                qps = p.data.y;
            console.log("time: " + moment(time).toISOString(), "qps: " + qps);
            rect.animate({ stroke: "black" }, 200);
            c.animate({ r: 9, opacity: 1 }, 300);
          }, function (e) {
            c.animate({ r: 4, opacity: 0 }, 300);
          });
        }).bind(this));
​
        var ps = this.dataPoints = r.setFinish();
​
​
        pc.attr({ fill: "red", stroke: "red", "stroke-width": 0, opacity: 0 });
        this.prl = pr.attr({ opacity: 0, fill: "#ccc" })
        //pr.attr({fill: 'pink', 'stroke-width': 1, stroke: '#e0e'})
        ;
      },
      writable: true,
      enumerable: true,
      configurable: true
    },
    update: {
      value: function update() {},
      writable: true,
      enumerable: true,
      configurable: true
    },
    render: {
      value: function render() {
        this.createPoints();
        this.drawAxis();
        this.drawLine();
        this.drawPoints();
      },
      writable: true,
      enumerable: true,
      configurable: true
    }
  });
​
  return LineChart;
})();
​
​
​
​
data1 = [{ x: 10, y: 13 }, { x: 20, y: 30 }, { x: 30, y: 70 }, { x: 40, y: 40 }, { x: 50, y: 12 }, { x: 60, y: 91 }];
​
data = data.map(function (d) {
  var x1 = +d[0];
  var y1 = d[1];
  return { x: x1, y: y1 };
});
​
var xmin = _.min(data, function (d) {
  return d.x;
}).x;
var xmax = _.max(data, function (d) {
  return d.x;
}).x;
var ymin = _.min(data, function (d) {
  return d.y;
}).y;
var ymax = _.max(data, function (d) {
  return d.y;
}).y;
​
var chart = new LineChart({
  el: $("#paper")[0],
  width: 940,
  height: 360,
  data: data,
  axis: {
    x: {
      start: xmin,
      end: xmax },
    y: {
      start: 0,
      end: ymax * 1.2
    }
  }
});
​
chart.render();
​
// chart.update(data)
​
var paper = Raphael($("#canvas")[0], 640, 360);
​
paper.path("M0,0L640,0L640,360L0,360Z").attr({ stroke: "#ccc" });
​
paper.path("M40,320L600,320").attr({ stroke: "#f1c" });
​
paper.path("M40,320L40,40").attr({ stroke: "#f1c" });
</script>
​
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"><\/script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"><\/script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"><\/script>
  <script src="https://static.gsmlg.com/data.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="paper"></div>
  <div id="canvas"></div>
</body>
</html></script>
​
<script id="jsbin-source-css" type="text/css">#paper {
  box-shadow: 0 0 1px 3px rgba(200,200,200,.3);
  margin: 10px;
}</script>
​
<script id="jsbin-source-javascript" type="text/javascript">var R = Raphael;
​
class LineChart {
  constructor (options = {}) {
    this._initOptions(options);
    this._initPaper()
  }
  
  _initOptions (options) {
    this.options = _.defaults(options, {
      el: document.createElement('div'),
      width: 640,
      height: 480,
      paddingLeft: 40,
      paddingTop: 40,
      paddingRight: 40,
      paddingBottom: 40,
      axis: {
        x: {
          start: 0,
          end: 1000000,
        },
        y: {
          start: 0,
          end: 10000000
        }
      },
      data: []
    });
    
  }
  
  _initPaper () {
    this.canvas = R(this.options.el, this.options.width, this.options.height);
  }
  
  box (point) {
    var x = point.x, y = point.y,
        pl = this.options.paddingLeft, pb = this.options.paddingBottom,
        height = this.options.height
    return {
      x: x + pl,
      y: height - pb - y
    };
  }
  
  ruleX (x) {
    var o = this.options,
        bw = o.width - o.paddingLeft - o.paddingRight,
        start = o.axis.x.start, 
        end = o.axis.x.end;
    return bw * ((x-start)/(end-start));
  }
  
  ruleY (y) {
    var o = this.options,
        bh = o.height - o.paddingTop - o.paddingBottom,
        start = o.axis.y.start, 
        end = o.axis.y.end;
    return bh * ((y-start)/(end-start));
  }
  
  createPoints () {
    this.points = [];
    this.options.data.forEach(function(d){
      // debugger
      var x = this.ruleX(d.x),
          y = this.ruleY(d.y);
      this.points.push({x: x, y: y, data: d})
    }.bind(this));
  }
​
  
  drawAxis () {
    var o = this.options,
        w = o.width - o.paddingRight - o.paddingLeft,
        h = o.height - o.paddingTop - o.paddingBottom,
        b = function(x,y){
          var p = this.box({x:x,y:y});
          return p.x + ',' + p.y;
        }.bind(this);
    
    this.xAxis = this.canvas.path('M' + b(0,0) + 'L' + b(w, 0));
    this.yAxis = this.canvas.path('M' + b(0,0) + 'L' + b(0, h));
​
  }
  
  drawLine () {
    var path = 'M50,300L120,200L190,190';
    var points = this.points,
        b = function(p){
          p = this.box(p);
          return p.x + ',' + p.y;
        }.bind(this);
    
    line = '';
    for (var i = 0; i < points.length; i++) {
      var mark = i === 0 ? 'M' : 'L'
      line += mark + b(points[i])
    }
    this.dataLine = this.canvas.path(line)
      .attr({stroke: 'blue'})
  }
  
  drawPoints () {
    var r = this.canvas;
    var pc = r.set();
    var pr = r.set();
    r.setStart();
    var o = this.options,
        h = o.height - o.paddingTop - o.paddingBottom;
    this.points.forEach(function(p){
      var b = this.box(p);
      var c = r.circle(b.x, b.y, 4);
      pc.push(c);
      var br = this.box({x: p.x - 3, y: h});
      var rect =r.rect(br.x, br.y, 6, h);
      pr.push(rect);
      rect.hover(function(e){
        var time = new Date(p.data.x),
            qps = p.data.y;
        console.log('time: ' + moment(time).toISOString(), 'qps: ' + qps);
        rect.animate({stroke: 'black'}, 200)
        c.animate({r: 9, opacity: 1}, 300);
      }, function(e) {
        c.animate({r: 4, opacity: 0}, 300);
      });
    }.bind(this));
    
    var ps = this.dataPoints = r.setFinish();
    
    
    pc.attr({fill: 'red', stroke: 'red' , 'stroke-width': 0, opacity: 0});
    this.prl = pr.attr({opacity: 0, fill: '#ccc'})
    //pr.attr({fill: 'pink', 'stroke-width': 1, stroke: '#e0e'})
  }
  
  update () {
​
  }
    
  render () {
    this.createPoints();
    this.drawAxis();
    this.drawLine();
    this.drawPoints();
  }
}
​
​
data1 = [
  {x: 10, y:13}, 
  {x: 20, y: 30}, 
  {x: 30, y: 70},
  {x: 40, y: 40},
  {x: 50, y: 12},
  {x: 60, y: 91}
];
​
data = data.map(function(d) {
  var x1 = +d[0];
  var y1 = d[1];
  return {x: x1, y: y1};
});
​
var xmin = _.min(data, function(d){return d.x}).x;
var xmax = _.max(data, function(d){return d.x}).x;
var ymin = _.min(data, function(d){return d.y}).y;
var ymax = _.max(data, function(d){return d.y}).y;
​
var chart = new LineChart({
  el: $('#paper')[0],
  width: 940,
  height: 360,
  data: data,
  axis: {
    x: {
      start: xmin,
      end: xmax,
    },
    y: {
      start: 0,
      end: ymax * 1.2
    }
  }
});
​
chart.render();
​
// chart.update(data)
​
var paper = Raphael($('#canvas')[0], 640, 360);
​
paper.path('M0,0L640,0L640,360L0,360Z')
     .attr({stroke: '#ccc'});
​
paper.path('M40,320L600,320').attr({stroke: '#f1c'});
​
paper.path('M40,320L40,40').attr({stroke: '#f1c'});
​
</script></body>
</html>
    