D3 Examples - moving bars (from jkeohan)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style>
​
        .allContent {
            width:1000px;
        }
​
        .barGraph-title h2{
            text-align: center;
        }
        .barGraphText{
​
            position:absolute;
            top:0px;
            right:200px;
        }
        .buttonContainer {
                margin:0 auto;
                display: inline-block;
                text-align: center;
                width:100%;
                overflow:hidden;
        }
        .button {
            display: inline-block;
            margin-left: 10px;
            font-size: 18px;
            border: 1px solid black;
            padding:5px;
            cursor:pointer;
        }
        .button.selected {
            font-weight: bold;
            border: 3px solid green;
            color:#296629;
        }
        .clearfix {
            clear:both;
        }
​
        </style>
    </head>
    <body>
        <div class="allContent">
            <div class="barGraph-title"></div>
            <div class="buttonContainer"></div>
            <div class="clearfix"</div>
            <div class="barGraph"></div>
        </div>
        <script type="text/javascript">     
​
            var margin = {top:10,right:0,bottom:50,left:40},
            width = 1000 - margin.left - margin.right,
            height = 800 - margin.top - margin.bottom,
            datastore;  //a variable to use the data in the function below
            var color = d3.scale.linear()
                 .range(['#66FF66',  '#296629'])
​
            var tempColor;
            var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
            var year = 2002;
​
            var barGraphTitle = d3.select(".barGraph-title")
            var buttonYears = d3.select(".buttonContainer")
            var svg = d3.select('.barGraph').append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)        
                .append("g")
                    .attr("width", width)
                    .attr('height', height)
                    .attr("transform","translate(20,30)")
​
            var xScale = d3.scale.linear()
            var yScale = d3.scale.ordinal()
​
            barGraphTitle .insert("h2").text("Renewable Energy (%) of Total Energy Generation")
​
      d3.csv("renewable-energy-perc-of-total-energy-generation.csv", function(data) {
​
        datastore=data;  //storing the data for use below
        
        //Update scales
        color.domain([9,datastore.length])
        xScale.range([0,width - 250])
        yScale.rangeBands([0,height], .1)
​
        var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
        .text(function(d) { return d})
        .attr("class", function(d) { if( d === year ) return "button selected"; else return "button" } ) 
        .on("click", function(d) { change (d) })  //call change instead of update
​
    function mouseover (d) { tempColor = this.style.fill;
            d3.select(this).style('opacity', .5).style('fill', 'steelblue')}
​
        function mouseout (d) { 
            d3.select(this).style('opacity', 1).style('fill', tempColor)}
​
        update(year)
​
        function update(year) {
       
            d3.select(".selected").classed("selected", false)
            buttons.attr("class", function(d) { if (d === year ) return "button selected"; else return "button"})
                
            datastore = datastore.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});
            
​
        xScale.domain([0,d3.max(datastore, function(d) { return +d[year] } ) ] )
            yScale.domain(datastore.map(function(d){return d.Location;}))  //use the name of the locations as domain
​
            //Data Join
        var rect = svg.selectAll("rect").data(datastore)
            var text = svg.selectAll("text").data(datastore)
​
              //Update
            rect.attr('width', 0)
            text.style("opacity", 0)
          
              //Enter
            rect.enter().append('rect')
                .attr("x",250)
                .attr("width", 0)
                .attr("y", function(d,i) { return yScale(d.Location) })  //change the yScale according to the scale from i to d.Location 
                .attr("height", yScale.rangeBand())
                .attr("fill", function(d,i) { return color(i) })
                .on("mouseover", mouseover)
                .on("mouseout", mouseout)
​
            rect.transition().duration(function(d,i) {return i * 20 }).delay(function(d,i) { return i * 40 } ) 
                .attr("width", function(d) { return xScale(+d[year])})
​
            text.enter().append("text")
                .attr("x", 240)
                .attr("y", function(d,i) { return yScale(d.Location) + 12 } )
                .attr("font-size", 15)
                .attr("text-anchor", "end")
                .attr("font-weight", "bold")
​
            text.transition().duration(function(d,i) { return i * 20 }).delay(function(d,i) { return i * 40 })
                .text(function(d) { return d["Location"] + " " + +d[year] + "%"})
                .attr("y", function(d,i) { return yScale(d.Location) + 12 })
                .style("opacity",.9)
​
                }
            });
​
function change(year)
{
datastore = datastore.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});  //sort the data for the year
​
yScale.domain(datastore.map(function(d){return d.Location;}));  //change the y-scale
​
svg.selectAll("rect").data(datastore, function(d){return d.Location;}).transition().duration(2000).attr("y",function(d){ return yScale(d.Location);}).attr("width",function(d){return xScale(+d[year]);}).attr("fill", function(d,i) { return color(i) });  //change the location of the bar - note that you have to use a function in data to tell d3 which is the constant identifier of the data
​
svg.selectAll("text").data(datastore, function(d){return d.Location;}).transition().duration(2000).attr("y",function(d){ return yScale(d.Location)+12;});
​
svg.selectAll("text").data(datastore, function(d){return d.Location;}).transition().delay(2000).duration(0).text(function(d) { return d["Location"] + " " + +d[year] + "%"});
}
            
        </script>
 
    </body>
</html>
    