Skip to content

Instantly share code, notes, and snippets.

@toja

toja/.block

Last active March 5, 2017 07:52
Show Gist options
  • Save toja/2b07c2b0bebd15fe7bb1bebb02daff90 to your computer and use it in GitHub Desktop.
Save toja/2b07c2b0bebd15fe7bb1bebb02daff90 to your computer and use it in GitHub Desktop.
Download ZIP
ColorMap - Projections
Raw
.block
license: gpl-3.0
height: 540
border: no
Raw
README.md

Serveral map projections used with colors

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-geo-projection.v1.min.js"></script>
<body>
<div id="map"></div>
<select name="proj" autocomplete="off" onchange="update(this.value);">
<option value="0">Natural Earth</option>
<option value="1">Robinson</option>
<option value="2">Kavraisky VII</option>
<option value="3">Winkel Tripel</option>
<option value="4">Times</option>
<option value="5">Patterson</option>
<option value="6">Braun</option>
<option value="7">Miller</option>
</select>
<script>
var width = 960,
height = 500,
grid = 10,
space = 0.4,
saturation = 1.0;
var dx = grid/2 - space,
dy = grid/2 - space;
var rect = function (x, y) {
var x0 = x - dx, y0 = y - dy,
x1 = x + dx, y1 = y + dy;
return {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[ [x0, y0], [x0, y1], [x1, y1], [x1, y0], [x0, y0] ]
]
},
properties: { x: x, y: y }
};
}
var xz = d3.range(-180, 180, grid).map(function(deg) { return deg + grid/2 }),
yz = d3.range(-90, 90, grid).map(function(deg) { return deg + grid/2 });
var data = d3.merge(xz.map(function(x) { return yz.map(function(y) { return rect(x, y); }); }));
var scaleHue = d3.scaleLinear()
.domain([-180, 180])
.range([0, 360]);
var scaleLum = d3.scaleLinear()
.domain([-90, 90])
.range([0, 1]);
var projections = [
d3.geoNaturalEarth,
d3.geoRobinson,
d3.geoKavrayskiy7,
d3.geoWinkel3,
d3.geoTimes,
d3.geoPatterson,
d3.geoCylindricalStereographic,
d3.geoMiller
];
var proj = projections[0]();
var path = d3.geoPath()
.projection(proj);
var svg = d3.select("#map").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "features")
.selectAll(".feature")
.data(data)
.enter().append("path")
.attr("d", path)
.style("fill", function (d) {
return d3.hsl(
scaleHue(d.properties.x),
saturation,
scaleLum(d.properties.y)
)
.toString();
});
var paths = svg.selectAll("path");
var update = function(i) {
proj = projections[i]();
path.projection(proj);
paths.attr("d", path);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment