MyExmple.md

var dataset = [];
for(var i = 0; i < 25; i++) {
    var p = [Math.floor(Math.random() * w), Math.floor(Math.random() * h) ];
    dataset.push(p);
}

var getX = function(d) { return d[0]; };
var getY = function(d) { return d[1]; }; 

var h = 400, w = 1000, padding = 20;
var xScale = d3.scale.linear()
                     .domain([d3.min(dataset, getX), d3.max(dataset, getX)])
                     .range([padding, w - 4 * padding]);

var yScale = d3.scale.linear()
                     .domain([d3.min(dataset, getY), d3.max(dataset, getY)])
                     .range([h - padding, padding]);

var svg = d3.select("div#scale-ex1").append("svg")
                                    .attr("width", w)
                                    .attr("height", h);

var getScaledValue = function(extracter, scale) {

    return function(d) { return scale(extracter(d)) };
};

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", getScaledValue(getX, xScale))
    .attr("cy", getScaledValue(getY, yScale))
    .attr("r", 20);
    
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .attr("x", getScaledValue(getX, xScale))
    .attr("y", getScaledValue(getY, yScale))
    .text(function(d, i) { return "(" + d[0] + ", "+ d[1] + ")"; })
    .attr("fill", "red");