D3.js Basic json Graph

Basic example of graphing using D3.js
Useful links used for this post:
http://alignedleft.com/tutorials/d3/axes
https://square.github.io/intro-to-d3/

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/tempGraph.css">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" rel="stylesheet" type="text/css">
    <script src="https://d3js.org/d3-array.v1.min.js"></script>
    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js"></script>
    <script src="https://d3js.org/d3-format.v1.min.js"></script>
    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
    <script src="https://d3js.org/d3-time.v1.min.js"></script>
    <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
    
  </head>
  
  <body>
    <div class='container' id='main-container'>
      <div class='content'>
	<div class='container' style='font: 10px sans-serif;'>
	  <h3></h3>
	  <div class='row-fluid'>
	    <div class='remaining-graphs span8'>
	      <div class='row-fluid'>
                <div class='pie-graph span8' id='dc-line-chart'>
 
		</div>
	      </div>
	    </div>
	  </div>
	</div>
      </div>
    </div>
    <script>
      var data = [
          {xVal : 1, yVal : 1},
          {xVal : 2, yVal : 4},
          {xVal : 3, yVal : 2},
          {xVal : 4, yVal : 3}
      ];
      var padding = 25;
      var w = 500;
      var h = 150;
      
      var xScale = d3.scaleLinear()
          .domain([0,d3.max(data, function(d) {return d.xVal})])
          .range([0, 200]);

      var yScale = d3.scaleLinear()
          .domain([0,d3.max(data, function(d) {return d.yVal})])
          .range([100, 0]);

      //var xAxis = d3.axisBottom(x) // d3 v.3 only
      var xAxis =  d3.svg.axis(xScale) // d3 v.4
          .ticks(4) // specify the number of ticks
          .scale(xScale)
          .orient("bottom");

      var yAxis = d3.svg.axis(yScale)
          .scale(yScale)
          .orient("left")
          .ticks(7);
      
      var svg = d3.select('#dc-line-chart')
          .append('svg')        // create an <svg> element
          .attr('width', w) // set its dimensions
          .attr('height', h);

        svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + (padding) + "," + padding + ")")
        .call(yAxis);
	
	svg.append('g')            // create a <g> element
          .attr('class', 'axis')   // specify classes
	  .attr("transform", "translate(" + padding + "," + (h - padding) + ")")
          .call(xAxis);            // let the axis do its thing
	  
      var svg = d3.select('svg');
      svg.size();

      var rects = svg.selectAll('rect')
          .data(data);
          rects.size();
	
      var newRects = rects.enter();
      
      newRects.append('rect')
          .attr('x', function(d, i) {
              return xScale(d.xVal);
          })
          .attr('y', function(d, i) {
              return yScale(d.yVal);
	  })
	  .attr("transform","translate(" + (padding -5) + "," + (padding - 5) + ")")
          .attr('height', 10)
          .attr('width', 10);
      
    </script>
  </body>
</html>

tempGraph.css

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

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}