just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":true,"emacs":false,"width":600,"height":300,"hide":false},"endpoint":"tributary","public":true}

inlet.js

var svg = d3.select("svg");
var many = 50;
data1 = d3.range(many);

circles = svg.selectAll("circle")
  .data(data1)

var colorHslScale = d3.scale.linear()
  .domain([d3.min(data1), d3.max(data1)])
  .interpolate(d3.interpolateHsl)
  .range(["#FF0000", "#0000ff"]);

var colorScale = d3.scale.linear()
  .domain([d3.min(data1), d3.max(data1)])
  .interpolate(d3.interpolateRgb)
  .range(["#FF0000", "#0000ff"]);

var timeJitter = d3.scale.linear()
    .domain([d3.min(26), d3.max(140)])
    .range([0,1292]);

var scaleToMany = d3.scale.linear()
    .domain([d3.min(data1), d3.max(data1)])
    .range([1, 700])
    
circles.enter()
  .append("circle")
  .attr({
    cx: function(d,i) {
      return i * 27
    },
    cy: function(d,i) {
      return 300
      //return timeJitter(new Date(Date.now()).getSeconds());
    },
    r: function(d,i) { return (d) },
    fill: function(d,i) {
      return colorScale(d);
    }
  })
  .style({
    stroke: "#FFFFFF",
    "stroke-width": "3px"
  });

var junk = function(btm) {
  return Math.floor(btm * Math.random());
};

svg.on("click", function() {
  newData = [];
  for(var i=0; i<=many; i+=1) { newData.push(junk(750)) };
  
  circles.data(newData)
    .transition()
    .attr({
      cy: function(d,i) {
        return d;
      },
      fill: function(d,i) {
      	return colorHslScale(d);
      }
    })
});

inlet.svg