Skip to content

Instantly share code, notes, and snippets.

@antonio-rodrigues

antonio-rodrigues/.block

Last active October 19, 2017 14:07
Show Gist options
  • Save antonio-rodrigues/f42062258d309e5a24583f080a5460d9 to your computer and use it in GitHub Desktop.
Save antonio-rodrigues/f42062258d309e5a24583f080a5460d9 to your computer and use it in GitHub Desktop.
Download ZIP
test world map block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.names {
fill: none;
stroke: #ff3d3d;
stroke-linejoin: round;
}
</style>
</head>
<body>
<canvas width="960" height="500"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var width = 960,
height = 500;
var map = d3.select('canvas');
var projection = d3.geoEquirectangular()
.center([0, 5])
.scale(100)
.rotate([-180,0])
.translate([width / 2, height / 2])
.precision(.1);
var svg = map.append("svg")
.attr("width", width)
.attr("height", height)
.style("stroke", "#E1DFBD")
.style("fill", "#BEB894")
.style("stroke-width", 1)
.attr("preserveAspectRatio", "xMidYMid");
var path = d3.geoPath().projection(projection);
var g = svg.append("g");
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", (error, world) => {
if (error) {
console.error(error);
throw error
};
var features = topojson.feature(world, world.objects.countries).features;
// console.log('im in!', features);
g.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment