Scaling

http://stackoverflow.com/questions/15141232/how-do-i-adjust-zoom-size-for-a-point-in-d3

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<html>
  <body>
    <svg/>
  </body>
</html>

JavaScript

var data = [{x: 10, y:10}, {x:15, y:15}],
    width = 400,
    height = 400,

    scale = 10

var svg = d3.select('svg').attr({width: width, height:height});

var top = svg.append('g');
top.append('rect').attr({x:0, y:0, width: 40 * scale, height:20 * scale, stroke: 'black', fill: 'none'});

top.selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr({stroke:"black", fill:"blue", r:scale})
    .attr('cx', function(d) { return d.x * scale; })
    .attr('cy', function(d) { return d.y * scale; });


var bottom = svg.append('g').attr('transform', 'translate(0,200) scale('+scale+','+scale+')');
bottom.append('rect').attr({x:0, y:0, width: 40, height:20, stroke: 'black', fill: 'none'});

bottom.selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr({stroke:"black", fill:"blue", r:1})
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; });