D3 Examples - Global Corporate Tax Rates in 2015: http://bl.ocks.org/violetvivirand/200f464b0403914e19b34613836f0fbe

Known Issue
If the country has no data, I set the width of the bar to 0 px. Due to this configuration, you can't see the details of the country because you can't find any place to be clicked.
Still working on a solution. All suggestions are welcome.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<head>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <style>
    body {
        font: 10px sans-serif;
    }
    /*.bar rect {
        fill: steelblue;
    }*/
    
    .bar text.value {
        fill: black;
    }
    /* Instead of using !important, we can still add class during mouse event*/
    /* https://stackoverflow.com/questions/20002625/darken-rect-circle-on-mouseover-in-d3 */
    
    .bar rect:hover {
        fill: #87CEEB !important;
    }
    
    .axis {
        shape-rendering: crispEdges;
    }
    
    .axis path {
        fill: none;
    }
    
    .x.axis line {
        stroke: #fff;
        stroke-opacity: .8;
    }
    
    .y.axis path {
        stroke: black;
    }
    
    .axis-label {
        font-weight: 800;
    }
    
    .note {
        position: absolute;
        /*z-index: 10;*/
        font-size: 8pt;
        border-width: 0.5px;
        border-style: solid;
        padding: 3px 3px 3px 3px;
        background-color: white;
        width: 600px;
    }
    
    .note .note-title {
        font-weight: 800;
    }
    </style>
</head>
​
<body>
    <script>
    var m = [50, 30, 10, 100],
        w = 960 - m[1] - m[3],
        h = 2000 - m[0] - m[2];
​
    var format = d3.format(",.0f");
​
    var x = d3.scale.linear().range([0, w]),
        y = d3.scale.ordinal().rangeRoundBands([0, h], .1);
​
    var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h).tickFormat(function(d) {
            return d + '%';
        }),
        yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
​
    var color = d3.scale.linear()
        .range(["#ffffcc", "#006837"]);
​
    var notetext = function(c, t, f) {
        return "<span class=\"note-title\">" + c + "</span>: " + t + "%" + f + "Click the bar again to close footnote panel.";
    }
​
    var z_index = 0;
​
    var svg = d3.select("body").append("div").attr("class", "main").append("svg")
        .attr("width", w + m[1] + m[3])
        .attr("height", h + m[0] + m[2])
        .append("g")
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
​
    d3.csv("global-tax.csv", function(error, data) {
        if (error) throw error;
​
        // Parse numbers, and sort by value.
        data.forEach(function(d) {
            // Can't set d.tax to NaN due to Sorting Function
            d.tax == "" ? d.tax = -1 : d.tax = +d.tax;
        });
        data.sort(function(a, b) {
            return b.tax - a.tax;
        });
​
        // Set the scale domain.
        x.domain([0, d3.max(data, function(d) {
            return d.tax;
        })]);
        y.domain(data.map(function(d) {
            return d.country;
        }));
        color.domain([0, d3.max(data, function(d) {
            return d.tax;
        })]);
​
        var notes = d3.select("body").select("div.main").append("div").attr("class", "notes").selectAll("div")
            .data(data)
            .enter().append("div")
            .attr("class", "note")
            .attr("id", function(d) {
                return "tax_" + String(d.id);
            })
            .style("visibility", "hidden")
            .style("top", 0 + "px")
            .style("left", 0 + "px")
            .html(function(d) {
                return notetext(d.country, d.tax, d.footnotes);
            });
​
        var bar = svg.selectAll("g.bar")
            .data(data)
            .enter().append("g")
            .attr("class", "bar")
            .attr("transform", function(d) {
                return "translate(0," + y(d.country) + ")";
            });
​
        bar.append("rect")
            .attr("width", function(d) {
                return d.tax == -1 ? 0 : x(d.tax);
            })
            .attr("height", y.rangeBand())
            .style("fill", function(d) {
                return color(d.tax);
            })
            .on("click", function(d) {
                var active = eval("tax_" + String(d.id)).active ? false : true;
                var visibility = active ? "visible" : "hidden";
                z_index = active ? z_index += 1 : z_index += 0;
                d3.select("#tax_" + String(d.id))
                    .style("visibility", visibility)
                    .style("top", (d3.event.pageY - 10) + "px")
                    .style("left", (d3.event.pageX + 10) + "px")
                    .style("z-index", z_index)
                eval("tax_" + String(d.id)).active = active;
            });
​
        bar.append("text")
            .attr("class", "value")
            .attr("x", function(d) {
                return d.tax == -1 ? 0 : x(d.tax);
            })
            .attr("y", y.rangeBand() / 2)
            .attr("dx", 3)
            .attr("dy", ".35em")
            .attr("text-anchor", "start")
            .text(function(d) {
                return d.tax == -1 ? "No Data." : format(d.tax) + '%';
            });
​
        svg.append("g")
            .attr("class", "x axis")
            .call(xAxis)
            .append("text")
            .style("text-anchor", "middle")
            .attr("class", "axis-label")
            .attr("x", function() {
                return (w / 2);
            })
            .attr("y", "-15")
            .text("Corp Tax Rate of 2015");
​
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .style("text-anchor", "middle")
            .attr("class", "axis-label")
            .attr("x", function() {
                return -(m[3] / 2);
            })
            .attr("y", "-5")
            .text("Country");
    });
    </script>
</body>
​
    