VarunBatraIT/BNNVdY.markdown

## BNNVdY.markdown

      
    Raw
  

              BNNVdY.markdown
            
          
    BNNVdY

Forked from Jordi's Pen YXXZNm.
A Pen by Varun Batra on CodePen.
License.

  
## index.html
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.1/css/uikit.min.css" />
  </head>
  <body>
    <div class="uk-container uk-container-center uk-text-center">

      <div id="chart"></div>
    </div>
  </body>
</html>

## script.js

function makeData(size){
  var i = 0;
  return d3.range(size).map(function(item){
    i++;
   return Math.random()*100
  });
};

var dance = 500;

var splines = {
  w: 500,
  h: 500,
  r: 240,
  selector: "body",

  color: null,
  svg: null,
  gradient: null,
  g: null,
  d3: null,
  line: null,
  c3_internal: null,
  x: null,
  y: null,

  init: function (c3_internal, selector) {
    this.d3 = c3_internal.d3;
    this.c3_internal = c3_internal;
    this.selector = selector;
    this.color = this.d3.scale.category20c();
    this.doSVG();
    this.doGradient();
  },
  doSVG: function(){
    this.svg = this.d3.select(this.selector+" svg");//.append("svg");
  },
  doGradient: function(){

    this.gradient = this.svg.append("svg:defs")
        .append("svg:linearGradient")
        .attr("id", "gradient")
        .attr("x1", "0%")
        .attr("y1", "50%")
        .attr("x2", "100%")
        .attr("y2", "50%")
        .attr("spreadMethod", "pad");

    this.gradient.append("svg:stop")
        .attr("offset", "0%")
        .attr("stop-color", "#6cc9fe")
        .attr("stop-opacity", 1);

    this.gradient.append("svg:stop")
        .attr("offset", "50%")
        .attr("stop-color", "#42d390")
        .attr("stop-opacity", 1);

    this.gradient.append("svg:stop")
        .attr("offset", "100%")
        .attr("stop-color", "#38d577")
        .attr("stop-opacity", 1);

  },
  doG: function(){
    this.g = this.svg
        .attr("width", this.w)
        .attr("height", this.h)
        .select(".c3-chart-lines")
        .attr("width", this.w).attr("height", this.h)
        .attr("id","splines");
        //.attr("transform", "translate(" + this.r + "," + this.r + ")")
  },
  doLines: function(){
    var that = this;

    this.x = this.d3.scale.linear().domain([0, this.d3.max(this.data, function (d) {
      return d.values.length -1;
    })]).range([0,this.w]);
    this.y = this.d3.scale.linear().domain([this.d3.min(this.data, function (d) {
      return that.d3.min(d.values);
    }), this.d3.max(this.data, function(d) {
      return that.d3.max(d.values);
    })]).range([this.h, 0]);

    this.line = this.d3.svg.line()
      .interpolate("basis")
      .x(function (d, i) {
        return that.x(i);
      })
      .y(function (d, i) {
        return that.y(d);
      });
  },
  render: function(){
    console.log("render");

    var that = this;

    /*this.g.append("path")
      .datum(this.data)
      .attr("class", "line")
      .attr("d", this.line);*/

    var lines = this.g.selectAll("path.line")
    .data(this.data);

    lines
      .transition()
      .duration(dance)
      .attr("d", function(d) { return that.line(d.values);});

    lines.enter()
      .insert("path")
      .style('stroke', 'url(#gradient)')
      .style("stroke-width","6px")
      .attr("class", "line")
      .attr("d", function(d) { return that.line(d.values);});
/*

      var interpolate = that.d3.interpolate(this._current, d);
      this._current = interpolate(0);
      return function(t) {
        console.log('interpolate');
        return that.lines(interpolate(t));
      };
    })
*/
    lines.exit()
      .remove();

  },
  draw: function(data){
    console.log("draw");

    if(data) this.data = data;
    this.doG();
    this.doLines();
    this.render();
  }
};


  var data_donut = {
    bindto: "#chart",
    data: {
      columns: [],
      type: 'donut'
    },
    size: {
      width: 500,
      height: 800
    },
    axis:{
      x: {
        show: false
      },
      y: {
        show: false
      }
    },
    donut: {
      title: "",
      expand: false,
      label: {
        show: false
      },
      width: 20,
    },
    oninit: function(){
      splines.init(this, "#chart");
      splines.draw([
          {
          month:  [1, 2, 3, 4, 5, 6,7,8,9,10,11,12],
          values: makeData(12)
          }
      ]);
    }

  };

  var chart = c3.generate(data_donut);

  $(window).resize(function(){
    splines.draw(false);
  });


  setInterval( function () {
    var $this = $(this);
    splines.draw([
      {
        month:  [1, 2, 3, 4, 5, 6,7,8,9,10,11,12],
        values:   makeData(12)
      }
    ]);
  },dance);


## style.css
body,
html {
  background-color: #29313c!important;
  color: #fff;
  min-height: 100%;
}

