D3 Examples - D3: Bar Chart (Networked Readiness Index

xxxxxxxxxx
 
<!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>
​
  <script type='text/javascript'>
​
        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>
​
    