Basic D3 Scatterplot

http://alignedleft.com/tutorials/d3/making-a-scatterplot

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

// Simply change the 500 and 900 below
// to draw a bigger or smaller image and
// adjust the number of random points ploted
var size = 150
var number_of_points = 800




//------ Change above then click run -----
var w = size;
var h = size;
var dataset = []
for (i = 0; i < number_of_points; i++) {
    dataset.push([Math.random() * size, Math.random() * size])
}

// Code that generates non-random data
//for (i=0;i<150;i+=15) { 
//    for(j=0;j<150;j+=15) {
//        dataset.push([Math.random()*5 + i,Math.random()*5 + j])
//    }
//}
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[0];
})])
    .range([0, w]);

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[1];
})])
    .range([0, h]);

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function (d) {
    return xScale(d[0]);
})
    .attr("cy", function (d) {
    return yScale(d[1]);
})
    .attr("r", function (d) {
    return 1;
});