test2

_.md

[ Launch: test2 ] e6a4156f88a7e480a646 by alexanderchan
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test2","endpoint":"","display":"svg","public":true,"require":[],"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}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/g6H9w4r.gif","fullscreen":false,"ajax-caching":true,"inline-console":true}

inlet.js

  var data = [8, 2, 3, 4, 8, 9,3,4];

  var chartHeight = 398;
  var chartWidth = 300;
  var leftMargin = 10;
  var xScale = d3.scale.linear().range([0, chartWidth]);
  var yScale = d3.scale.linear().range([chartHeight, 0]);


  function render(data) {
    var chart = d3.select("svg");
    chart.attr({
      height: chartHeight,
      width: chartWidth            
    });

    var bars = chart.selectAll("rect").data(data);

    xScale.domain([0, data.length]);
	yScale.domain([0, d3.max(data)]);
    
    chart.on('click',function(){
     	var newData = [];
		var newrecs = Math.random() * 20 + 1;
      for ( var i = 0; i < newrecs; i++) {
        newData.push(Math.random() * 10);
      }
      	render(newData);
    })
    
    bars.enter().append("rect")
    
    bars.transition().attr({
      width: function(d,i){
		return ( ( chartWidth - leftMargin ) / data.length ) - 2;
      },
      x: function (d, i) {
        return leftMargin + ( i * ( chartWidth ) / data.length);
      },
      y: function (d, i) {
        return yScale(d) + 10;        
      },
      fill: "#0b205a"
    })        
    .attr({
      height: function (d) {
        return chartHeight - yScale(d);
        
      }
    }
	)
    ;
    
    bars.exit().remove();
    
  }

  render(data);

d3.select('svg').append('rect').attr({
  x: 93,
  y: 89,
  height: 32,
  width: 116,
  fill: "#fca935"
})