--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/albers/albers.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Albers Projection</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.geo.js"></script>
+ <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
+ <script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
+ <style type="text/css">
+
+@import url("../../lib/jquery-ui/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:svg")
+ .append("svg:g")
+ .attr("id", "states");
+
+d3.json("../data/us-states.json", function(collection) {
+ d3.select("#states")
+ .selectAll("path")
+ .data(collection.features)
+ .enter().append("svg:path")
+ .attr("d", path);
+ d3.select("#states")
+ .append("svg: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>