Scatterplot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
        <title>Module 5</title>

h1 {
        font-size: 24px;
        margin: 0

}
       h2 {
        font-size: 12px;
        margin: 0

}

p {
        font-size: 24px;
        margin: 10px 0 0 0;
      }

svg{background-color: #687372;}

circle {
        fill: #9DFEFF;
        opacity: 0.55;
      }
      
      circle:hover {
        fill: #2BCC14;
        opacity: 0.75;
      }

.axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering; crispEdges;
        stroke: #DCDCDC ;
      }

.axis text {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 15px;
        fill: #DCDCDC;
      }

</style>
  </head>
<body>

<p>Average annual income and average monthly shelter cost by Regional District in British Columbia, 2011</p>
 
 <h2>Source: <a href="https://www.beyond2020.com/">Stats Canada - via Beyond 2020 Browser</a></h2>

var w = 750;
  var h = 600;
  var padding = [20, 10, 50, 50]; //top, right, bottom, left
  
 var xScale = d3.scale.linear()
                .range([ padding[3], w - padding[1] - padding[3] ]);
      
      var yScale = d3.scale.linear()
                .range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(11)
              .tickFormat(function(d){
                return "$" + d;
              });

var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .ticks(11)
              .tickFormat(function(d){
                return "$" + d;
              });

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

d3.csv("C_H_N_data.csv", function(data) {

xScale.domain([35000, d3.max(data, function(d) {
          return +d.Total_all_Average_Household_Income;
        }) ]);

yScale.domain([        
          d3.max(data, function(d) {
          return +d.Total_Average_Shelter_Cost;
        }),
        500 
      ]);

var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")

// d.Total_Average_Shelter_Cost
              // d.Total_all_Average_Household_Income
        circles.attr("cx", function(d){
          return xScale(d.Total_all_Average_Household_Income);
        })
          .attr("cy", function(d, i) {
            return yScale(d.Total_Average_Shelter_Cost);
          })
          .attr("r", 0.5)

// .attr("fill", "#9DFEFF")
          .append("title")
          .text(function(d) {
            return d.Geography + "'s average household income in " + d.Year + " was $" + d.Total_all_Average_Household_Income + ". Average shelter cost in the region was $" + d.Total_Average_Shelter_Cost;
          });

circles.sort(function(a, b) {
            return d3.ascending(+a.Total_all_Average_Household_Income, +b.Total_all_Average_Household_Income);
          })
          .transition()
          .delay(function(d, i) {
            return i * 90;
          })
          .duration(2000)
          .attr("r", 9 )
          .attr("fill", "#9DFEFF");

svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - padding[2] +10 ) + ")")
          .call(xAxis);

svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + padding[3] + ",0)")
          .call(yAxis);

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js