← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/d3/examples/mercator/mercator.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/d3/examples/mercator/mercator.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
  <head>
4
 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5
 
    <title>Mercator Projection</title>
6
 
    <script type="text/javascript" src="../../d3.v2.js"></script>
7
 
    <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
8
 
    <script type="text/javascript" src="../../lib/jquery-ui/jquery-ui.min.js"></script>
9
 
    <style type="text/css">
10
 
 
11
 
@import url("../../lib/jquery-ui/jquery-ui.css");
12
 
 
13
 
body, .ui-widget {
14
 
  font: 14px Helvetica Neue;
15
 
}
16
 
 
17
 
svg {
18
 
  width: 960px;
19
 
  height: 500px;
20
 
  border: solid 1px #ccc;
21
 
  background: #eee;
22
 
}
23
 
 
24
 
line {
25
 
  stroke: brown;
26
 
  stroke-dasharray: 4,2;
27
 
}
28
 
 
29
 
path {
30
 
  fill: #ccc;
31
 
  stroke: #fff;
32
 
}
33
 
 
34
 
div {
35
 
  width: 960px;
36
 
}
37
 
 
38
 
    </style>
39
 
  </head>
40
 
  <body>
41
 
    <h3>Mercator Projection</h3>
42
 
    <script type="text/javascript">
43
 
 
44
 
// Our projection.
45
 
var xy = d3.geo.mercator(),
46
 
    path = d3.geo.path().projection(xy);
47
 
 
48
 
var states = d3.select("body")
49
 
  .append("svg")
50
 
  .append("g")
51
 
    .attr("id", "states");
52
 
 
53
 
var equator = d3.select("svg")
54
 
  .append("line")
55
 
    .attr("x1", "0%")
56
 
    .attr("x2", "100%");
57
 
 
58
 
d3.json("../data/world-countries.json", function(collection) {
59
 
 
60
 
  states
61
 
    .selectAll("path")
62
 
      .data(collection.features)
63
 
    .enter().append("path")
64
 
      .attr("d", path)
65
 
    .append("title")
66
 
      .text(function(d) { return d.properties.name; });
67
 
 
68
 
  equator
69
 
      .attr("y1", xy([0, 0])[1])
70
 
      .attr("y2", xy([0, 0])[1]);
71
 
});
72
 
 
73
 
function refresh() {
74
 
  states
75
 
    .selectAll("path")
76
 
      .attr("d", path);
77
 
 
78
 
  equator
79
 
      .attr("y1", xy([0, 0])[1])
80
 
      .attr("y2", xy([0, 0])[1]);
81
 
 
82
 
  d3.select("#scale span")
83
 
      .text(xy.scale());
84
 
  d3.select("#translate-x span")
85
 
      .text(xy.translate()[0]);
86
 
  d3.select("#translate-y span")
87
 
      .text(xy.translate()[1]);
88
 
}
89
 
 
90
 
    </script><p>
91
 
    <div id="scale">scale: <span>500</span></div><p>
92
 
    <div id="translate-x">translate.x: <span>480</span></div>
93
 
    <div id="translate-y">translate.y: <span>250</span></div>
94
 
    <script type="text/javascript">
95
 
 
96
 
$("#scale").slider({
97
 
  min: 0,
98
 
  max: 3000,
99
 
  value: 500,
100
 
  slide: function(event, ui) {
101
 
    xy.scale(ui.value);
102
 
    refresh();
103
 
  }
104
 
});
105
 
 
106
 
$("#translate-x").slider({
107
 
  min: -2000,
108
 
  max: 2000,
109
 
  value: 480,
110
 
  slide: function(event, ui) {
111
 
    var translate = xy.translate();
112
 
    translate[0] = ui.value;
113
 
    xy.translate(translate);
114
 
    refresh();
115
 
  }
116
 
});
117
 
 
118
 
$("#translate-y").slider({
119
 
  min: -2000,
120
 
  max: 2000,
121
 
  value: 250,
122
 
  slide: function(event, ui) {
123
 
    var translate = xy.translate();
124
 
    translate[1] = ui.value;
125
 
    xy.translate(translate);
126
 
    refresh();
127
 
  }
128
 
});
129
 
 
130
 
    </script>
131
 
  </body>
132
 
</html>