Skip to content

Instantly share code, notes, and snippets.

@stianSjoli

stianSjoli/index.html

Created March 3, 2019 23:33
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 stianSjoli/765f9b7e385c500358712d5f424db236 to your computer and use it in GitHub Desktop.
Save stianSjoli/765f9b7e385c500358712d5f424db236 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<meta charset="utf-8">
<style>svg{width:100%;height:1000px;margin:0px auto;}
path {
stroke: white;
stroke-width: 1px;
}
</style>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var svg = d3.select("body").append("svg");
var test = d3.geoMercator()
.center([0,0])
.scale(100)
var path = d3.geoPath()
.projection(test)
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
if (error) throw error;
svg.selectAll("path")
.data(topojson.feature(world,world.objects.countries).features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function(d,i,n) {
if(i === 118 || i=== 73) {
return "teal";
} else {
return "black";
}
}).on("mouseenter", function(d,i,n){
if(i === 118 || i=== 73) {
return;
} else {
d3.select(n[i])
.attr("fill", "none")
}
})
})
</script>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment