Horizontal Paired Bar Chart

Flip vertical to Horizontal

by enigmarm

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="searchVolume"></div>

CSS

#tooltip {
	position: absolute;
	width: 95px;
	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;
}
.heading{
	font-weight: bold;
}
#keyword{
	color: red;
	font-style: italic;
}
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;
}

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", "blue"],
    ["Global", "red"]
];

var dataset = [{
    "keyword": "payday loans",
    "global": 140000,
    "local": 73000,
    "cpc": "14.11"
}, {
    "keyword": "title loans",
    "global": 165000,
    "local": 160000,
    "cpc": "12.53"
}, {
    "keyword": "personal loans",
    "global": 150000,
    "local": 101000,
    "cpc": "6.14"
}];

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", colors[0][1])
;

    sets.append("rect")
        .attr("class", "global")
        .attr("width",...