D3 Examples - horzintal barchart

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bar Chart</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style>
    body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: rgb(128,128,128);
    }
    h1{
        font-weight: normal;
        font-size: 25px;
        color: #777;
    }
    .values {
        font-size: 11px;
        fill: rgb(0, 0, 0);
        font-weight: lighter;
    }
    .bar:hover{
        opacity: .8;
    }
    .country{
        font-weight: lighter;
        font-size: 13px;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #777;
        shape-rendering: crispEdges;
    }
    .tick text{
        opacity: 0;
    }
    .axis text {
        font-size: 10px;
        fill: #777;
    }
    </style>
</head>
<body>
    <div id="graph">
        <h1>CO2 (kt) Emissions per country (2009)</h1>
    </div>
    <script type="text/javascript">
​
    var margin = {top: 30, right: 20, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;
​
    //formatter
    var formatValue = d3.format("0,000");
​
    //translating the graph
    var translate = 110;
​
    //create the x scale
    var xScale = d3.scale.linear();
​
    //create the y scale
    var yScale = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.1);
​
    //create x axisvar
    xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
​
    //create the container
    var svg = d3.select("#graph").append("svg")
    .attr("width", width + translate)
    .attr("height", height + margin.top);
​
    //creating x Axis
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + translate + "," + height + ")")
    .call(xAxis);
​
    //load csv
    d3.csv("CO2-Emissions.csv", function(error, data){
        if (error) throw error;
​
        //iterate throught data to convert strings to numbers
        data.forEach(function(d){
            d.value = +d.value;
        });
​
        //set xScale domain
        xScale.range([0, width- translate]).domain(d3.extent(data, function(d){return d.value;}));
​
        //set yScale domain
        yScale.domain(d3.range(data.length));
​
        //select bars
        var bar = svg.append("g").attr("class", "bars").selectAll(".bar")
        .data(data);
​
        //create bar elements
        bar.enter()
        .append("rect")
        .attr("width", 0)
        .attr("height", yScale.rangeBand())
        .attr("x", 0)
        .attr("y", function(d, i){
            return yScale(i);
        })
        .attr("fill", "rgb(170, 49, 93)")
        .attr("class", "bar")
        .append("title")
        .html(function(d){
            return d.country + ": "+d.value;
        });
​
        //update values
        bar.transition().duration(1000)
        .attr("width", function(d){
            return xScale(d.value) ;
        });
        d3.selectAll(".bars").attr("transform", "translate(" + translate + ",0)");
​
        //select text bar values
        var values = svg.append("g").attr("class", "values").selectAll(".value")
        .data(data);
​
        //create text elements
        values.enter()
        .append("text")
        .attr("class", "value")
        .attr("x", 0)
        .attr("dy", ".95em")
        .attr("dx", ".5em")
        .attr("y", function(d, i){
            return yScale(i);
        })
        .text(function(d){
            return addComas(d.value);
        });
​
        //update actual position
        values
        .transition()
        .duration(1000)
        .attr("x", function(d){
            return xScale(d.value) ;
        });
​
        d3.selectAll(".values").attr("transform", "translate(" + translate + ",0)");
​
        //create countries texts
        var countries = svg.append("g").attr("class", "countries").selectAll(".country")
        .data(data)
        .enter()
        .append("text")
        .attr("class", "country")
        .attr("x", 0)
        .attr("dy", ".75em")
        .attr("dx", "7em")
        .attr("y", function(d, i){
            return yScale(i);
        })
        .attr("text-anchor", "end")
        .text(function(d){
            return d.country;
        });
​
        //create the line between countries and bars
        var line = svg.append("line")
        .attr("x1", 0)
        .attr("x2", 0)
        .attr("y1", 4)
        .attr("y2", yScale(data.length-1) + yScale.rangeBand())
        .attr("stroke", "#777")
        .attr("stroke-width", 1)
        .attr("transform", "translate(" + translate + ",0)");
​
        //create x axis animation from zero
        d3.selectAll(".x.axis").transition().duration(1000).call(xAxis);
​
        //set visibility of x axis text labels
        d3.selectAll(".tick text").transition().duration(1000).delay(500).style("opacity", 1);
    });
​
    //function to add a coma to values
    function addComas(n) {
        return formatValue(n).replace('.', ',').replace('.', ',');
    }
​
    </script>
</body>
</html>
​
    