An inlet to Tributary

_.md

[ Launch Inlet ]
Gist #2958639

config.json

{"description":"An inlet to Tributary","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5773437499999999,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var start = Date.now()
    , n = 2        //number of rings
    , radius = 251  //radius interval
    , deg = 360     //angle (in degrees) we will split
    , width = 52    //width of each box
    , t = 751     //"time'
    , a = 1
    , ntheta = 2.32
    , speed_factor = 0.0363

    , opacity = 0.364
    , stroke_opacity = 0.14
    , stroke_width = 3
    , fill_color = "#000000"
    , stroke_colors = ["#505499", "#313464"]
    , corners = -410


var colors = [
    '#0900E2'
    , '#4881A3'
    , '#5AC505'
    , '#253FA5'
    
]
var k, color_scale;
//interpolate over multiple colors


var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))


var rings = [ ];

    var speed = 1 * speed_factor
    rings.push({ 
        radius: radius*1, 
        width: width, 
        speed: speed,
        phase: 1
    })


var svg = d3.select("svg")

svg.append("rect")
    .attr("width", sw)
    .attr("height", sh)
    .attr("fill", "#888888")


svg = svg.append("svg:g")
    .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");

var ring = svg.selectAll("g")
    .data(rings)
  .enter().append("svg:g")
    .attr("class", "ring")
    .each(ringEnter);


var updateRing = function(elapsed) {
  rotate = function(d,i) { 
    return "rotate(" + (a * d.speed * elapsed) + ")"; 
  };

  var rings = svg.selectAll("g.ring")
      .attr("transform", rotate)
    .selectAll("rect")
      .attr("transform", rotate)
      //.attr("fill", fill_color)
      
      .attr("fill-opacity", opacity)
      .attr("stroke", function(d,i) {
          return stroke_colors[i % 2];
      })
      .attr("stroke-opacity", stroke_opacity)
      .attr("stroke-width", stroke_width)
      .attr("rx", corners)
      .attr("ry", corners)



}
function ringEnter(d, i) {
    //split up the circle into squares
    var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
    k = deg / theta;
    
    var color_scale = function(i) {
    var num_interps = colors.length -1
    
    var ord = d3.scale.linear()
        .domain([0, theta])
        .range([0, num_interps])
    
    var section = parseInt(ord(i))
    //console.log("section", section)
    var section_size = theta / num_interps
    //get the two colors we want to interpolate between
    var col_range = [colors[section], colors[section+1]]
    
    var col_scale = d3.scale.linear()
        .domain([section * section_size, (section+1) * section_size])
        //.interpolate(d3.interpolateRgb)
        .interpolate(d3.interpolateHsl)
        .range(col_range)
    
    return col_scale(i)
    
}
    
  d3.select(this).selectAll("g")
      .data(d3.range(theta).map(function() { return d; }))
    .enter().append("svg:g")
      .attr("class", "square")
      .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
    .append("svg:rect")
      .attr("x", -d.width / 2)
      .attr("y", -d.width / 2)
      .attr("width", d.width)
      .attr("height", d.width)
      .attr("fill", function(d,i) {
        return color_scale(i)
      })
      
}
updateRing(t)