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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1436" height="778"><circle cx="0" cy="295" r="0" fill="#ff000a" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="27" cy="336" r="1" fill="#4900ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="54" cy="699" r="2" fill="#87ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="81" cy="521" r="3" fill="#00ffbb" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="108" cy="55" r="4" fill="#003eff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="135" cy="316" r="5" fill="#ff00e5" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="162" cy="356" r="6" fill="#0087ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="189" cy="32" r="7" fill="#b100ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="216" cy="14" r="8" fill="#ff0092" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="243" cy="197" r="9" fill="#000aff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="270" cy="631" r="10" fill="#3e00ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="297" cy="163" r="11" fill="#ff00a7" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="324" cy="667" r="12" fill="#00ffc6" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="351" cy="216" r="13" fill="#00d0ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="378" cy="699" r="14" fill="#87ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="405" cy="103" r="15" fill="#34ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="432" cy="252" r="16" fill="#49ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="459" cy="703" r="17" fill="#b1ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="486" cy="627" r="18" fill="#6800ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="513" cy="267" r="19" fill="#e5ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="540" cy="42" r="20" fill="#4900ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="567" cy="701" r="21" fill="#9cff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="594" cy="441" r="22" fill="#ff0000" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="621" cy="622" r="23" fill="#9c00ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="648" cy="370" r="24" fill="#00ffe5" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="675" cy="526" r="25" fill="#00ff87" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="702" cy="427" r="26" fill="#ff9200" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="729" cy="70" r="27" fill="#00dbff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="756" cy="48" r="28" fill="#0a00ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="783" cy="402" r="29" fill="#68ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="810" cy="247" r="30" fill="#15ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="837" cy="407" r="31" fill="#9cff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="864" cy="558" r="32" fill="#c6ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="891" cy="290" r="33" fill="#ff2a00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="918" cy="122" r="34" fill="#faff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="945" cy="663" r="35" fill="#00ffef" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="972" cy="109" r="36" fill="#72ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="999" cy="493" r="37" fill="#001fff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1026" cy="526" r="38" fill="#00ff87" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1053" cy="318" r="39" fill="#ff00fa" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1080" cy="35" r="40" fill="#9200ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1107" cy="662" r="41" fill="#00fffa" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1134" cy="253" r="42" fill="#53ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1161" cy="109" r="43" fill="#72ff00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1188" cy="507" r="44" fill="#00b1ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1215" cy="348" r="45" fill="#0034ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1242" cy="79" r="46" fill="#00ffc6" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1269" cy="207" r="47" fill="#0072ff" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1296" cy="567" r="48" fill="#ffdb00" style="stroke: #ffffff; stroke-width: 3px;"></circle><circle cx="1323" cy="322" r="49" fill="#db00ff" style="stroke: #ffffff; stroke-width: 3px;"></circle></svg>