d3_script_pt4.js

function update(dataSet) {
	//Calculates the scales from the data set
    var scales = calculateScales(dataSet)
    var xScale = scales[0]
    var yScale = scales[1]
    var yAxisScale = scales[2]

    //Calculates the axes using the previous calculated scales
    var axes = calculateAxes(xScale, yAxisScale)
    var xAxis = axes[0]
    var yAxis = axes[1]

    //Since our data is in JSON format we need to define
    //a key function to help //D3 keep track of data points
    // order. For more info check:
//http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_data_joins_with_keys
    var key = function(d) {
      return d.university;
    };

// Select all the existing rectangles before updating the the
    var rects = d3.select(".rects")
                  .selectAll("rect")
                  .data(dataSet, key)

// Adds additional rectangles if the dataset contains
// additional points and applies the corresponding attributes
    rects.enter()
      .append("rect")
      .attr("x", xPadding)
      .attr("y", function (d, i) {
        return yScale(i)
      })
      .attr("width", function (d) {
        return xScale(d.average_salary)
      })
      .attr("height", function () {
        return h/dataSet.length - rectMargin
      })

// Remove the extra rectangles if the current dataset is
// smaller than the previous one
    rects.exit()
      .transition()
      .duration(500)
      .attr("x", w)  // <-- Exit stage left
      .remove();

// Updates all the rectangles to accommodate the new data passed in
    rects.transition()
      .duration(500)
      .attr("x", xPadding)
      .attr("y", function (d, i) {
        return yScale(i)
      })
      .attr("width", function (d) {
        return xScale(d.average_salary)
      })
      .attr("height", function () {
        return h/dataSet.length - rectMargin
      })


// Select all the existing labels
    var labels = d3.select('.labels')
                     .selectAll('.amount')
                     .data(dataSet, key)

//Adds additional labels if the dataset contains additional
// points and applies the corresponding attributes
    labels.enter()
          .append("text")
          .text(function (d) {
            return "$" + d.average_salary.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
          })
          .attr("x", function (d) {
            return xScale(d.average_salary) - 40 //magic
          })
          .attr("text-anchor", "middle")
          .attr("class", "amount")
          .attr("y", function (d, i) {
            return yScale(i) + yScale.rangeBand() / 1.7;//magic
          })
          .attr("font-family", "sans-serif")
          .attr("font-size", "11px")
          .attr("fill", "red")

// Remove the extra labels if the current dataset is
// smaller than the previous one
	  labels.exit()
            .transition()
            .duration(500)
            .attr("x", w)  // <-- Exit stage left
            .remove();

// Updates all labels to accommodate the new data passed in
    labels.transition()
           .duration(500)
           .text(function (d) {
             return "$" + d.average_salary.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
           })
           .attr("x", function (d) {
             return xScale(d.average_salary) - 40 //magic
           })
           .attr("text-anchor", "middle")
           .attr("class", "amount")
           .attr("y", function (d, i) {
             return yScale(i) + yScale.rangeBand() / 1.7;//magic
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "red");

//Updates the axes
    svg.select(".x.axis")
          .transition()
          .duration(1000)
          .call(xAxis);

    svg.select(".y.axis")
          .transition()
          .duration(1000)
          .call(yAxis);
  }