scatter.js

function checkPalindrome(str) {
    return str == str.split('').reverse().join('');
}

function gen_key(a, b) {
    if (a <= b) {
        return a + '*' + b;
    }
    return b + '*' + a;
}
data = [];
FOUND = {}
for (var i=0; i<10000; i++) {
    for (var j=0; j<10000; j++) {
	k = gen_key(i, j);
	if (FOUND.hasOwnProperty(k)) {
	    continue
	}
	FOUND[k] = true
        prod = i*j;
        if (checkPalindrome(String(prod))) {
            data.push([i, j])
        }
    }
}
   
var margin = {top: 20, right: 15, bottom: 60, left: 60}
    , width = 1000
    , height = 1000;

var x = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d[0]; })])
            .range([ 0, width ]);

var y = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d[1]; })])
            .range([ height, 0 ]);

var chart = d3.select('body')
    .append('svg:svg')
    .attr('width', width + margin.right + margin.left)
    .attr('height', height + margin.top + margin.bottom)
    .attr('class', 'chart')

var main = chart.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'main')   
    
// draw the x axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');

main.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .attr('class', 'main axis date')
    .call(xAxis);

// draw the y axis
var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

main.append('g')
    .attr('transform', 'translate(0,0)')
    .attr('class', 'main axis date')
    .call(yAxis);

var g = main.append("svg:g"); 

g.selectAll("scatter-dots")
    .data(data)
    .enter().append("svg:circle")
        .attr("cx", function (d,i) { return x(d[0]); } )
        .attr("cy", function (d) { return y(d[1]); } )
        .attr("r", 1)
        .append("svg:title").text(function(d) { return d[0]+', '+d[1]+": "+d[0]*d[1]; });