text: // Set up the width, height and margins of the graph.
  let svgWidth = 660;
  let svgHeight = 460;
  
  // Define margins
  let margin = {
      top: 20,
      right: 40,
      bottom: 80,
      left: 100
  };
  
  // Calculate dimensions of chart area
  let width = svgWidth - margin.left - margin.right;
  let height = svgHeight - margin.top - margin.bottom;
  
  // Create an SVG wrapper & append SVG group to scatter div
  let svg = d3.select("#scatter")
              .append("svg")
              .attr("width", svgWidth)
              .attr("height", svgHeight);
  
  // Append SVG group and respective margins
  let chartGroup = svg.append("g")
                      .attr("transform", `translate(${margin.left}, ${margin.top})`)
  
  // Initial params
  var chosenXaxis = "poverty";
  var chosenYaxis = "healthcare";
  
  // ----------------------------//
  // -- Chart Update Features -- //
  // ----------------------------//
  
  // Update x - axis upon click on axis label
  function renderXAxes(newXScale, xAxis) {
    let bottomAxis = d3.axisBottom(newXScale);
  
    xAxis.transition()
      .duration(1000)
      .call(bottomAxis);
  
    return xAxis;
  }
  // update y - axis upon click on axis label
  function renderYAxes(newYScale, yAxis) {
    let leftAxis = d3.axisLeft(newYScale);
  
    yAxis.transition()
      .duration(1000)
      .call(leftAxis);
  
    return yAxis;
  }
  
  // update circles group during data transition
  function renderCircles(circlesGroup, newXScale, newYScale, chosenXAxis, chosenYAxis) {
  
    circlesGroup.transition()
      .duration(1000)
      .attr("cx", d => newXScale(d[chosenXAxis])-1)
      .attr("cy", d=>newYScale(d[chosenYAxis])+2);
    return circlesGroup;
  }
  // update text in bubbles in transitions, allign text with data points for smooth & clear transition
  function renderTexts(txtGroup, newXScale, newYScale, chosenXAxis, chosenYAxis) {
  
    txtGroup.transition()
      .duration(1000)
      .attr("x", d=>newXScale(d[chosenXAxis])-1)
      .attr("y", d=>newYScale(d[chosenYAxis])+3)
    return txtGroup;
  }
  
  // function used for updating x - scale in transition
  function xScale(healthData, chosenXaxis) {
      // create scales
      let xLinearScale = d3.scaleLinear()
      // define range of our data scale
        .domain([d3.min(healthData, d => d[chosenXaxis])*0.8, d3.max(healthData, d => d[chosenXaxis])*1])
        .range([0, width]);
      return xLinearScale;
  }
  // function used for updating y - scale in transition
  function yScale(healthData, chosenYaxis) {
      // create scales
      let yLinearScale = d3.scaleLinear()
      // define range of our data scale
        .domain([d3.min(healthData, d=>d[chosenYaxis])*0.8, d3.max(healthData, d=>d[chosenYaxis])*1])
        .range([height, 0]);
      return yLinearScale;
  }
  
  // Create a conditional function thatupdates the circles group according to the data on each axis
  function updateToolTip(chosenXaxis, chosenYaxis, circlesGroup){
    let xLabel = ""
    let yLabel = ""
    // Define each label update
    if (chosenXaxis === "poverty"){
      xLabel = "Poverty (%): ";
    }
    else if (chosenXaxis === "age"){
      xLabel = "Age (median): ";
    }
    else{
      xLabel = "Income (median): $";
    }
    if (chosenYaxis === "healthcare"){
      yLabel = "Lack of Healthcare (%): "
    }
    else if (chosenYaxis === "smokes"){
      yLabel = "Smokes (%): "
    }
    else{
      yLabel = "Obesity (%): "
    }
  
    // Create tool tip function
  var toolTip = d3.tip()
      .attr("class", "tooltip")
      .offset([100, -80])
      .style("background-color", "lightgrey")
      .style("border-radius", "5px")
      .style("padding", "10px")
      // Defined information diplayed with mouse over data point
      .html(function(d) {
          return (`State: ${d.state}<br>${xLabel} ${d[chosenXaxis]}<br>${yLabel} ${d[chosenYaxis]}`);
      });
  
  
  
    circlesGroup.call(toolTip);
   // Define on mouseover and on mouse events
    circlesGroup.on("mouseover", function(data){
      toolTip.show(data, this);
      d3.select(this).style("stroke", "black");
    })  
      circlesGroup.on("mouseout", function(data, index){
      toolTip.hide(data, this)
      d3.select(this).style("stroke", "white");
    });
    return circlesGroup;
  }
  
  // Load CSV Data
  
  d3.csv("assets/data/data.csv").then(function(healthData, err) {
      if (err) throw err;
      // parse data to strings
      healthData.forEach(function(data){
          data.poverty = +data.poverty;
          data.healthcare = +data.healthcare;
          data.age = +data.age;
          data.income = +data.income;
          data.smokes = +data.smokes;
          data.obesity = +data.obesity;
      });
  
      // Verify data loaded
      console.log(healthData)
  
      // xLinearScale function after csv import
      let xLinearScale = xScale(healthData, chosenXaxis);
  
      // yLinearScale function after csv import
      let yLinearScale = yScale(healthData, chosenYaxis)
  
      // Create initial axis functions
      let bottomAxis = d3.axisBottom(xLinearScale);
      let leftAxis = d3.axisLeft(yLinearScale);
  
      //     ---- Axis and Chart Update ----
  
      // append x - axis
      let xAxis = chartGroup.append("g")
                          .classed("x-axis", true)
                          .attr("transform", `translate(0, ${height})`)
                          .call(bottomAxis)
      
      // append y - axis
      let yAxis = chartGroup.append("g")
                          .classed("y-axis", true)
                          .call(leftAxis)
  
      // append info inside the bubbles
      let crlTxtGroup = chartGroup.selectAll("mycircles")
                        .data(healthData)
                        .enter()
                        .append("g")
  
  
      // Add bubbles to the scatterplot
      let circlesGroup = crlTxtGroup.append("circle")
                              .attr("cx", d=>xLinearScale(d[chosenXaxis]))
                              .attr("cy", d=>yLinearScale(d[chosenYaxis]))
                              .classed("stateCircle", true)
                              .attr("r", 8)
                              .attr("opacity", "2");
  
      // Create State abreviations in each bubble
      let txtGroup = crlTxtGroup.append("text")
                                .text(d=>d.abbr)
                                .attr("x", d=>xLinearScale(d[chosenXaxis]))
                                .attr("y", d=>yLinearScale(d[chosenYaxis])+3)
                                .classed("stateText", true)
                                .style("font-size", "7px")
                                .style("font-weight", "800")
  
      //    ---   Create multi-label space   ----
  
       // Create group for  3 x - axis labels
       let xlabelsGroup = chartGroup.append("g")
                                  .attr("transform", `translate(${width / 2}, ${height + 20 + margin.top})`);
      
      // Create group for  3 y - axis labels
      let ylabelsGroup = chartGroup.append("g")
                                  .attr("transform", `translate(${0-margin.left/4}, ${height/2})`);
  
      // define a label per variable in analysis
      var povertyLabel = xlabelsGroup.append("text")
                                  .attr("x", 0)
                                  .attr("y", 0)
                                  .attr("value", "poverty") // value to grab for event listener
                                  .classed("active", true)
                                  .classed("aText", true)
                                  .text("In Poverty (%)");
  
      var ageLabel = xlabelsGroup.append("text")
                                  .attr("x", 0)
                                  .attr("y", 20)
                                  .attr("value", "age") // value to grab for event listener
                                  .classed("inactive", true)
                                  .classed("aText", true)
                                  .text("Age (Median)");
  
      var incomeLabel = xlabelsGroup.append("text")
                                  .attr("x", 0)
                                  .attr("y", 40)
                                  .attr("value", "income") // value to grab for event listener
                                  .classed("inactive", true)
                                  .classed("aText", true)
                                  .text("Household Income (Median)");
      
      var healthCareLabel = ylabelsGroup.append("text")
                                  .attr("y", 0 - 20)
                                  .attr("x", 0)
                                  .attr("transform", "rotate(-90)")
                                  .attr("dy", "1em")
                                  .attr("value", "healthcare")
                                  .classed("active", true)
                                  .classed("aText", true)
                                  .text("Lacks Healthcare (%)");
      
      var smokeLabel = ylabelsGroup.append("text")
                                  .attr("y", 0 - 40)
                                  .attr("x", 0)
                                  .attr("transform", "rotate(-90)")
                                  .attr("dy", "1em")
                                  .attr("value", "smokes")
                                  .classed("inactive", true)
                                  .classed("aText", true)
                                  .text("Smokes (%)");
                                  
      var obesityLabel = ylabelsGroup.append("text")
                                  .attr("y", 0 - 60)
                                  .attr("x", 0)
                                  .attr("transform", "rotate(-90)")
                                  .attr("dy", "1em")
                                  .attr("value", "obesity")
                                  .classed("inactive", true)
                                  .classed("aText", true)
                                  .text("Obese (%)");
  
       // updateToolTip function after csv import
      circlesGroup = updateToolTip(chosenXaxis, chosenYaxis, circlesGroup);
  
  
      // ---------------------------------------
      //   ---  x - axis event and update   ----
      // ---------------------------------------
  
      // x - axis labels event listener
      xlabelsGroup.selectAll("text")
          .on("click", function() {
          // get value of selection
          var value = d3.select(this).attr("value");
          // Relate axis choice with respective data values
          if (value !== chosenXaxis) {
              // replaces chosenXAxis with value
              chosenXaxis = value;
              
              // functions here found above csv import
              // updates x scale for new data
              xLinearScale = xScale(healthData, chosenXaxis);
  
              // updates x axis with transition
              xAxis = renderXAxes(xLinearScale, xAxis);
  
              // updates circles with new x values
              circlesGroup = renderCircles(circlesGroup, xLinearScale, yLinearScale, chosenXaxis, chosenYaxis);
  
               // updates texts with new x values
              txtGroup = renderTexts(txtGroup, xLinearScale, yLinearScale, chosenXaxis, chosenYaxis);
  
              // define changes in text to bold for the variable in analysis
              if (chosenXaxis === "poverty") {
                  povertyLabel
                      .classed("active", true)
                      .classed("inactive", false);
                  ageLabel
                      .classed("active", false)
                      .classed("inactive", true);
                  incomeLabel
                      .classed("active", false)
                      .classed("inactive", true);
              }
              else if (chosenXaxis === "age"){
                povertyLabel
                    .classed("active", false)
                    .classed("inactive", true);
                ageLabel
                    .classed("active", true)
                    .classed("inactive", false);
                incomeLabel
                    .classed("active", false)
                    .classed("inactive", true);
              }
              else{
                povertyLabel
                      .classed("active", false)
                      .classed("inactive", true);
                  ageLabel
                      .classed("active", false)
                      .classed("inactive", true);
                  incomeLabel
                      .classed("active", true)
                      .classed("inactive", false);  
              }
            // update tooltip with new info after changing x-axis 
            circlesGroup = updateToolTip(chosenXaxis, chosenYaxis, circlesGroup); 
        }})
  
  
      // ---------------------------------------
      //   ---  y - axis event and update   ----
      // ---------------------------------------
  
  
      // y axis labels event listener
      ylabelsGroup.selectAll("text")
          .on("click", function() {
          // get value of selection
          var value = d3.select(this).attr("value");
          // Relate axis choice with respective data values
          if (value !== chosenYaxis) {
              // replaces chosenXAxis with value
              chosenYaxis = value;
  
              // functions here found above csv import
              // updates x scale for new data
              yLinearScale = yScale(healthData, chosenYaxis);
  
              // updates x axis with transition
              yAxis = renderYAxes(yLinearScale, yAxis);
  
              // updates circles with new x values
              circlesGroup = renderCircles(circlesGroup, xLinearScale, yLinearScale, chosenXaxis, chosenYaxis);
  
              // updates texts with new x values
              txtGroup = renderTexts(txtGroup, xLinearScale, yLinearScale, chosenXaxis, chosenYaxis);
  
              // define changes in text to bold for the variable in analysis
              if (chosenYaxis === "healthcare") {
                  healthCareLabel
                      .classed("active", true)
                      .classed("inactive", false);
                  smokeLabel
                      .classed("active", false)
                      .classed("inactive", true);
                  obesityLabel
                      .classed("active", false)
                      .classed("inactive", true);
              }
              else if (chosenYaxis === "smokes"){
                  healthCareLabel
                      .classed("active", false)
                      .classed("inactive", true);
                  smokeLabel
                      .classed("active", true)
                      .classed("inactive", false);
                  obesityLabel
                      .classed("active", false)
                      .classed("inactive", true);
              }
              else{
                  healthCareLabel
                  .classed("active", false)
                  .classed("inactive", true);
                  smokeLabel
                  .classed("active", false)
                  .classed("inactive", true);
                  obesityLabel
                  .classed("active", true)
                  .classed("inactive", false);  
          }
       // update tooltip with new info after changing y-axis 
       circlesGroup = updateToolTip(chosenXaxis, chosenYaxis, circlesGroup); 
    }})
  })