jasondavies/README.md

## README.md

      
    Raw
  

              README.md
            
          
    D3 2.11’s projections will adaptively resample to reduce local distortion of
lines. Move the mouse to change the precision, and drag to change the aspect.
Update: Mike has made some awesome improvements!

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: sans-serif;
}

#precision-wrapper {
  position: absolute;
  top: 5px;
  left: 5px;
}

svg {
  cursor: move;
}

rect {
  fill: none;
}

.graticule {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

.graticule:nth-child(2n) {
  stroke-dasharray: 2,2;
}

path.resample {
  stroke: #f00;
  stroke-width: 2.5px;
  fill: none;
}

</style>
<p id="precision-wrapper">Precision: <span id="precision">200px</span>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    x = d3.scale.linear().domain([0, width]).range([200, 1]),
    initial = [-71, 42, 0],
    rotate = initial.slice(),
    transitioning = false,
    velocity = [.010, -.002],
    t0 = Date.now();

var projection = d3.geo.equirectangular()
      .rotate([0, 30, 0])
      .translate([width / 2 - .5, height / 2 - .5])
      .scale(150)
      .precision(x.range()[0]),
    path = d3.geo.path().projection(projection),
    graticule = d3.geo.graticule(),
    format = d3.format(",.2f"),
    precision = d3.select("#precision");

var svg = d3.select("body").append("svg")
    .datum({x: 0, y: -45})
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.drag()
      .origin(function() { return {x: rotate[0], y: -rotate[1]}; })
      .on("dragstart", function() { transitioning = true; })
      .on("drag", function(d) {
        rotate[0] = d3.event.x;
        rotate[1] = -d3.event.y;
        projection.rotate(rotate);
        svg.selectAll(".geometry, .graticule").attr("d", path);
      })
      .on("dragend", function() {
        transitioning = false;
        t0 = Date.now();
        initial = rotate.slice();
      }))
    .on("mousemove", function() {
      var px = x(d3.mouse(this)[0]);
      projection.precision(px);
      precision.text(format(px) + "px");
      svg.selectAll("path").attr("d", path);
    });

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

svg.append("path")
    .attr("class", "resample")
    .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
    .attr("d", path);

svg.selectAll(".graticule")
    .data(graticule.lines)
  .enter().append("path")
    .attr("class", "graticule")
    .attr("d", path);

d3.timer(function() {
  if (transitioning) return;
  var t = Date.now() - t0;
  rotate[0] = initial[0] + velocity[0] * t;
  rotate[1] = initial[1] + velocity[1] * t;
  projection.rotate(rotate);
  svg.selectAll("path").attr("d", path);
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: sans-serif;
	}

	#precision-wrapper {
	position: absolute;
	top: 5px;
	left: 5px;
	}

	svg {
	cursor: move;
	}

	rect {
	fill: none;
	}

	.graticule {
	fill: none;
	stroke: #000;
	stroke-width: .5px;
	}

	.graticule:nth-child(2n) {
	stroke-dasharray: 2,2;
	}

	path.resample {
	stroke: #f00;
	stroke-width: 2.5px;
	fill: none;
	}

	</style>
	<p id="precision-wrapper">Precision: <span id="precision">200px</span>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500,
	x = d3.scale.linear().domain([0, width]).range([200, 1]),
	initial = [-71, 42, 0],
	rotate = initial.slice(),
	transitioning = false,
	velocity = [.010, -.002],
	t0 = Date.now();

	var projection = d3.geo.equirectangular()
	.rotate([0, 30, 0])
	.translate([width / 2 - .5, height / 2 - .5])
	.scale(150)
	.precision(x.range()[0]),
	path = d3.geo.path().projection(projection),
	graticule = d3.geo.graticule(),
	format = d3.format(",.2f"),
	precision = d3.select("#precision");

	var svg = d3.select("body").append("svg")
	.datum({x: 0, y: -45})
	.attr("width", width)
	.attr("height", height)
	.call(d3.behavior.drag()
	.origin(function() { return {x: rotate[0], y: -rotate[1]}; })
	.on("dragstart", function() { transitioning = true; })
	.on("drag", function(d) {
	rotate[0] = d3.event.x;
	rotate[1] = -d3.event.y;
	projection.rotate(rotate);
	svg.selectAll(".geometry, .graticule").attr("d", path);
	})
	.on("dragend", function() {
	transitioning = false;
	t0 = Date.now();
	initial = rotate.slice();
	}))
	.on("mousemove", function() {
	var px = x(d3.mouse(this)[0]);
	projection.precision(px);
	precision.text(format(px) + "px");
	svg.selectAll("path").attr("d", path);
	});

	svg.append("rect")
	.attr("width", width)
	.attr("height", height);

	svg.append("path")
	.attr("class", "resample")
	.datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
	.attr("d", path);

	svg.selectAll(".graticule")
	.data(graticule.lines)
	.enter().append("path")
	.attr("class", "graticule")
	.attr("d", path);

	d3.timer(function() {
	if (transitioning) return;
	var t = Date.now() - t0;
	rotate[0] = initial[0] + velocity[0] * t;
	rotate[1] = initial[1] + velocity[1] * t;
	projection.rotate(rotate);
	svg.selectAll("path").attr("d", path);
	});

	</script>