Another Inlet

_.md

[ Launch Inlet ]
Gist #4132836 [ Launch Inlet ]
Gist #4132835 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7111111111111106,"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}

inlet.js

var svg = d3.select('svg')            

var height = 700;
var width = 1300;
var times = [
140.894, 131.685, 82.825, 67.13, 64.794,
58.199, 52.644, 44.784, 43.634, 43.536, 43.245, 41.782, 40.516, 40.152,
36.701, 33.629, 33.039,
22.708, 22.416, 22.068,
19.25, 15.468, 12.918, 12.507, 11.508, 11.018, 10.288,
9.623, 8.348, 7.071, 6.628, 6.433, 5.699, 5.69, 4.736, 4.664,
3.936, 3.781, 2.889, 2.835, 2.144, 2.005, 1.892, 1.869, 1.809, 1.093,
0.957, 0.929, 0.725, 0.602, 0.565, 0.542, 0.463, 0.434,
0.245, 0.239, 0.238, 0.216, 0.207,
            0.191, 0.187, 0.172, 0.157, 0.153, 0.153, 0.147, 0.127, 0.113, 0.111,
            0.096, 0.096, 0.092, 0.083, 0.08, 0.075, 0.066, 0.059, 0.057, 0.055, 0.045, 0.037,
            0.02, 0.018, 0.014, 0.011, 0.01, 0.007, 0.004, 0.004, 0.002, 0.002]

            var rgb_range = [1,255]
            var red_scale = d3.scale.linear()
                .domain([20, 150])
                .range(rgb_range)
            var green_scale = d3.scale.linear()
                .domain([1, 20])
                .range(rgb_range)

            var x_scale = d3.scale.linear()
                .domain([0, times.length])
                .range([10, width])
            var y_scale = d3.scale.linear()
                .domain([0.001, 140.9])
                .range([1, height])
            var color_scale = d3.scale.linear()
                .domain([0.001, 140.9])
                .range([1, 255])

            var rect = svg.selectAll('rect').data(times).enter().append('rect')
         .attr('x', function(d,i) {
                    return x_scale(i)
                })
                .attr('y', function(d) {
                    return height - y_scale(d)
                })
                .attr('width', function(d){
                    return width / (times.length + 15)
                })
                .attr('height', function(d) {
                    return y_scale(d)
                })
                .attr('fill', function(d){
                        return 'rgb('+Math.round(red_scale(d))+','+(140-Math.round(red_scale(d)))+',0)'
                })