← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/d3/examples/mercator/mercator-zoom.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-zoom.html
1
 
<!DOCTYPE html>
2
 
<meta charset="utf-8">
3
 
<style>
4
 
 
5
 
.frame {
6
 
  stroke: #000;
7
 
  fill: none;
8
 
  pointer-events: all;
9
 
}
10
 
 
11
 
.feature {
12
 
  fill: #eee;
13
 
  stroke: #ccc;
14
 
}
15
 
 
16
 
</style>
17
 
<script src="../../d3.v2.js"></script>
18
 
<body>
19
 
<script>
20
 
 
21
 
var margin = {top: 0, right: 0, bottom: 0, left: 0},
22
 
    width = 960 - margin.left - margin.right,
23
 
    height = 500 - margin.top - margin.bottom;
24
 
 
25
 
var projection = d3.geo.mercator()
26
 
    .scale(width)
27
 
    .translate([width / 2, height / 2]);
28
 
 
29
 
var path = d3.geo.path()
30
 
    .projection(projection);
31
 
 
32
 
var zoom = d3.behavior.zoom()
33
 
    .translate(projection.translate())
34
 
    .scale(projection.scale())
35
 
    .scaleExtent([height, 8 * height])
36
 
    .on("zoom", move);
37
 
 
38
 
var svg = d3.select("body").append("svg")
39
 
    .attr("width", width + margin.left + margin.right)
40
 
    .attr("height", height + margin.top + margin.bottom)
41
 
  .append("g")
42
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
43
 
    .call(zoom);
44
 
 
45
 
var g = svg.append("g"),
46
 
    feature = g.selectAll(".feature");
47
 
 
48
 
svg.append("rect")
49
 
    .attr("class", "frame")
50
 
    .attr("width", width)
51
 
    .attr("height", height);
52
 
 
53
 
d3.json("../data/world-countries.json", function(collection) {
54
 
  feature = feature
55
 
      .data(collection.features)
56
 
    .enter().append("path")
57
 
      .attr("class", "feature")
58
 
      .attr("d", path);
59
 
});
60
 
 
61
 
function move() {
62
 
  projection.translate(d3.event.translate).scale(d3.event.scale);
63
 
  feature.attr("d", path);
64
 
}
65
 
 
66
 
</script>