Last active
January 30, 2017 02:26
-
-
Save LuisSevillano/8e5afd517ec5a226be2f849a394118aa to your computer and use it in GitHub Desktop.
shaded relief with custom projection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| border: none | |
| height: 1000 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment