dot-chart-1

_.md

[ Launch: punch-card ] 38cdad83a8340c9cbf82 by jdutta
[ Launch: split-donut ] c2012b3b494c15cbc2a7 by jdutta
[ Launch: split-donut ] 80ed144d7ce9ebc365cb by jdutta

config.json

{"description":"dot-chart-1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.csv":{"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}},"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/vZXHPwU.gif"}

inlet.js

// Quick charting tool for trying animated movement of dots
// See: http://bl.ocks.org/mbostock/3808218


// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  width: 635,
  height: 170,
  radiusScale: [5, 20],
  colorZones: ['#ff3300', '#ffbb42', '#9aca40'],
  itemsPerRow: 15,
  transDuration: 800,
  itemMaxScore: 100,
  itemMaxCount: 30
};

function generateData(n) {
  var data = [];
  for (var i=0; i<n; i++) {
    data.push({
      id: i,
      score: Math.floor(Math.random() * config.itemMaxScore),
      count: Math.floor(Math.random() * config.itemMaxCount)
    });
  }
  return data;
}

function sortData(data, key) {
  data.sort(function (a, b) {
    return a[key] === b[key]? 0 : a[key] < b[key] ? 1 : -1;
  });
}

function scoreColor(d) {
  if (d < config.itemMaxScore / 3) {
    return config.colorZones[0];
  }
  if (d < config.itemMaxScore / 2) {
    return config.colorZones[1];
  }
  return config.colorZones[2];
}

var data = generateData(105);
var countExtent = d3.extent(data, function (d) { return d.count; });
var radiusScale = d3.scale.linear()
      .domain(countExtent)
      .rangeRound(config.radiusScale);
var xScale = d3.scale.ordinal()
      .domain(d3.range(config.itemsPerRow))
      .rangePoints([0, config.width], 0);
sortData(data, 'count');

var svg = d3.select('svg');
var gRoot = svg.append('svg:g')
                .attr('transform', 'translate(100, 167)');

function drawChart(data) {
  console.log('will draw chart', data[0]);
  var g = gRoot.selectAll('g.dot')
           .data(data, function (x) {return x.id;});
        
  g
  .enter()
  .append('g')
  .attr('class', 'dot')
  .append('svg:circle')
      .attr({
        cx: function (o, i) {
          return xScale(i % config.itemsPerRow); 
        },
        cy: function (o, i) { 
          return config.radiusScale[1] * 2 * (Math.floor(i/config.itemsPerRow)); 
        },
        r: 1
      });
    
   g
    .transition()
    .duration(config.transDuration)
    .selectAll('circle')
      .delay(function (o, x, i) { return 5*i; })
      .attr({
        cx: function (o, x, i) {
          console.log('args', arguments);
          return xScale(i % config.itemsPerRow); 
        },
        cy: function (o, x, i) { 
          return config.radiusScale[1] * 2 * (Math.floor(i/config.itemsPerRow)); 
        },
        r: function (d) { 
          var r = radiusScale(d.count);
          return r;
        }
      })
   .style({
     fill: function (d) {
             return scoreColor(d.score);

           },
     stroke: function (d) {
       return d3.rgb(scoreColor(d.score)).darker();
     }
   });
  
}

drawChart(data);
//*
setTimeout(function () {
  sortData(data, 'score');
  drawChart(data);
}, 3000);
setTimeout(function () {
  sortData(data, 'count');
  drawChart(data);
}, 6000);
//*/