d3 bar chart

interactive d3 bar

by onino

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="d3-setup-bar"></div>

SCSS

$pale-blue: #f6f8fe;
$dark-two:#253644;
$pale-grey: #f0f4f7;
$font-roman:'Helvetica LT W01 Roman';
$font-light:'Helvetica LT W01 Light';
$font-bold:'Helvetica LT W01 Bold';
body {
  background-color:#25333F;
}
.axis path{
	fill: none;
	stroke: #000;
}

$setup-color-main: #50BEE9;
$setup-color-inactive: rgba($pale-blue, .1);
// bars
.bar {
	fill: $setup-color-inactive;
	&:hover {
		fill: $setup-color-main;
		cursor:pointer;
	}
	&.selected {
		fill:$setup-color-main;
	}
}

// labels
.label-text {
	text-anchor:middle;
	font-size: 12px;
	font-weight:bold;
	fill:$setup-color-main;
	opacity:0;
	&.selected {
		opacity:1;
	}
}

// axis text
.axis text {
	fill:rgba( #fff, .6 );
	font-family: $font-light;
	font-size: 9px;
}
.axis-text.selected {
	fill:#50BEE9;
}

// y axis
.y.axis path {
	display:none;
}

// x axis
.x.axis path {
	fill: none;
	stroke:#353C41;
}

// gridline
.grid .tick {
	stroke: #fff;
	opacity: .18 !important;
	stroke-width:0;
	line {
		stroke-width:.5 !important;
	}
}
.grid path {
	stroke-width: 0;
}



// tooltip
.d3-tip {
	line-height: 1;
	font-weight: normal;
	padding: 10px 15px;
	background: $pale-grey;
	border-color:$pale-grey;
	opacity:.5;
	color: $dark-two;
	border-radius: 2px;
	font-size:11px;
	z-index:9999;
}
.tooltip-line {
	display:block;
	padding-bottom:4px;
}
.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: $pale-grey;
	content: "\25BC";
	position: absolute;
	text-align: center;
}
.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
}

JavaScript

// container size
var width = 400, height = 350;
var margin = {top: 90, right: 20, bottom: 30, left: 80};

//data
var data = [ 
	{"month":"JAN","patients":120}, 	
	{"month":"FEB","patients":50}, 
	{"month":"MAR","patients":9}, 
	{"month":"APR","patients":342}, 
	{"month":"MAY","patients":100}, 
	{"month":"JUN","patients":250}
];

//x scale
var xScale = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

// y scale
var yScale = d3.scale.linear()
	.range([height, 0]);

// set x and y scales
xScale.domain(data.map(function(d) { return d.month; }));
yScale.domain([0, d3.max(data, function(d) { return d.patients; })]);

// x axis
var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.outerTickSize(0);

// y axis
var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

// tooltip
/*var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
      return "<span class='tooltip-line'>Setup: " + d.patients + "</span><span>Not Set Up: " + d.patients + "</span>";
  }); */

// create svg container
var svg = d3.select('#d3-setup-bar')
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");        


// apply tooltip
//svg.call(tip);

// Horizontal grid (y axis gridline)
svg.append("g")         
	.attr("class", "grid horizontal")
  	.call(d3.svg.axis().scale(yScale)
        .orient("left")
        .tickSize(-(height + margin.top + margin.bottom - 70), 0, 0)
        .tickFormat("")
       );

// create bars
var bars = svg.selectAll(".bar")
	.data(data)
	.enter()
	.append("g");

bars.append("rect")
  	.attr("class", "bar")
  	.attr("x", function(d) { return xScale(d.month); })
  	.attr("width", xScale.rangeBand())
  	.attr("y", function(d) { return yScale(d.patients); })
  	.attr("height", function(d) { return height - yScale(d.patients); })
  	.on("click", function(d, i) {

 ...