Horizontal Bar Chart

horizontal_bar.js

$(document).ready(function() {

  var margin = {top: 20, right: 50, bottom: 50, left: 200},
      width = $("#horizontal").width() - margin.left - margin.right,
      height = 5000 - margin.top - margin.bottom;

  var yAxisMargin = height - margin.bottom

  var svg = d3.select("#horizontal").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 + ")");

  var x = d3.scale.linear().range([0, width]);
  var y = d3.scale.ordinal().rangeRoundBands([0, yAxisMargin-25], .9  );

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")

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

  var acreageThreshold = 0; //not greater than 5000

  d3.csv("/ski_resort_acres_three.csv", function(error, data) {

    data = jQuery.grep(data, function(d, index) {
      var is_viewable = d.acres >= acreageThreshold;
      return is_viewable;
    });
    
    data.forEach(function(d) {
      d.resort_name = d.resort_name;
      d.acres = +d.acres;
    });
    
    x.domain([0, d3.max(data, function(d) { return d.acres; })]);
    y.domain(data.map(function(d) { return d.resort_name; }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (yAxisMargin - 25) + ")")
        .call(xAxis)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", "-.55em")
        .attr("transform", "rotate(-45)" );

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .style("font-size", "10px")

    svg.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", 0)
        .attr("fill", "steelblue")
        .attr("height",  y.rangeBand())
        .attr("y", function(d) { return y(d.resort_name); })
        .attr("width", function(d) { return x(d.acres); })

    svg.selectAll(".bartext")
        .data(data)
        .enter().append("text")
        .attr("class", "bartext")
        .attr("text-anchor", "middle")
        .attr("fill", "black")
        .attr("x", function(d) { return x(d.acres) + 20 })
        .attr("y", function(d) { return y(d.resort_name)+ 3; })
        .attr("font-size", "11px")
        .attr("text-anchor", "middle")
        .text(function(d){
             return addCommas(d.acres);
        });

  });

});