whatcould · August 29, 2015 14:14
diff --git a/albers.html b/albers.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Albers Projection</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.8.1/d3.v2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style type="text/css">

 @import url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css");

 body, .ui-widget {
  font: 14px Helvetica Neue;
 }

 svg {
  width: 960px;
  height: 500px;
  border: solid 1px #ccc;
  background: #eee;
 }

 #states path {
  fill: #ccc;
  stroke: #fff;
 }

 #states circle {
  fill: #fcc;
  stroke: #000;
 }

 div {
  width: 960px;
 }

    </style>
  </head>
  <body>
    <h3>Albers Projection</h3>
    <script type="text/javascript">

 // Our projection.
 var xy = d3.geo.albers(),
    path = d3.geo.path().projection(xy);

 d3.select("body")
  .append("svg")
  .append("g")
    .attr("id", "states");
 console.log('running')
 d3.json("http://bost.ocks.org/mike/leaflet/us-states.json", function(collection) {
  console.log('got states');
  d3.select("#states")
    .selectAll("path")
      .data(collection.features)
    .enter().append("path")
      .attr("d", path);
  d3.select("#states")
    .append("circle")
      .attr("r", 10)
      .attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
 });

 function refresh() {
  d3.selectAll("#states path")
      .attr("d", path);
  d3.select("#states circle")
      .attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
  d3.select("#parallels span")
      .text(xy.parallels());
  d3.select("#lon span")
      .text(xy.origin()[0]);
  d3.select("#lat span")
      .text(xy.origin()[1]);
  d3.select("#scale span")
      .text(xy.scale());
  d3.select("#translate-x span")
      .text(xy.translate()[0]);
  d3.select("#translate-y span")
      .text(xy.translate()[1]);
 }

    </script><p>
    <div id="lon">origin.longitude: <span>-98</span></div>
    <div id="lat">origin.latitude: <span>38</span></div><p>
    <div id="parallels">parallels: <span>29.5,45.5</span></div><p>
    <div id="scale">scale: <span>1000</span></div><p>
    <div id="translate-x">translate.x: <span>480</span></div>
    <div id="translate-y">translate.y: <span>250</span></div>
    <script type="text/javascript">

 $("#parallels").slider({
  range: true,
  min: -90,
  max: 90,
  step: 1e-1,
  values: [29.5, 45.5],
  slide: function(event, ui) {
    xy.parallels(ui.values);
    refresh();
  }
 });

 $("#lon").slider({
  min: -180,
  max: 180,
  step: 1e-1,
  value: -98,
  slide: function(event, ui) {
    var origin = xy.origin();
    origin[0] = ui.value;
    xy.origin(origin);
    refresh();
  }
 });

 $("#lat").slider({
  min: -90,
  max: 90,
  step: 1e-1,
  value: 38,
  slide: function(event, ui) {
    var origin = xy.origin();
    origin[1] = ui.value;
    xy.origin(origin);
    refresh();
  }
 });

 $("#scale").slider({
  min: 0,
  max: 3000,
  value: 1000,
  slide: function(event, ui) {
    xy.scale(ui.value);
    refresh();
  }
 });

 $("#translate-x").slider({
  min: -2000,
  max: 2000,
  value: 480,
  slide: function(event, ui) {
    var translate = xy.translate();
    translate[0] = ui.value;
    xy.translate(translate);
    refresh();
  }
 });

 $("#translate-y").slider({
  min: -2000,
  max: 2000,
  value: 250,
  slide: function(event, ui) {
    var translate = xy.translate();
    translate[1] = ui.value;
    xy.translate(translate);
    refresh();
  }
 });

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Albers Projection</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.8.1/d3.v2.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style type="text/css">

	@import url("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css");

	body, .ui-widget {
	font: 14px Helvetica Neue;
	}

	svg {
	width: 960px;
	height: 500px;
	border: solid 1px #ccc;
	background: #eee;
	}

	#states path {
	fill: #ccc;
	stroke: #fff;
	}

	#states circle {
	fill: #fcc;
	stroke: #000;
	}

	div {
	width: 960px;
	}

	</style>
	</head>
	<body>
	<h3>Albers Projection</h3>
	<script type="text/javascript">

	// Our projection.
	var xy = d3.geo.albers(),
	path = d3.geo.path().projection(xy);

	d3.select("body")
	.append("svg")
	.append("g")
	.attr("id", "states");
	console.log('running')
	d3.json("http://bost.ocks.org/mike/leaflet/us-states.json", function(collection) {
	console.log('got states');
	d3.select("#states")
	.selectAll("path")
	.data(collection.features)
	.enter().append("path")
	.attr("d", path);
	d3.select("#states")
	.append("circle")
	.attr("r", 10)
	.attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
	});

	function refresh() {
	d3.selectAll("#states path")
	.attr("d", path);
	d3.select("#states circle")
	.attr("transform", "translate(" + xy(xy.origin()).join(",") + ")")
	d3.select("#parallels span")
	.text(xy.parallels());
	d3.select("#lon span")
	.text(xy.origin()[0]);
	d3.select("#lat span")
	.text(xy.origin()[1]);
	d3.select("#scale span")
	.text(xy.scale());
	d3.select("#translate-x span")
	.text(xy.translate()[0]);
	d3.select("#translate-y span")
	.text(xy.translate()[1]);
	}

	</script><p>
	<div id="lon">origin.longitude: <span>-98</span></div>
	<div id="lat">origin.latitude: <span>38</span></div><p>
	<div id="parallels">parallels: <span>29.5,45.5</span></div><p>
	<div id="scale">scale: <span>1000</span></div><p>
	<div id="translate-x">translate.x: <span>480</span></div>
	<div id="translate-y">translate.y: <span>250</span></div>
	<script type="text/javascript">

	$("#parallels").slider({
	range: true,
	min: -90,
	max: 90,
	step: 1e-1,
	values: [29.5, 45.5],
	slide: function(event, ui) {
	xy.parallels(ui.values);
	refresh();
	}
	});

	$("#lon").slider({
	min: -180,
	max: 180,
	step: 1e-1,
	value: -98,
	slide: function(event, ui) {
	var origin = xy.origin();
	origin[0] = ui.value;
	xy.origin(origin);
	refresh();
	}
	});

	$("#lat").slider({
	min: -90,
	max: 90,
	step: 1e-1,
	value: 38,
	slide: function(event, ui) {
	var origin = xy.origin();
	origin[1] = ui.value;
	xy.origin(origin);
	refresh();
	}
	});

	$("#scale").slider({
	min: 0,
	max: 3000,
	value: 1000,
	slide: function(event, ui) {
	xy.scale(ui.value);
	refresh();
	}
	});

	$("#translate-x").slider({
	min: -2000,
	max: 2000,
	value: 480,
	slide: function(event, ui) {
	var translate = xy.translate();
	translate[0] = ui.value;
	xy.translate(translate);
	refresh();
	}
	});

	$("#translate-y").slider({
	min: -2000,
	max: 2000,
	value: 250,
	slide: function(event, ui) {
	var translate = xy.translate();
	translate[1] = ui.value;
	xy.translate(translate);
	refresh();
	}
	});

	</script>
	</body>
	</html>