d3_script_pt5.js

function draw(dataSet) {
	//Appends a svg element and sets its dimensions using w and h
    svg = d3.select('body')
            .append('svg')
            .attr("width", w)
            .attr("height", h)
            .attr("class", "graph")
            .append('g')
            .attr("transform", "translate(" + xMargin + "," + yMargin + ")")
    //Calculates the scales with the initial data set
    //(in this case the overall_salaries data)
    var scales = calculateScales(dataSet)
    var xScale = scales[0]
    var yScale = scales[1]
    var yAxisScale = scales[2]

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

    //Bounds each data point to a rectangle and then sets rectangle
    // properties (enter selection for more info about data
    // join and selections check http://bost.ocks.org/mike/join/
    rects = svg.append('g')
                .attr("class", "rects")
                .selectAll('rect')
                .data(dataSet)
                .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
                })

	//Bounds each data point to a text label and sets the
  // properties of the label
     svg.append('g')
        .attr('class', "labels")
        .selectAll("text")
        .data(dataSet)
        .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("class", "amount")
        .attr("text-anchor", "middle")
        .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");

//Calls the x axis and groups all its labels under a
// svg group ('g') element
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - yPadding) + ")")
          .call(xAxis);

//Calls the y axis and groups all its labels under a svg group
// ('g') element
      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);
  }