Old school D3 from simpler times

All examples By author By category About

jasondavies

Full window Github gist

Guyou Projection

The Guyou projection is available as d3.geo.guyou in the geo.projection D3 plugin.

<!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;
}

.land {
  fill: #d7c7ad;
  stroke: #766951;
}

.boundary {
  fill: none;
  stroke: #a5967e;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/d3/d3-plugins/geo/projection/projection.js"></script>
<script>

var width = 960,
    height = 500,
    ε = 1e-4;

var path = d3.geo.path()
    .projection(d3.geo.guyou()
      .scale(120)
      .translate([width / 2 - .5, height / 2 - .5])
      .clipAngle(90 + ε));

var graticule = d3.geo.graticule()
    .extent([[-90 + ε, -90 + ε], [90 - ε, 90 - ε]]);

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);

d3.json("/mbostock/3682676/example/readme-boundaries.json", function(err, collection) {
  svg.insert("g", ".graticule")
      .attr("class", "boundary")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
});

d3.json("/mbostock/3682676/example/readme-land.json", function(err, collection) {
  svg.insert("g", ".graticule,.boundary")
      .attr("class", "land")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
});

</script>

xxxxxxxxxx
 
<!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;
}
​
.land {
  fill: #d7c7ad;
  stroke: #766951;
}
​
.boundary {
  fill: none;
  stroke: #a5967e;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/d3/d3-plugins/geo/projection/projection.js"></script>
<script>
​
var width = 960,
    height = 500,
    ε = 1e-4;
​
var path = d3.geo.path()
    .projection(d3.geo.guyou()
      .scale(120)
      .translate([width / 2 - .5, height / 2 - .5])
      .clipAngle(90 + ε));
​
var graticule = d3.geo.graticule()
    .extent([[-90 + ε, -90 + ε], [90 - ε, 90 - ε]]);
​
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);
​
d3.json("/mbostock/3682676/example/readme-boundaries.json", function(err, collection) {
  svg.insert("g", ".graticule")
      .attr("class", "boundary")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
});
​
d3.json("/mbostock/3682676/example/readme-land.json", function(err, collection) {
  svg.insert("g", ".graticule,.boundary")
      .attr("class", "land")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
});
​
</script>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js to https://cdn.jsdelivr.net/gh/d3/d3-plugins/geo/projection/projection.js

Changed ajax call from /d/3682676/readme-boundaries.json to /mbostock/3682676/example/readme-boundaries.json.

Changed ajax call from /d/3682676/readme-land.json to /mbostock/3682676/example/readme-land.json.

https://d3js.org/d3.v3.min.js

https://raw.github.com/d3/d3-plugins/master/geo/projection/projection.js