Skip to content

Instantly share code, notes, and snippets.

@d3indepth
Last active August 2, 2017 11:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d3indepth/8fe422f6d5f6999c931f942d93035aba to your computer and use it in GitHub Desktop.
Save d3indepth/8fe422f6d5f6999c931f942d93035aba to your computer and use it in GitHub Desktop.
D3 core projections
license: gpl-3.0
height: 660
border: no
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Geo (projection types)</title>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: #333;
width: 900px;
}
canvas {
border: 1px solid #eee;
margin: 5px;
}
.description {
margin: 10px 0;
}
</style>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var geojson = {};
var projections = [
{type: 'AzimuthalEqualArea', scale: 100},
{type: 'AzimuthalEquidistant', scale: 80},
{type: 'Gnomonic', scale: 100},
{type: 'Orthographic', scale: 160},
{type: 'Stereographic', scale: 100},
{type: 'Albers', scale: 120},
{type: 'ConicConformal', scale: 100},
{type: 'ConicEqualArea', scale: 100},
{type: 'ConicEquidistant', scale: 100},
{type: 'Equirectangular', scale: 80},
{type: 'Mercator', scale: 70},
{type: 'TransverseMercator', scale: 70},
];
var circles = [[0, 0], [-90, 0], [-45, 0], [45, 0], [90, 0], [0, -70], [0, -35], [0, 35], [0, 70]];
var geoCircle = d3.geoCircle().radius(10).precision(1);
var geoGraticule = d3.geoGraticule();
var width = 200, height = 200, globalScale = 0.5;
function updateCanvas(d) {
var context = this.getContext('2d');
var projection = d3['geo' + d.type]()
.scale(globalScale * d.scale)
.center([0, 0])
.rotate([0.1, 0, 0])
.translate([0.5 * width, 0.5 * height]);
var geoGenerator = d3.geoPath()
.projection(projection)
.context(context);
context.lineWidth = 0.5;
// Graticule
context.strokeStyle = '#ccc';
context.fillStyle = 'none';
context.setLineDash([1,1]);
context.beginPath();
geoGenerator(geoGraticule());
context.stroke();
// World
context.fillStyle = '#eee';
context.setLineDash([]);
context.beginPath();
geoGenerator({type: 'FeatureCollection', features: geojson.features})
context.fill();
context.stroke();
// Circles
context.strokeStyle = '#888';
context.fillStyle = 'none';
circles.forEach(function(center) {
geoCircle.center(center);
context.beginPath();
geoGenerator(geoCircle());
context.stroke();
});
// Projection label
context.fillStyle = '#333';
context.font = '14px sans-serif';
context.fillText('geo' + d.type, 6, 17);
}
function update() {
var u = d3.select('#content')
.selectAll('canvas')
.data(projections);
u.enter()
.append('canvas')
.attr('width', width + 'px')
.attr('height', height + 'px')
.merge(u)
.each(updateCanvas);
u.exit().remove();
}
// REQUEST DATA
d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
geojson = json;
update();
})
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment