Skip to content

Instantly share code, notes, and snippets.

@cmdoptesc
Forked from whatsthebeef/index.html
Last active December 22, 2015 10:38
Show Gist options
  • Save cmdoptesc/6460184 to your computer and use it in GitHub Desktop.
Save cmdoptesc/6460184 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .5;
stroke-width: .5px;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
.route {
fill: none;
stroke: blue;
stroke-width: 1px;
}
</style>
<body>
<div id="root"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script>
var G = (function(d3){
return {
init : function(){
this.ui = {};
var width = G.ui.width = 960;
var height = G.ui.height = 770;
var projection = this.ui.projection = d3.geo.mercator()
.scale((width + 1) / 2 / Math.PI)
.translate([width / 2, height / 2])
.precision(.1);
var path = this.ui.path = d3.geo.path()
.projection(projection);
queue()
.defer(d3.json, "http://bl.ocks.org/mbostock/raw/4090846/world-50m.json")
.await(this.ready);
},
ready : function(error, world, points, interactions) {
var path = G.ui.path;
var projection = G.ui.projection;
var width = G.ui.width;
var height = G.ui.height;
var svg = G.ui.svg = d3.select("#root").insert("svg", "#instructions")
.attr("id", "map")
.attr("width", width)
.attr("height", height);
var self = this;
var countries = topojson.feature(world, world.objects.countries).features;
// fixed it by changing your "return d" to "return indx" on line 87
// personally, i suggest looping through the dataset, and appending the property code = 1 to
// every element instead of what we've done below. when we use the second argument in d3,
// by convention, it's to dictate which key to bind the data to the document, and not to
// modify the dataset. by modifying the data *before* we bind it, it makes things clear
// for subsequent readers
svg.selectAll("path:not(.graticule)")
.data(countries, function(d, indx){
d.code = "1";
return indx;
})
.enter().append("path")
.attr("d", path);
}
}
})(d3);
G.init();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment