Bar chart with mouseover event

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bar Chart with Manipulation</title>
    <style>
    .axis {
        font: 10px sans-serif;
    }
    .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    .y.axis path {
        display: none;
    }
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>

</body>
<script>
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .1);

var x = d3.scale.linear()
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(10, "%");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var color = d3.scale.category20c();

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
    x.domain([0, d3.max(data, function(d) {
        return d.frequency;
    })]);
    y.domain(data.map(function(d) {
        return d.letter;
    }));

svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("transform", "rotate(0)")
        .attr("y", 6)
        .attr("dy", "1.91em")
        .style("text-anchor", "start")
        .text("Frequency");

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

bars.append("title")
        .text(function(d) {
            return d.letter;
        });

});

function type(d) {
    d.frequency = +d.frequency;
    return d;
}
</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js