bar chart

_.md

[ Launch: bar chart ] 8967039 by Cynddl

aide.txt

...

config.json

{"description":"bar chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"aide.txt":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/NhMPdll.gif"}

inlet.js

var width = tributary.sw,
    height = tributary.sh;

var svg = d3.select("svg")
            .append("svg:g")
            .attr("width", width)
            .attr("height", height);

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


var color = d3.scale.linear()
              .domain([d3.min(dataset), d3.max(dataset)])
              .range(['#FFB800', '#9C0A22']);

var rects = svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
      return i * (width / dataset.length);
   })
   .attr("y", function(d){return height - 4 * d -285})
   .attr("width",  width / dataset.length - 2)
   .attr("height", function (d) { return d * 4; })
   .attr('fill', color);



var texts = svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
        return d;
   })

   .attr("x", function(d, i) {
        return i * (width / dataset.length) + (width / dataset.length - 2) / 2;
    })
   .attr("y", function(d) {
        return height - (d * 4) -263;
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "white")
   .attr("text-anchor", "middle");

style.css

/*rect {
   stroke: white;
   fill: steelblue;
}*/