circles

_.md

[ Launch: circles ] 7461288 by agconti

config.json

{"description":"circles","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.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}

inlet.js

var svg = d3.select('svg');
var h = 418;
var w = 700;
var bar_padding = 1;
var scale = 10;

svg.attr({height: h,
          width: w,
});

	//var data = d3.range(23);
//random data 
var data = [];
for (var i=0; i<30; i++){
  var num = Math.random() * 30;
  data = data.concat(num);
}

// color scales
var colorscale = d3.scale.linear()
	.domain([d3.min(data), d3.max(data)])
	.interpolate(d3.interpolateHcl)
	.range(["#59E294", "#214592"]);

var circles = svg.selectAll('circle').data(data);
	circles.enter()
    .append('circle')
	.attr({
      r: (w / data.length),
      height:function(d){ 
        return (d*scale);
      },
      cy: function(d){
        return (h - (d * scale));
      },
      cx: function(d,i){
        return ((i * w) / data.length) + 30;}, //plus 30 for sapcing need in Tributary
      //fill: "#51C283"
      fill: function(d,i){
        return colorscale(d);} // plus 79 to morph color scale. 
      });