Paired Bar Chart - ToolTips

by Alexander Tymchuk

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="searchVolume"></div>
<div id="tooltip" class="hidden">
    <p class="heading"><span id="keyword">word</span></p>
    <p class="heading">Search Volume</p>
    <p class="indent"><span id="volVal">5</span></p>
    <p class="heading">CPC</p>
    <p class="indent">$<span id="cpcVal">5</span></p>
</div>
<button id="change">Switch Global</button>

CSS

#tooltip {
    position: absolute;
    width: 90px;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
#tooltip.hidden {
    display: none;
}
#tooltip p {
    margin: 0;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 16px;
}
.indent {
    padding-left: 5px;
}
rect {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
rect:hover {
    fill: orange;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
/*.legend {
	padding: 2px;
	border: 2px solid black;
}*/

JavaScript

var margin = {top: 25, right: 75, bottom: 85, left: 85},
				w = 600 - margin.left - margin.right,
				h = 350 - margin.top - margin.bottom;
var padding = 10;

var colors =	[["Local", "#377EB8"],
				 ["Global", "#4DAF4A"]];

var dataset = [
				{"keyword": "payday loans", "global": 40000, "local": 73000, "cpc": "14.11"},
				{"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
				{"keyword": "personal loans", "global": 50000, "local": 101000, "cpc": "6.14"},
				{"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
				{"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
			];

var xScale = d3.scale.ordinal()
				.domain(d3.range(dataset.length))
				.rangeRoundBands([0, w], 0.05); 
// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) { return (d.local > d.global) ? d.local : d.global;})]) 
				.range([h, 0]);
var xAxis = d3.svg.axis()
				.scale(xScale)
				.tickFormat(function(d) { return dataset[d].keyword; })
				.orient("bottom");
var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left")
				.ticks(5);

var commaFormat = d3.format(',');

//SVG element
var svg = d3.select("#searchVolume")
			.append("svg")
			.attr("width", w + margin.left + margin.right)
			.attr("height", h + margin.top + margin.bottom)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
// Graph Bars
var sets = svg.selectAll(".set") 
	.data(dataset) 
	.enter()
	.append("g")
    .attr("class","set")
    .attr("transform",function(d,i){
         return "translate(" + xScale(i) + ",0)";
     })	;

sets.append("rect")
    .attr("class","local")
	.attr("width", xScale.rangeBand()/2)
	.attr("y", function(d) {
		return yScale(d.local);
	})
    .attr("x", xScale.rangeBand()/2)
    .attr("height", function(d){
        return h - yScale(d.local);
    })
	.attr("fill",...