chart-anim-1

_.md

[ Launch: quick-chart-2 ] 9138a0e0b483db6affe989c11664260c by jdutta
[ Launch: quick-chart-1 ] ee0e6c55553ea39a1fca by jdutta
[ Launch: scratchpad ] 9721189 by jdutta

chart.css

circle {
  stroke: #ddd;
}

line {
  stroke: none;
}

config.json

{"description":"chart-anim-1","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},"s_action.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"c_ip.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart.css":{"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/DalrpLM.gif"}

inlet.js

// Experiment with chart animation


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  width: 619,
  height: 498,
  histoWidth: 300,
  histoHeight: 100,
  colorRange: [d3.rgb("#79ff19"), d3.rgb('#005611')],
  gRootXY: [50, 50],
  circleCenter: [300, 350],
  maxR: 100,
  textFontSize: '12px',
  circleStroke: '#ddd',
  useDot: false,
  delayFactor: 30
};

function getHistogramData(n, max) {
  var firstFew = [100, 40, 70];
  var i = 0;
  var arr = [];
  while (n--) {
    if (i < firstFew.length) {
      arr.push({v: firstFew[i++]});
    } else {
      arr.push({v: Math.round(Math.random() * max)});
    }
  }
  return arr;
}

drawChart(getHistogramData(30, 100));

function drawCircle(gRoot, nHands) {
  var thetaDelta = 2 * Math.PI / nHands;
  var gCircle = gRoot
		.append('svg:g')
        .attr({
          transform: 'translate('+config.circleCenter+')'
        });
  gCircle
		.append('svg:circle')
        .attr({
          cx: 0,
          cy: 0,
          r: config.maxR
        })
        .style({
          fill: 'none'
        })
  gCircle
		.selectAll('.line-hand')
        .data(d3.range(nHands))
        .enter()
        .append('svg:line')
        .classed('line-hand', true)
  .attr({
    x1: 0,
    y1: 0,
    x2: function (d, i) {
            var r = config.maxR;
            var theta = i * thetaDelta;
            return r * Math.cos(theta); 
          },
          y2: function (d, i) {
            var r = config.maxR; 
            var theta = i * thetaDelta;
            return r * Math.sin(theta); 
          }
  })
}

function drawChart(data) {
  var svg = d3.select('svg');
  var gRoot = svg.append('svg:g')
				.attr('transform', 'translate('+config.gRootXY+')');
  
  /*
  // draw rect around histogram
  gRoot
  .append('svg:rect')
  .attr({
    x: 0,
    y: 0,
    width: config.histoWidth,
    height: config.histoHeight
  }).style({
    fill: 'none',
    stroke: 'black'
  });
  //*/

  var yMax = d3.max(data, function (d) { return d.v; });
  var xScale = d3.scale.ordinal()
				 .domain(d3.range(data.length))
                 .rangeRoundBands([0, config.histoWidth], 0.1)
  var yScale = d3.scale.linear()
                 .domain([0, yMax])
                 .range([0, config.histoHeight])
  var rScale = d3.scale.linear()
                 .domain([0, yMax])
                 .range([0, config.maxR]);
  var thetaDelta = 2 * Math.PI / data.length;
  var dotSize = Math.min(xScale.rangeBand(), 5);

  var colorScale = d3.scale.linear()
      .domain([0, yMax])
      .interpolate(d3.interpolateHcl)
      .range(config.colorRange);

  //console.log(data);
  
  var histoEnter = gRoot.selectAll('.histo-bar')
		.data(data)
		.enter()
        .append('svg:rect')
		.classed('histo-bar', true);

  histoEnter
        .attr({
          x: function (d, i) {
            return d.x = xScale(i);
          },
          y: function (d) {
            return d.y = config.histoHeight - yScale(d.v);
          },
          width: xScale.rangeBand(),
          height: function (d) {
            return yScale(d.v);
          }
        })
        .style({
          fill: function (d) {
            return colorScale(d.v);
          }
        });
  
  
  if (config.useDot) {
  // bar to dot
  histoEnter
		.transition()
        .duration(750)
        .delay(function (d, i) {
          return 100 + i*config.delayFactor;
        })
        .attr({
          height: dotSize
        })
  }
  
  // rotate and move
  histoEnter
        .transition()
        .duration(750)
        .delay(function (d, i) {
          return 1000 + i*config.delayFactor;
        })
  //*
  .each(function (d, i) {
          console.log('di', d, i)
          var theta = i * thetaDelta;
          var thetaDeg = 90 + theta * 180 / Math.PI;
          var r = (config.useDot? 0 : config.maxR) + yScale(d.v);
          var trans = [-xScale.rangeBand()/2, 0];
          var x = config.circleCenter[0] + r * Math.cos(theta);
          var y = config.circleCenter[1] + r * Math.sin(theta);
          d3.select(this).transition().attr({
            x: x,
            y: y,
            transform: function (d, i) {
              return 'rotate('+[thetaDeg, x, y]+') translate('+trans+')';
            }
          });
        });
  //*/
  
  drawCircle(gRoot, data.length);
}