just another inlet to tributary

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.6777777777777788,"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

// Responsive tributary example
// Resize the code panel to see the bar chart adjust
// Proof of concept for responsive dataviz in Tributary
//
// Next steps: changing visualization types between sizes
// using averages to turn 500 bars into 50 in small sizes



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

var data = [14, 18, 15, 16, 23, 42, 25, 32, 21, 24, 43, 23, 21, 12, 10, 11, 23, 25, 21, 15,52, 11, 95, 10, 24, 25];

var chartpadding = { x: 12, y: -10 };
    
var barwidth = 20,
    barpadding = 4;

var svg = d3.select("svg")
  .append("svg:g")

var chart = svg.append("g").attr("id", "chart")
    .attr("transform", "translate("+chartpadding.x+","+chartpadding.y+")")
    
var x = d3.scale.linear()
      .domain([0, data.length])
      .range([0, sw - 50]);

var color = d3.scale.linear()
    .domain([0, 1300])
    //.interpolate(d3.interpolateRgb)
    .interpolate(d3.interpolateHsl)
    .range(['#D40067', "#29B0FF"])


if (sw > 800) {
 	barwidth = 28; 
}
if (sw < 630) {
 	barwidth = 15;
    sh = 600;
}
if (sw < 460) {
 	barwidth = 10;
    sh = 400;
}
if ( sw < 301) {
 	barwidth = 4; 
    sh = 300;
}
if (sw < 112) {
  barwidth = 1;
  sh = 100;
  
  x = function(i) {
   	return i*2; 
  }
}

  var y = d3.scale.linear()
      .domain([0, d3.max(data)])
     .rangeRound([0, sh ]);

chart.selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr({
    x: function(d,i) {
       return x(i);
    },
    y: function(d,i) {
        return sh - y(d)
    },
    height: y,
    width: barwidth
  })
  .attr("fill", function(){
    return color(sw);
  })