Axis Example (Cartesian coordinate system)

Example of using axis for a Cartesian coordinate system.

<!DOCTYPE html>
<html>

<head>
    
    <meta charset='utf-8'>
    <title>D3.js Axis Example (Cartesian coordinate system)</title>
    <style>
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>

<body>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      var data = [
        [0, 0, 25],
        [0, 0, 50]
      ];

// See https://bl.ocks.org/mbostock/3019563 for margins (or padding)
      var margin = {
        top: 30,
        right: 30,
        bottom: 30,
        left: 30
      };
      width = 500 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

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

// set up the x scale
      var xScale = d3.scale.linear()
        .domain([-50, 50])
        .range([0, width]); // actual length of axis

// set up the y scale
      var yScale = d3.scale.linear()
        .domain([-50, 50])
        .range([height, 0]); // actual length of axis

// set up the r scale for the circles
      // i think both linear and sqrt scales give me 
      // the same results, but with different ranges,
      // not sure which is correct though
      var rScale = d3.scale.linear()
        .domain([0, 100])
        .range([0, height]);

//var rScale = d3.scale.sqrt()
      //.domain([0, 100])
      //.range([0, height/2]);

// append a circle
      svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          return xScale(d[0]);
        })
        .attr("cy", function(d) {
          return yScale(d[1]);
        })
        .attr("r", function(d) {
          return rScale(d[2]);
        })
        .style("stroke", "black")
        .style("stroke-width", 1)
        .style("fill", "none");

// define the x axis
      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom") // location of lables (default is bottom)
        .innerTickSize([6]) // This is not working...
        .outerTickSize([6]); // This is not working...

// define the y axis
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .innerTickSize([6]) // This is not working...
        .outerTickSize([6]); // This is not working...

// call the xAxis function to generate the x axis 
      svg.append("g")
        .attr("class", "axis") // assign an axis class
        .attr("transform", "translate(0, " + (height / 2) + ")")
        .call(xAxis);

// call the yAxis function to generate the x axis 
      svg.append("g")
        .attr("class", "axis") // assign an axis class
        .attr("transform", "translate(" + width / 2 + ", 0)")
        .call(yAxis);
    </script>
  </body>

</html>

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