Skip to content

Instantly share code, notes, and snippets.

@grahamjenson
Last active January 1, 2016 19:49
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 grahamjenson/8192666 to your computer and use it in GitHub Desktop.
Save grahamjenson/8192666 to your computer and use it in GitHub Desktop.
Simple Scale Example

Simple Scale Example

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div id='js-scale-example'></div>
<script src='http://code.jquery.com/jquery-2.0.3.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script src="/grahamjenson/raw/8168412/worldtopo.js"></script>
<style>
.background {
fill: #a4bac7;
}
.foreground {
fill: none;
stroke: #333;
stroke-width: 1.5px;
}
.graticule {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
.graticule :nth-child(2n) {
stroke-dasharray: 2,2;
}
.land {
fill: #d7c7ad;
stroke: #766951;
}
.geojson {
fill: none;
stroke: red;
stroke-width: 5;
}
.boundary {
fill: none;
stroke: #a5967e;
}
</style>
<script>
var width = $(window).width(),
height = $(window).height();
var sc = Math.min(width,height) * 0.5
var projection = d3.geo.equirectangular()
.scale(sc)
.translate([width/2,height/2])
.rotate([-174.7772,41.2889]);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("#js-scale-example").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll(".land")
.data([topojson.object(worldtopo, worldtopo.objects.land)])
.enter().append('path')
.attr('class','land')
.attr("d", path);
sc = 75
setInterval(function(){
sc = (sc + 1) % 350;
projection.scale(sc);
svg.selectAll(".land")
.attr("d", path);
},100);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment