D3 Examples - shaded relief with custom projection

xxxxxxxxxx
 
<html>
<head>
<style>
body {
  font-size: 62.5%;
}
.municipios {
  fill: rgb(252,247,243);
  opacity: 0.8;
  stroke: rgba(180,180,180,0.6);
  stroke-width: 1;
}
.cabo-de-gata {
  fill: rgb(202, 223, 170);
  stroke: rgb(152, 175, 117);
  opacity: 0.7;
}
​
.provincia-border {
  fill: none;
  stroke: rgb(90,90,90)
}
.raster {
  pointer-events: none;
  fill: none;
}
.c-almería, .c-níjar,.c-carboneras {
  fill: rgba(202, 223, 170,0.6);
  opacity: 0.9;
}
.province-name {
  fill: rgb(80, 80, 80);
  font-family: helvetica, arial, sans-serif;
  font-weight: 500;
  opacity: 0.8;
  text-transform: uppercase;
  text-anchor: middle;
  font-size: 1.7rem;
  letter-spacing: 1rem;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.8), 1px -1px 0 rgba(255,255,255,0.8), -1px 1px 0 rgba(255,255,255,0.8), -1px -1px 0 rgba(255,255,255,0.8);
}
.cabo-de-gata-title {
  fill: rgb(68, 93, 30);
  font-weight: 500;
  font-style: italic;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  opacity: 0.8;
  text-transform: capitalize;
  text-anchor: middle;
  font-size: 1.3rem;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.7), 1px -1px 0 rgba(255,255,255,0.7), -1px 1px 0 rgba(255,255,255,0.7), -1px -1px 0 rgba(255,255,255,0.7);
}
.circle-city {
  fill: none;
  opacity: 1;
  stroke-width: 0.15rem;
  stroke: #000;
  stroke-opacity: 0.6;
}
.text-city {
  text-anchor: middle;
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  font-size: 1.1rem;
  opacity: 0.6;.1
  color: #000;
  text-shadow:  1px  1px 0 white,
  1px -1px 0 white,
  -1px  1px 0 white,
  -1px -1px 0 white;
}
</style>
</head>
<body>
  <svg></svg>
​
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script>
​
  var width = 960,
  height = 1000;
​
  var path = d3.geo.path()
  .projection(matrix(1, 0, 0, -1, 0, height))
  .pointRadius(3);
​
  var svg = d3.select("svg")
  .attr("width", width)
  .attr("height", height);
​
  d3.json("almeria.json", function(error, almeria) {
    if (error) throw error;
​
    var municipios = topojson.feature(almeria, almeria.objects["almeria-municipios"]),
    province = topojson.feature(almeria, almeria.objects["almeria-province"]),
    park = topojson.feature(almeria, almeria.objects["cabo-de-gata"]),
    capital = topojson.feature(almeria, almeria.objects["almeria-city"]);
​
​
​
    // Fit the geography to the canvas (i.e., scale and translate)
    var b = path.bounds(municipios),
    s = .975 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
​
    path.projection(matrix(s, 0, 0, -s, t[0], t[1]));
​
​
    // Draw shaded relief from raster data
    var raster_width = (b[1][0] - b[0][0]) * s;
    var raster_height = (b[1][1] - b[0][1]) * s;
​
    var rtranslate_x = (width - raster_width) / 2;
    var rtranslate_y = (height - raster_height) / 2;
​
    svg.append("image")
    .attr("xlink:href", "shaded-relief.png")
    .attr("class", "raster")
    .attr("width", raster_width)
    .attr("height", raster_height)
    .attr("transform",
    "translate(" + rtranslate_x + ", " + (rtranslate_y-5.5) + ")");
​
    // Draw provincia municipios from vector data
    // (drawn after raster so it overlays)
    svg.append("g").attr("class", "g-municipios")
    .selectAll(".municipios")
    .data(municipios.features)
    .enter()
    .append("path")
    .attr("class", function(d) {
      return "municipios "+"c-"+d.properties.NAMEUNIT;
    })
    .attr("d", path);
​
    var park = svg.append("g").attr("class", "g-cabo-de-gata").selectAll(".cabo-de-gata")
    .data(park.features);
​
    park
    .enter()
    .append("path")
    .attr("class", "cabo-de-gata")
    .attr("d", path);
​
    park
    .enter()
    .append("text")
    .attr("class", "cabo-de-gata-title")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .text(function(d){
      return d.properties.SITENAME;
    });
​
    svg.append("g").attr("class", "g-border")
    .selectAll(".provincia-border")
    .data(province.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "provincia-border")
​
    svg.append("text").data(province.features)
    .attr("class", "province-name")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .text(function(d){
      return d.properties.NAMEUNIT;
    });
​
    var almeriaGroup = svg.append("g").attr("class", "g-almeria");
    almeriaGroup
    .selectAll(".circle-city")
    .data(capital.features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "circle-city")
​
    almeriaGroup
    .selectAll(".text-city")
    .data(capital.features)
    .enter()
    .append("text")
    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
    .attr("class", "text-city")
    .attr("dx", "2.5rem")
    .attr("dy", "0.35rem")
    .text(function(d){
      return d.properties.NAME;
    })
  });
​
  function matrix(a, b, c, d, tx, ty) {
    return d3.geo.transform({
      point: function(x, y) { this.stream.point(a * x + b * y + tx, c * x + d * y + ty); }
    });
  }
​
  </script>
</body>
</html>
​
    