Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
| <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