Create a curved grid

D3 Curved Grid.js

var ds = [];
for (var i = 0; i < 40; i++) {
    ds.push(i);
}



var w = 800;
var h = 800;
var p = 1;

var hScale = d3.scale.linear()
    .domain([ds[0], ds[ds.length - 1]])
    .range([0, w])
;

var vScale = d3.scale.linear()
    .domain([ds[0], ds[ds.length - 1]])
    .range([0, h])
;



var svg = d3.select("body")
            .append("svg")
            .attr("width", w + 2 * p)
            .attr("height", h + 2 * p)
;

svg.selectAll("line")
    .data(ds)
    .enter()
.append("line")
.attr("x1", function(d) { return hScale(d) + p; })
.attr("y1", p)
.attr("x2", p)
.attr("y2", function(d, i) { return vScale(ds[ds.length - i - 1]) + p; })
.attr("stroke", "blue")
;

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
;

svg.selectAll("line")
    .data(ds)
    .enter()
.append("line")
.attr("x1", function(d) { return d * 10 + p; })
.attr("y1", h - p)
.attr("x2", p)
.attr("y2", function(d, i) { return h - (ds[ds.length - i - 1] * 10 + p); })
.attr("stroke", "black")
;