D3 Examples - MouseOverBar

xxxxxxxxxx
 
<!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], 0.144);
​
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")
          .text("Frequency")
            .attr("transform", "rotate(0)")
            .attr("transform", "translate(400,0)") //move text
            .attr("y", 6) //you can do <<.attr("x", 400)>> as well
            .attr("dy", "1.91em")
            .style("text-anchor", "start");
​
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
​
    var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("rect")
            .attr("class", "bar");
    
    bars
        .attr("y", function(d) {return y(d.letter);})
        .attr("height", y.rangeBand())
        .attr("x", 0)//function(d) {
            //return x(d.frequency);
        //})
        .attr("width", function(d) {
            return x(d.frequency);
        })
        .attr("fill", function(d, i) {
            return color(i);
        })
        .attr("id", function(d, i) {
            return i;
        })
        .on("mouseover", function() {return d3.select(this)
                .attr("fill", "red");
        })
        .on("mouseout", function(d, i) {return d3.select(this)
              .attr("fill", function() {
                return "" + color(i) + ""; 
                        //can do <<color(this.id)>>
            });
        });
​
    bars.append("title")
        .text(function(d) {
            return d.letter;
        });
​
});
​
function type(d) {
    d.frequency = +d.frequency;
    return d;
}
</script>
​
</html>
    