Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/README.md

Last active February 19, 2017 09:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramiroaznar/9277296a46e37002112714aa43a09f72 to your computer and use it in GitHub Desktop.
Save ramiroaznar/9277296a46e37002112714aa43a09f72 to your computer and use it in GitHub Desktop.
Download ZIP
How to draw D3 maps from a dropdown menu
Raw
README.md
Raw
index.html
<!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