This is a simple example of defining a (not particularly useful) projection based on d3.geo.sinusoidal.
Every projection should also include an invert function.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.background { | |
fill: #a4bac7; | |
} | |
.foreground { | |
fill: none; | |
stroke: #333; | |
stroke-width: 1.5px; | |
} | |
.graticule { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
.graticule:nth-child(2n) { | |
stroke-dasharray: 2,2; | |
} | |
</style> | |
<body> | |
<script src="https://raw.github.com/mbostock/d3/projection/d3.v2.min.js"></script> | |
<script src="https://raw.github.com/d3/d3-plugins/projection/geo/projection/projection.js"></script> | |
<script> | |
/* Define a new projection */ | |
function cosinusoidal(λ, φ) { | |
return [ | |
λ * Math.sin(φ), | |
φ | |
]; | |
} | |
cosinusoidal.invert = function(x, y) { | |
return [ | |
x / Math.sin(y), | |
y | |
]; | |
}; | |
d3.geo.cosinusoidal = function() { return d3.geo.projection(cosinusoidal) }; | |
/* Use the new projection */ | |
var width = 960, | |
height = 500; | |
var projection = d3.geo.cosinusoidal() | |
.translate([width / 2 - .5, height / 2 - .5]); | |
var path = d3.geo.path() | |
.projection(projection); | |
var graticule = d3.geo.graticule(); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("path") | |
.datum(graticule.outline) | |
.attr("class", "background") | |
.attr("d", path); | |
svg.selectAll(".graticule") | |
.data(graticule.lines) | |
.enter().append("path") | |
.attr("class", "graticule") | |
.attr("d", path); | |
svg.append("path") | |
.datum(graticule.outline) | |
.attr("class", "foreground") | |
.attr("d", path); | |
</script> |