--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/azimuthal/azimuthal.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Azimuthal 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>
+ <link type="text/css" rel="stylesheet" href="azimuthal.css"/>
+ </head>
+ <body>
+ <h3>Azimuthal Projection</h3>
+ <script type="text/javascript" src="azimuthal.js"></script><p>
+ <select id="mode">
+ <option value="stereographic">stereographic</option>
+ <option value="orthographic">orthographic</option>
+ <option value="equidistant">equidistant</option>
+ <option value="gnomonic">gnomonic</option>
+ <option value="equalarea">equalarea</option>
+ </select>
+ <div id="lon">origin.longitude: <span>0</span></div>
+ <div id="lat">origin.latitude: <span>0</span></div><p>
+ <div id="scale">scale: <span>240</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">
+
+$("#lon").slider({
+ min: -180,
+ max: 180,
+ step: 1e-1,
+ value: 0,
+ slide: function(event, ui) {
+ var origin = xy.origin();
+ origin[0] = ui.value;
+ xy.origin(origin);
+ circle.origin(origin);
+ refresh();
+ }
+});
+
+$("#lat").slider({
+ min: -90,
+ max: 90,
+ step: 1e-1,
+ value: 0,
+ slide: function(event, ui) {
+ var origin = xy.origin();
+ origin[1] = ui.value;
+ xy.origin(origin);
+ circle.origin(origin);
+ refresh();
+ }
+});
+
+$("#scale").slider({
+ min: 0,
+ max: 3000,
+ value: 240,
+ 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();
+ }
+});
+
+$("#mode").change(function() {
+ var mode = $(this).val();
+ xy.mode(mode);
+ refresh(500);
+});
+
+ </script>
+ </body>
+</html>