just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":542,"height":519,"hide":false},"endpoint":"tributary","public":true,"editor_json0":{"vim":false,"emacs":false,"width":796,"height":583,"hide":false}}

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 data = tributary.data;
var svg = d3.select("svg");

var barw = 10;
var boxh = 10;


svg.append("rect")
  .attr({
    	width: barw,
    	height: boxh,
    	x: 100,
    	y: 100,
      	fill: "#496C99"
    	});

var chart = svg.append("g")
  .attr("transform", "translate(" + [cx, cy] + ")");

chart.append("g")
  .attr("id", "values")
  
var bars = chart.select("#values").selectAll("rect")
  .data(data);

bars.enter
  .append("rect")
  
bars.attr({
  height: function(d,i) {
    return d.days * 20;
  },
  width: barw,
  fill: "#812222",
  "fill-opacity": 0.9,
  stroke: "#000000",
  "stroke-width": 0
})

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"><rect width="10" height="10" x="100" y="100" fill="#496C99"></rect><g></g></svg>