text: var svgWidth = 960;
  var svgHeight = 500;
  
  var margin = {
      top: 20,
      right: 40,
      bottom: 80,
      left: 100
  };
  
  var width = svgWidth - margin.left - margin.right;
  var height = svgHeight - margin.top - margin.bottom;
  
  // Create an SVG wrapper, append an SVG group that will hold our chart,
  // and shift the latter by left and top margins.
  var svg = d3
    .select("#scatter")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);
  
  // Append an SVG group
  var chartGroup = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);
  
  // Initial Params
  var chosenXAxis = "poverty";
  var chosenYAxis = "healthcare";
  
  // function used for updating x-scale var upon click on axis label
  // here we are defining the function for xScale but not yet calling it
  // xscale takes in the data AND a specific xaxis of our choosing and creates a scale
  function xScale(usData, chosenXAxis) {
    // create scales
    var xLinearScale = d3.scaleLinear()
      .domain([d3.min(usData, d => d[chosenXAxis]),
        d3.max(usData, d => d[chosenXAxis])
      ])
      .range([0, width]);
  
    return xLinearScale;
  
  }
  
  function yScale(usData, chosenYAxis) {
    // create scales
    var yLinearScale = d3.scaleLinear()
    .domain([d3.min(usData, d => d[chosenYAxis]),
      d3.max(usData, d => d[chosenYAxis])
    ])
    .range([height, 0]);
  
    return yLinearScale;
  
  }
  
  // function used for updating xAxis var upon click on axis label
  function renderXAxes(newXScale, xAxis) {
    var bottomAxis = d3.axisBottom(newXScale);
  
    xAxis.transition()
      .duration(1000)
      .call(bottomAxis)
  
    return xAxis;
  }
  
  // function used for updating xAxis var upon click on axis label
  function renderYAxes(newYScale, yAxis) {
    var leftAxis = d3.axisLeft(newYScale);
  
    yAxis.transition()
      .duration(1000)
      .call(leftAxis);
  
    return yAxis;
  }
  
  // function used for updating circles group with a transition to
  // new circles
  function renderRCircles(circlesGroup, newXScale, chosenXAxis) {
  
    circlesGroup.transition()
      .duration(1000)
      .attr("cx", d => newXScale(d[chosenXAxis]))
  
    return circlesGroup;
  }
  
  // function used for updating circles group with a transition to
  // new circles
  function renderYCircles(circlesGroup, newYScale, chosenYAxis) {
  
    circlesGroup.transition()
      .duration(1000)
      .attr("cy", d => newYScale(d[chosenYAxis]))
  
    return circlesGroup;
  }
  
  
  // function used for updating circles group with new tooltip
  function updateXToolTip(chosenXAxis, circlesGroup) {
  
  
    if (chosenXAxis === "poverty") {
      var labelX = "poverty";
      var labelY = chosenYAxis;
    }
    else if (chosenXAxis === "age") {
      var labelX = "age";
      var labelY = chosenYAxis;
    }
    else {
      var labelX = "income";
      var labelY = chosenYAxis;
    }
  
    var toolTip = d3.tip()
      .attr("class", "d3-tip")
      .offset([80, -60])
      .html(function(d) {
        return (`${d.state}<br>${labelX}${(d[chosenXAxis])}%<br>${labelY}${(d[chosenYAxis])}%`);
      });
  
    circlesGroup.call(toolTip);
  
    circlesGroup.on("mouseover", function(data) {
      toolTip.show(data);
    })
      // onmouseout event
      .on("mouseout", function(data, index) {
        toolTip.hide(data);
      });
  
    return circlesGroup;
  }
  
  // function used for updating circles group with new tooltip
  function updateYToolTip(chosenYAxis, circlesGroup) {
  
    if (chosenYAxis === "healthcare") {
      var labelX = chosenXAxis
      var labelY = "healthcare"
    }
    else if (chosenYAxis === "smokes") {
      var labelX = chosenXAxis
      var labelY = "smokes"
    }
    else {
      var labelX = chosenXAxis
      var labelY = "obesity"
    }
  
    var toolTip = d3.tip()
      .attr("class", "d3-tip")
      .offset([80, -60])
      .html(function(d) {
        return (`${d.state}<br>${labelX}${(d[chosenXAxis])}%<br>${labelY}${(d[chosenYAxis])}%`);
      });
  
    circlesGroup.call(toolTip);
  
    circlesGroup.on("mouseover", function(data) {
      toolTip.show(data);
    })
      // onmouseout event
      .on("mouseout", function(data, index) {
        toolTip.hide(data);
      });
  
    return circlesGroup;
  }
  
  // Retrieve data from the CSV file and execute everything below
  d3.csv("assets/data/data.csv").then(function(usData, err) {
    if (err) throw err;
  
    // parse data
    usData.forEach(function(data) {
      data.poverty = parseFloat(data.poverty);
      data.age = parseFloat(data.age);
      data.income = +data.income;
      data.healthcare = parseFloat(data.healthcare);
      data.obesity = parseFloat(data.obesity);
      data.smokes = parseFloat(data.smokes);
      data.abbr = data.abbr;
    });
  
    // xLinearScale function above csv import
    var xLinearScale = xScale(usData, chosenXAxis);
  
    // yLinearScale function above csv import
    var yLinearScale = yScale(usData, chosenYAxis);
  
    // Create initial axis functions
    var bottomAxis = d3.axisBottom(xLinearScale);
    var leftAxis = d3.axisLeft(yLinearScale);
  
    // append x axis
    var xAxis = chartGroup.append("g")
      // .classed("x-axis", true)
      .attr("transform", `translate(0, ${height})`)
      .call(bottomAxis);
  
    // append y axis
    var yAxis = chartGroup.append("g")
      .call(leftAxis);
  
    // append initial circles
    var circlesGroup = chartGroup.selectAll("circle")
      .data(usData)
      .enter()
      .append("g")
  
    circlesGroup.append("circle")
      .attr("cx", d => xLinearScale(d[chosenXAxis]))
      .attr("cy", d => yLinearScale(d[chosenYAxis]))
      .attr("r", 10)
      .attr('class', "stateCircle")
  
    circlesGroup.append("text")
      .text(d => d.abbr)
      .attr("dx", d => xLinearScale(d[chosenXAxis]))
      .attr("dy", d => yLinearScale(d[chosenYAxis])+3) //to center the text in the circles
  
    // Create group for two x-axis labels
    var labelsXGroup = chartGroup.append("g")
      .attr("transform", `translate(${width / 2}, ${height + 20})`);
  
    var povertyLabel = labelsXGroup.append("text")
      .attr("x", 0)
      .attr("y", 20)
      .attr("value", "poverty") // value to grab for event listener
      .classed("active", true)
      .text("In Poverty (%)");
  
    var ageLabel = labelsXGroup.append("text")
      .attr("x", 0)
      .attr("y", 40)
      .attr("value", "healthcare") // value to grab for event listener
      .classed("inactive", true)
      .text("Age (Median)");
  
    var incomeLabel = labelsXGroup.append("text")
      .attr("x", 0)
      .attr("y", 60)
      .attr("value", "healthcare") // value to grab for event listener
      .classed("inactive", true)
      .text("Household Income (Median)");
  
    // Create group for y-axis labels
    var labelsYGroup = chartGroup.append("g")
    .attr("transform", `translate(${width / 2}, ${height + 20})`);
  
    var obesityLabel = labelsYGroup.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .classed("active", true)
      .text("Obese (%)");
  
    var smokesLabel = labelsYGroup.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 20 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .classed("inactive", true)
      .text("Smokes (%)");
  
    var healthcareLabel = labelsYGroup.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 40 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .classed("inactive", true)
      .text("Lacks Healthcare (%)");
  
  //   // updateToolTip function above csv import
    var circlesGroup = updateXToolTip(chosenXAxis, ChosenYAAcirclesGroup);
    var circlesGroup = updateYToolTip(chosenYAxis, circlesGroup);
  
    // x axis labels event listener
    labelsXGroup.selectAll("text")
      .on("click", function() {
        // get value of selection
        var value = d3.select(this).attr("value");
        if (value !== chosenXAxis) {
  
          // replaces chosenXAxis with value
          chosenXAxis = value;
  
          // console.log(chosenXAxis)
  
          // functions here found above csv import
          // updates x scale for new data
          xLinearScale = xScale(usData, chosenXAxis);
  
          // updates x axis with transition
          xAxis = renderXAxes(xLinearScale, xAxis);
  
          // updates circles with new x values
          circlesGroup = renderXCircles(circlesGroup, xLinearScale, chosenXAxis);
  
          // updates tooltips with new info
          circlesGroup = updateXToolTip(chosenXAxis, circlesGroup);
  
          // changes classes to change bold text
          if (chosenXAxis === "poverty") {
            ageLabel
              .classed("active", false)
              .classed("inactive", true);
            povertyLabel
              .classed("active", true)
              .classed("inactive", false);
            incomeLabel
              .classed("active", false)
              .classed("inactive", true);
          }
          else if (chosenXAxis === "age") {
            ageLabel
              .classed("active", true)
              .classed("inactive", false);
            povertyLabel
              .classed("active", false)
              .classed("inactive", true);
            incomeLabel
              .classed("active", false)
              .classed("inactive", true);
          }
          else {
              ageLabel
                .classed("active", false)
                .classed("inactive", true);
              povertyLabel
                .classed("active", false)
                .classed("inactive", true);
              incomeLabel
                .classed("active", true)
                .classed("inactive", false);
          };
  
    // x axis labels event listener
    labelsYGroup.selectAll("text")
    .on("click", function() {
      // get value of selection
      var value = d3.select(this).attr("value");
      if (value !== chosenYAxis) {
  
        // replaces chosenXAxis with value
        chosenYAxis = value;
  
        // console.log(chosenYAxis)
  
        // functions here found above csv import
        // updates y scale for new data
        yLinearScale = yScale(usData, chosenYAxis);
  
        // updates x axis with transition
        yAxis = renderYAxes(yLinearScale, yAxis);
  
        // updates circles with new x values
        circlesGroup = renderYCircles(circlesGroup, yLinearScale, chosenYAxis);
  
        // updates tooltips with new info
        circlesGroup = updateYToolTip(chosenYAxis, circlesGroup);
  
          if (chosenYAxis === "obesity") {
              smokesLabel
                .classed("active", false)
                .classed("inactive", true);
              healthcareLabel
                .classed("active", false)
                .classed("inactive", true);
              obesityLabel
                .classed("active", true)
                .classed("inactive", false);
          }
          else if (chosenYAxis === "obesity") {
              smokesLabel
                .classed("active", false)
                .classed("inactive", true);
              healthcareLabel
                .classed("active", false)
                .classed("inactive", true);
              obesityLabel
                .classed("active", true)
                .classed("inactive", false);
          }
          else {
              smokesLabel
                .classed("active", false)
                .classed("inactive", true);
              healthcareLabel
                .classed("active", true)
                .classed("inactive", false);
              obesityLabel
                .classed("active", false)
                .classed("inactive", true);
          }
      }
    });
  // }
  }})
  }).catch(function(error) {
    console.log(error);
  });
  
  