first

_.md

[ Launch: Tributary inlet ] 4710756 by afbroman

config.json

{"description":"first","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}},"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 w = 600;
var h = 250;
var barPadding = 1;

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
           11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

var xScale = d3.scale.ordinal()
           .domain(d3.range(dataset.length))
           .rangeRoundBands([0, w], 0.05);

var svg = d3.select("#graph")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

svg.selectAll('rect')
   .data(dataset)
   .enter()
   .append("rect")
.attr("x", function (d, i) {
  return(xScale(i));
})
.attr("y", function (d) {
  return(h - d*4);
})
   .attr("width", w / dataset.length - barPadding)
.attr("height", function (d) {
  return d*4;
})
.attr("fill", function (d) {
   return "rgb(0,0," + (d * 10) + ")";
});

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text((d) -> d)
.attr('x', function (d,i) {
  return(i * (w/dataset.length) + (w/dataset.length - barPadding) / 2);
})
.attr('y', function (d) {
  return(h - (d*4) + 14);
}
   .attr('font-family', 'sans-serif')
   .attr('font-size', '11px')
   .attr('fill', 'yellow')
   .attr('text-anchor', 'middle')