Created
December 5, 2015 18:29
-
-
Save basicavisual/46d1d9a94ca04a56f93d to your computer and use it in GitHub Desktop.
Mexico GeoJson demo
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Entidades mexicanas.</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| background-color: #2B2B2B; | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| #container { | |
| width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 30px; | |
| padding: 30px; | |
| background-color: #2B2B2B; | |
| /*box-shadow: 3px 3px 5px 6px #ccc; */ | |
| } | |
| /*body { | |
| background-color: gray; | |
| }*/ | |
| svg { | |
| background-color: #2B2B2B; | |
| } | |
| h2 { | |
| font-size: 30px; | |
| font-family: Georgia, serif; | |
| color: white; | |
| } | |
| p { | |
| font-size: 20px; | |
| color: white; | |
| margin: 15px 0 10px 0; | |
| } | |
| path { | |
| stroke-width: 0.3; | |
| stroke:#2B2B2B; | |
| fill: #C9FF05; | |
| } | |
| path:hover { | |
| fill: #07918A; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <h2>Mapa de México por división politica.</h2> | |
| <p>GeoJson demo.</p> | |
| </div> | |
| <script type="text/javascript"> | |
| //set dimensions | |
| var w = 700; | |
| var h = 400; | |
| //define projection | |
| var projection = d3.geo.mercator() | |
| .center([-100, 22]) | |
| .translate([ w/1.7, h/1.7]) | |
| .scale([ w/.7 ]); | |
| //define path generator | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| //svg | |
| var svg = d3.select("#container") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| //load GeoJson data | |
| d3.json("mexico.json", function(json) { | |
| // bind data | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Podrian re subir los links
Podrian re subir los links
Dale un vistazo aca:
https://gist.github.com/ponentesincausa/46d1d9a94ca04a56f93d#file-mexico-json
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ya no sirven los links, marca el error 404 😢