Last active
February 19, 2017 09:50
-
-
Save ramiroaznar/9277296a46e37002112714aa43a09f72 to your computer and use it in GitHub Desktop.
How to draw D3 maps from a dropdown menu
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/en/thumb/1/15/Logo_D3.svg/1079px-Logo_D3.svg.png" /> | |
| <title>Select a D3 map from a dropdown menu</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/topojson.v2.min.js"></script> | |
| <style type="text/css"> | |
| .js-file-selector { | |
| width: 175px; | |
| } | |
| #canvas-container { | |
| position: absolute; | |
| z-index: 1; | |
| top: 50%; | |
| left: 50%; | |
| margin-right: -50%; | |
| padding: 0; | |
| transform: translate(-50%, -50%); | |
| margin: 0 auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wraper-file-selector"> | |
| <select class="js-file-selector"> | |
| <option value="#" selected disabled>Select a city</option> | |
| </select> | |
| </div> | |
| <div id="canvas-container"> | |
| <canvas width="960" height="720"></canvas> | |
| </div> | |
| <script tyle="text/javascript"> | |
| function main() { | |
| var maps = [ // store city name & url in a json | |
| {"name": "Madrid", "url": "https://martingonzalez.net/madrid-tracts.v1.json"}, | |
| {"name": "Barcelona", "url": "https://martingonzalez.net/barcelona-tracts.v1.json"} | |
| ]; | |
| for (var i = 0; i < maps.length; i++){ // append an option per each json element | |
| var name = maps[i]["name"]; | |
| var url = maps[i]["url"]; | |
| $('.js-file-selector').append("<option value=" + url + ">" + name + "</option>"); | |
| } | |
| $(document).ready(function() { | |
| $(".js-file-selector").select2(); // add selector plugin | |
| $('.js-file-selector').change(function(){ // add event when the selector is changed | |
| var input = $( ".js-file-selector option:selected" ).val(); // get url as input | |
| var context = d3.select("canvas").node().getContext("2d"), // get context | |
| path = d3.geoPath().context(context); | |
| d3.json(input, function(error, map) { | |
| if (error) throw error; | |
| context.clearRect(0,0,960,720); // clear canvas | |
| context.beginPath(); | |
| path(topojson.mesh(map)); // draw selected map | |
| context.stroke(); | |
| }); | |
| }); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment