Circular key (similar to axis) v1

<!DOCTYPE html>
<html>
  <head>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
    body {
      font: 10px sans-serif;
      margin: 0;
    }

path.line {
      fill: none;
      stroke: #666;
      stroke-width: 1.5px;
    }

path.area {
      fill: #e7e7e7;
    }

.axis {
      shape-rendering: crispEdges;
    }

.x.axis line {
      stroke: #000;
    }

.x.axis .minor {
      stroke-opacity: .5;
    }

.x.axis path {
      stroke: #000;
    	fill: none;
    }

.y.axis line, .y.axis path {
      fill: none;
      stroke: #000;
    }

.c.axis circle, .c.axis line, .c.axis path {
      stroke: #000;
      fill: none;
    }

.c.axis circle {
      stroke: #ccc;
      stroke-width: 1px;
      stroke-dasharray: 5 2;
    }

.c.axis text {
      stroke: none;
      fill: #000;
    }

</style>
  </head>
  <body>
    <script type="text/javascript">

var m = [100, 100, 100, 100],
      w = 640 - m[1] - m[3],
      h = 480 - m[0] - m[2]

// Add an SVG element with the desired dimensions and margin.
  var svg = d3.select("body").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
    .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var axisCircles = function(axis, g) {
    // console.log(axis.tickValues())
    axis.tickValues().forEach(function(tick) {
      console.log(tick)
      var scale = axis.scale();
      g.append("svg:circle")
          .attr("cx", 0)
          .attr("cy", 0)
          .attr("r", scale(tick))
    })
  }

var c = d3.scale.sqrt().domain([0, 1000]).range([0, 100])
  var cAxis = d3.svg.axis().scale(c)
  cAxis.tickValues([0, 100, 500, 1000])

var c2 = d3.scale.sqrt().domain([0, 1000000]).range([0, 100])
  var c2Axis = d3.svg.axis().scale(c2)
        // .ticks(5)
        .tickValues([0, 10000, 100000, 500000, 1000000])

var cg = svg.append("svg:g")
      .attr("class", "c axis")
      .attr("transform", "translate(10,10)")
      .call(cAxis.orient("top"));

var cg2 = svg.append("svg:g")
      .attr("class", "c axis")
      .attr("transform", "translate(250,10)")

axisCircles(c2Axis, cg2)

cg2
      .call(c2Axis.orient("right"));

var cg3 = svg.append("svg:g")
      .attr("class", "c axis")
      .attr("transform", "translate(10,250)")
      .call(cAxis.orient("top"));

axisCircles(cAxis, cg)
  axisCircles(cAxis, cg3)

</script>
  </body>
</html>

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

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