just another inlet to tributary

_.md

No Previous Gist

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":718,"height":473,"hide":false},"endpoint":"tributary","editor_json0":{"vim":false,"emacs":false,"width":772,"height":646,"hide":true}}

data.json

[
   {
        "city": "Zurich",
        "country": " Switzerland",
        "lat": 47.3690239,
        "lon": 8.5380326,
        "days": 10,
        "year": 2012,
        "purpose": "travel"
	
    },
    {
        "city": "London",
        "country": " United Kingdom",
        "lat": 51.5001524,
        "lon": -0.1262362,
        "days": 3,
        "year": 2012,
        "purpose": "airport"
    },
    {
        "city": "Paris",
        "country": " France",
        "lat": 48.8566667,
        "lon": 2.3509871,
        "days": 1,
        "year": 2012,
        "purpose": "airport"
    },
    {
        "city": "Amsterdam",
        "country": " Netherlands",
        "lat": 52.3738007,
        "lon": 4.8909347,
        "days": 1,
        "year": 2012,
        "purpose": "airport"
    }
]

inlet.js

var x_scale = d3.scale.linear().domain([0,100]).range([0,500]);
//bar height
var h=30;
//x-origin
var o=20;
//y-origin    
var l=30;

var color = d3.scale.category20();

var array = [16,25,9,12,38];

var group = g.append('g').attr('id','barsGroup')
var selection = group.selectAll('rect')
    .data(array)
    .enter()
    	.append('rect')
    .attr('class','bars')
    .attr('fill',function(d,i){return color(i)})
    	.attr('height',h)
    .attr('width',function(d,i){
      	return x_scale(d);
    	})
        .attr('x',function(d,i){
      	var cw = x_scale(d);
		var temp = o;
        o = o + cw
    	return temp;
    	}) 
    .attr('y',l)

inlet.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1281" height="697"><g id="barsGroup"><rect class="bars" fill="#1f77b4" height="30" width="80" x="20" y="30"></rect><rect class="bars" fill="#aec7e8" height="30" width="125" x="100" y="30"></rect><rect class="bars" fill="#ff7f0e" height="30" width="45" x="225" y="30"></rect><rect class="bars" fill="#ffbb78" height="30" width="60" x="270" y="30"></rect><rect class="bars" fill="#2ca02c" height="30" width="190" x="330" y="30"></rect></g></svg>