D3: Bar Chart (Networked Readiness Index - 2014)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Knight D3 | Module 1</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Oswald:700,400);
    @import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
      background: #D3D3D3;
      font-family: oswald, arial, sans-serif;
			color: #333;
    }
    p {
      font-family: open sans, arial, sans-serif;
    }
    a:link {
      color: #3A96B7;
      text-decoration: none;
    }
		a:hover {
			text-decoration: underline;
		}
		a:visited {
			color: #3A96B7;
		}
		a:active {
			color: steelBlue;
		}
    #container {
      width: 700px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
      padding: 50px;
      background: #FFF;
      box-shadow: 0 0 5px #999999;
    }
		.source {
			font-family: oswald, arial, sans-serif;
			font-weight: bold;
			font-size: .75em;
			float: right;
		}
		svg {
			background: #FFFFFF;
		}
		rect:hover {
			fill: #0DDDFF;
		}
		.axis path,
		.axis line {
			fill: none;
			stroke: #36435A;
			shape-rendering: crispEdges;
		}
		.axis text {
			font-family: oswald, arial, sans-serif;
			font-size: 11px;
			fill: #36435A;
		}
		.y.axis path,
		.y.axis line {
			opacity: 0;
		}
		.tooltip {
			background: #EEE;
			box-shadow: 0 0 5px #999999;
			color: #333;
			padding: 8px;
			position: absolute;
			text-align: center;
			visibility: hidden;
			z-index: 10;
 		}

</style>
</head>
<body>

<div id='container'>
    <h1>Networked Readiness Index - 2014</h1>
    <p>The 25 most networked countries, on a scale from 1 (worst) to 7 (best), based on performance leveraging information and communications technologies to boost competitiveness and well-being.<span class='source'>Data Source: <a href='https://www.weforum.org/global-information-technology-report-2014-data-platform'>World Economic Forum</a></span></p>
  </div>

var w = 700;
		var h = 600;
		var padding = [ 20, 50, 20, 120 ];  //Top, right, bottom, left

var widthScale = d3.scale.linear()
							.range([ 0, w - padding[1] - padding[3] ]);

var heightScale = d3.scale.ordinal()
							.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

var xAxis = d3.svg.axis()
						.scale(widthScale)
						.orient('bottom');

var yAxis = d3.svg.axis()
						.scale(heightScale)
						.orient('left');

var svg = d3.select('#container')
					.append('svg')
					.attr('width', w)
					.attr('height', h);

var tooltip = d3.select('body')
						.append('div')
						.attr('class', 'tooltip');

var tooltipOn = function(d, i) {
					var content = '<div>' + d.country + ' has a ' + d.score + ' score in network readiness.</div>';
					tooltip.html(content)
					.style('visibility', 'visible');
		};

var tooltipMove = function(d, i) {
				tooltip.style('top', (d3.event.pageY + 10) + 'px')
				.style('left', (d3.event.pageX + 10) + 'px');
		};

var tooltipOff = function() {
					tooltip.style('visibility', 'hidden');
		};

d3.csv('network.csv', function(dataLoad) {

var dataSorted = dataLoad.sort(function(a,b) {
				return d3.descending(+a.score, +b.score);
			})

var data = dataSorted.filter(function(d,i) {
				if (i<25) {
					return d;
				}});

widthScale.domain([ 0, d3.max(data, function(d) {
				return +d.score;
			}) ]);

heightScale.domain(data.map(function(d) { return d.country; } ));

var rects = svg.selectAll('rect')
							.data(data)
							.enter()
							.append('rect');

rects.attr('x', padding[3])
				 .attr('y', function(d) {
					return heightScale(d.country);
				 })
				 .attr('width',0)
				 .attr('fill','#FFFFFF')
				 .transition()
				 .duration(2000)
				 .attr('width', function(d) {
					return widthScale(d.score);
				 })
				 .attr('height', heightScale.rangeBand())
				 .attr('fill','#3A96B7');

rects.on('mouseover', tooltipOn)
				.on('mousemove', tooltipMove)
				.on('mouseout', tooltipOff);

svg.append('g')
				.attr('class', 'x axis')
				.attr('transform', 'translate(' + padding[3] + ',' + (h - padding[2]) + ')')
				.call(xAxis);

svg.append('g')
				.attr('class', 'y axis')
				.attr('transform', 'translate(' + (padding[3] - 5) + ',0)')
				.call(yAxis);

});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js