--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/mercator/mercator.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Mercator 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;
+}
+
+line {
+ stroke: brown;
+ stroke-dasharray: 4,2;
+}
+
+path {
+ fill: #ccc;
+ stroke: #fff;
+}
+
+div {
+ width: 960px;
+}
+
+ </style>
+ </head>
+ <body>
+ <h3>Mercator Projection</h3>
+ <script type="text/javascript">
+
+// Our projection.
+var xy = d3.geo.mercator(),
+ path = d3.geo.path().projection(xy);
+
+var states = d3.select("body")
+ .append("svg:svg")
+ .append("svg:g")
+ .attr("id", "states");
+
+var equator = d3.select("svg")
+ .append("svg:line")
+ .attr("x1", "0%")
+ .attr("x2", "100%");
+
+d3.json("../data/world-countries.json", function(collection) {
+
+ states
+ .selectAll("path")
+ .data(collection.features)
+ .enter().append("svg:path")
+ .attr("d", path)
+ .append("svg:title")
+ .text(function(d) { return d.properties.name; });
+
+ equator
+ .attr("y1", xy([0, 0])[1])
+ .attr("y2", xy([0, 0])[1])
+});
+
+function refresh() {
+ states
+ .selectAll("path")
+ .attr("d", path);
+
+ equator
+ .attr("y1", xy([0, 0])[1])
+ .attr("y2", xy([0, 0])[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="scale">scale: <span>500</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">
+
+$("#scale").slider({
+ min: 0,
+ max: 3000,
+ value: 500,
+ 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>