Random Increasing Line Chart

_.md

[ Launch: Updating Area Chart ] 4c667295ffc0d1aff071 by nicohaemhouts
[ Launch: Tributary inlet ] 0d6739453db1a4da22a4 by nicohaemhouts

config.json

{"description":"Random Increasing Line Chart","endpoint":"","display":"svg","public":true,"require":[{"name":"lodash","url":"//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"randomData.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/uKT9YiN.gif"}

inlet.js

    var margin = {top: 33, right: 20, bottom: 30, left: 82},
        width = 600 - margin.left - margin.right,
        height = 335 - margin.top - margin.bottom,
        dataSize = 100,
        maxValue = 50000,
        random = function () {
          return Math.floor(Math.random() * maxValue);
        },
        ticks = 200,
        randomData = randomIncrease(0, 50000, ticks),
        data = [0],
        standardColor = '#49B3D5',
        thresholdColor = '#EE5B33',
        white = '#F9F9EC',
        updateFrequency = 500;


    var svg = d3.select('svg')
            .attr('height', height + margin.left + margin.right)
            .attr('width', width + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scale.linear()
            .range([0, width])
            .domain([0, ticks]);

    var y = d3.scale.linear()
            .range([height, 0])
            .domain([0, maxValue]);

    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

    var area = d3.svg.area()
            .x(function (d, i) {
                return x(i);
            })
            .y0(height)
            .y1(function (d) {
                return y(d);
            }).
            interpolate("basis");

	var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d, i) { return x(i); })
      .y(function(d, i) { return y(d); });

    svg.append("defs").append("clipPath")
            .attr("id", "clip")
            .append("rect")
            .attr('x', x(1))
            .attr('y', 0)
            .attr("width", x(ticks - 2))
            .attr("height", height);


    var path = svg.append("g")
            .attr("clip-path", "url(#clip)")
            .append("path")
            .attr("class", "area")
            .datum(data)
            .attr('d', line)
            .style({
              'fill': 'none',
              'stroke' : standardColor,
              'stroke-width' : '3px'
            });

    svg.append("g")
            .attr("class", "y axis")
            .style({
                'fill': 'none',
                'stroke-width': '0'
            })
            .call(yAxis)
            .selectAll('text').style({
                'stroke-width': '0',
                'fill': thresholdColor,
                'font-family': 'Helvetica, sans-serif'
            });	


var currentValue =	svg.append("text")
                    .attr("y", 6)
                    .attr("dy", ".3em")
                    .attr("x", "6")
                    .style({
                      'fill' : standardColor,
                      'stroke-width' : '0',
                      'font-size': '2em'
                    })
                    .text('0');

    var transition = d3.select({}).transition()
            .duration(updateFrequency)
            .ease("linear");

    function update() {
      var updateInterval = setInterval(function () {
        transition = transition.each(function () {
          
          data.push(randomData.shift());
//          currentValue.text(data[data.length-1]);

            path.attr("d", line)
                    .attr("transform", null)
                    .transition()
                    .attr("transform", "translate(" + x(1) + ")");
          
          if (randomData.length === 0) {
            clearInterval(updateInterval);
          }          
        });
      }, updateFrequency);              
    }

    update();


function getRandomIntInclusive(min, max) {
  return Math.round(Math.random() * (max - min + 1)) + min;
}

function randomIncrease (min, max, ticks) {
	var difference = max - min,
		tickSize = Math.floor(difference / ticks);
	
	console.log('tickSize', tickSize);
	
	return _.times(ticks, function () {
              var value = getRandomIntInclusive(this.lower || min, this.upper || (min + tickSize));
                  this.lower = value;
                  this.upper += tickSize; 
                  return value;
              }, {
                  lower: min,
                  upper: min + tickSize
              });
}

styles.css

body {
            background: #2E2E2B;
        }