aubergene/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
  <script src="http://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>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://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>