Tributary inlet

_.md

[ Launch: Tributary inlet ] 5936377 by gelicia

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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 dataset = [
[0,71],
[1,61],
[2,76],
[3,55],
[4,64],
[5,67],
[6,65],
[7,96],
[8,124],
[9,85],
[10,253],
[11,401],
[12,261],
[13,293],
[14,167],
[15,140],
[16,105],
[17,38],
[18,24],
[19,10]
];




//Width and height
var w = 1000;
var h = 235;
var barPadding = 1;

//Calculate scale to fit graph nicely
biggest = 0;
for (i=0; i<dataset.length; i++){
    if (dataset[i][1] > biggest){
        biggest = dataset[i][1];
    }
}
scale = h / biggest

var svg = d3.select("svg")
            .attr("width", w)   // <-- Here
            .attr("height", h); // <-- and here!

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x",
		function(d,i){
		return i*(w/dataset.length);
	})

	.attr("y", function(d){
		return h - (d[1] * scale );
	})
	.attr("width", w / dataset.length - barPadding)
	.attr("height",
		function(d){
		return d[1] * scale;
	})
	.attr("fill", function(d){
		//return "rgb(0,0," + (d[1] * 10) + ")";
		return "steelblue";
	});

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
	return d[1];
	})
    .attr("x", function(d,i){
	return i*(w/dataset.length) + (w / dataset.length - barPadding) / 2;
	})
    .attr("y", function(d){
        return h - (d[1] * scale ) +10;
	})
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "black")
    .attr("text-anchor", "middle");