.line {
  fill: none;
}

#chart{
  height:800px;
  max-height:none!important;
}
	<html>
	<head>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.1/css/uikit.min.css" />
	</head>
	<body>
	<div class="uk-container uk-container-center uk-text-center">

	<div id="chart"></div>
	</div>
	</body>
	</html>

	function makeData(size){
	var i = 0;
	return d3.range(size).map(function(item){
	i++;
	return Math.random()*100
	});
	};

	var dance = 500;

	var splines = {
	w: 500,
	h: 500,
	r: 240,
	selector: "body",

	color: null,
	svg: null,
	gradient: null,
	g: null,
	d3: null,
	line: null,
	c3_internal: null,
	x: null,
	y: null,

	init: function (c3_internal, selector) {
	this.d3 = c3_internal.d3;
	this.c3_internal = c3_internal;
	this.selector = selector;
	this.color = this.d3.scale.category20c();
	this.doSVG();
	this.doGradient();
	},
	doSVG: function(){
	this.svg = this.d3.select(this.selector+" svg");//.append("svg");
	},
	doGradient: function(){

	this.gradient = this.svg.append("svg:defs")
	.append("svg:linearGradient")
	.attr("id", "gradient")
	.attr("x1", "0%")
	.attr("y1", "50%")
	.attr("x2", "100%")
	.attr("y2", "50%")
	.attr("spreadMethod", "pad");

	this.gradient.append("svg:stop")
	.attr("offset", "0%")
	.attr("stop-color", "#6cc9fe")
	.attr("stop-opacity", 1);

	this.gradient.append("svg:stop")
	.attr("offset", "50%")
	.attr("stop-color", "#42d390")
	.attr("stop-opacity", 1);

	this.gradient.append("svg:stop")
	.attr("offset", "100%")
	.attr("stop-color", "#38d577")
	.attr("stop-opacity", 1);

	},
	doG: function(){
	this.g = this.svg
	.attr("width", this.w)
	.attr("height", this.h)
	.select(".c3-chart-lines")
	.attr("width", this.w).attr("height", this.h)
	.attr("id","splines");
	//.attr("transform", "translate(" + this.r + "," + this.r + ")")
	},
	doLines: function(){
	var that = this;

	this.x = this.d3.scale.linear().domain([0, this.d3.max(this.data, function (d) {
	return d.values.length -1;
	})]).range([0,this.w]);
	this.y = this.d3.scale.linear().domain([this.d3.min(this.data, function (d) {
	return that.d3.min(d.values);
	}), this.d3.max(this.data, function(d) {
	return that.d3.max(d.values);
	})]).range([this.h, 0]);

	this.line = this.d3.svg.line()
	.interpolate("basis")
	.x(function (d, i) {
	return that.x(i);
	})
	.y(function (d, i) {
	return that.y(d);
	});
	},
	render: function(){
	console.log("render");

	var that = this;

	/*this.g.append("path")
	.datum(this.data)
	.attr("class", "line")
	.attr("d", this.line);*/

	var lines = this.g.selectAll("path.line")
	.data(this.data);

	lines
	.transition()
	.duration(dance)
	.attr("d", function(d) { return that.line(d.values);});

	lines.enter()
	.insert("path")
	.style('stroke', 'url(#gradient)')
	.style("stroke-width","6px")
	.attr("class", "line")
	.attr("d", function(d) { return that.line(d.values);});
	/*

	var interpolate = that.d3.interpolate(this._current, d);
	this._current = interpolate(0);
	return function(t) {
	console.log('interpolate');
	return that.lines(interpolate(t));
	};
	})
	*/
	lines.exit()
	.remove();

	},
	draw: function(data){
	console.log("draw");

	if(data) this.data = data;
	this.doG();
	this.doLines();
	this.render();
	}
	};




	var data_donut = {
	bindto: "#chart",
	data: {
	columns: [],
	type: 'donut'
	},
	size: {
	width: 500,
	height: 800
	},
	axis:{
	x: {
	show: false
	},
	y: {
	show: false
	}
	},
	donut: {
	title: "",
	expand: false,
	label: {
	show: false
	},
	width: 20,
	},
	oninit: function(){
	splines.init(this, "#chart");
	splines.draw([
	{
	month: [1, 2, 3, 4, 5, 6,7,8,9,10,11,12],
	values: makeData(12)
	}
	]);
	}

	};

	var chart = c3.generate(data_donut);

	$(window).resize(function(){
	splines.draw(false);
	});


	setInterval( function () {
	var $this = $(this);
	splines.draw([
	{
	month: [1, 2, 3, 4, 5, 6,7,8,9,10,11,12],
	values: makeData(12)
	}
	]);
	},dance);
	body,
	html {
	background-color: #29313c!important;
	color: #fff;
	min-height: 100%;
	}

	.line {
	fill: none;
	}

	#chart{
	height:800px;
	max-height:none!important;
	}