d3bar

d3 bar chart

by ramnathv

HTML

<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="vis"></div>

CSS

.d3-tip {
    font-size: 14px;
    color: orange;
}

JavaScript

var dataset = [5, 3, 5, 7, 20, 1, 3, 5, 7]

var w = 400,
    h = 200,
    barPadding = 1

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


// create svg element and set height/width
var svg = d3.select("#vis")
  .append("svg")
  .attr("width", w)
  .attr("height", h)

// initialize tooltips

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .html(function(d){
     return d
   })

svg.call(tip)


// bind data to svg and create circles
var bars = svg.selectAll("rect")
  .data(dataset)
  .enter()
     .append("rect")

// style bars
bars
  .attr(styleBars(5))
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide)

// add labels
var labels = svg.selectAll("text")
  .data(dataset)
  .enter()
    .append("text")

// style labels
labels
  .text(function(d){return d})
  .attr("x", function(d, i){
       return i*w/dataset.length + 
          (w/dataset.length - barPadding)/4
    })
  .attr("y", function(d){
      return h - d*4 - 5
  })
  .transition()
  .duration(500)
  .delay(500)
  .attr("fill", "darkorange")
    

function styleBars(barPadding){
  return {
     x: function(d, i) { 
       return i * (w/dataset.length); 
     },
     y: function(d) { return h - (d * 4); },
     width: w / dataset.length - barPadding,
     height: function(d) { return d * 4; },
     fill: function(d) { 
         return "rgb(90, 60, " + (d * 20) + ")"; 
     }
   }    
}

function styleText(){
    
}