04-axes/index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="/d3.v4.min.js"></script>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <script>
      // the d3 chart convention
      var margin = {'top': 20, 'right': 40, 'bottom': 50, 'left': 50};
      var width = 640 - margin.right - margin.left;
      var height = 420 - margin.top - margin.bottom;
      var circles;

      // convenience function to make our transforms easier!
      function translate(x, y) {
        return 'translate(' + x + ',' + y + ')';
      }

      var svg = d3.select('body').append('svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', translate(margin.left, margin.top));

      // load the data
      d3.csv('/data/oecd.csv', function(oecd) {
        oecd = oecd.filter(function(d) {
          return d.HEALTHEXP_USD_CAP !== "NA" && d.LIFEEXP !== "NA";
        });

        var dataByYear = d3.nest()
          .key(function(d) { return d.TIME; }).sortKeys(d3.ascending)
          .entries(oecd);

        var dataByCountry = d3.nest()
          .key(function(d) { return d.LOCATION; })
          .entries(oecd);

        var healthExpenditures = oecd.map(function(d) { return +d.HEALTHEXP_USD_CAP; });

        var lifeExpectancies = oecd.map(function(d) { return +d.LIFEEXP; });

        var xScale = d3.scaleLinear()
          .domain([0, d3.max(healthExpenditures)])
          .range([0, width]);

        var yScale = d3.scaleLinear()
          .domain(d3.extent(lifeExpectancies))
          .range([height, 0]);

        // TODO set up xAxis and play with the number of ticks
        //var xAxis = on your own!

        // TODO set up yAxis
        // EXTRA CREDIT: extend the ticks across the entire chart
        //var yAxis = on your own!

        // TODO uncomment.
        // This g element isn't technically necessary, but it keeps our SVG organized
        //var axisG = svg.append('g')
        //  .attr('id', 'axis');

        // TODO uncomment
        /*axisG.append('g')
          .attr('class', 'axis x')
          .attr('transform', translate(0, height))
          .call(xAxis);*/

        // TODO create y axis

        var chartG = svg.append('g')
          .attr('id', 'chart');

        // data for 2014
        var yearData = dataByYear[dataByYear.length - 1].values;

        circles = chartG.selectAll('circle')
          .data(yearData);

        circles.enter().append('circle')
          .attr('r', 0)
          .attr('fill', 'black')
          .attr('r', 3)
          .attr('cx', function(d) { return xScale(+d.HEALTHEXP_USD_CAP); })
          .attr('cy', function(d) { return yScale(+d.LIFEEXP); });
      });
  </script>
</body>