forked from eurostat/EurostatVisu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
zooming_d3.html
60 lines (47 loc) · 1.56 KB
/
zooming_d3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<title>Zoom + Pan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/lib.js"></script>
<script>
//See http://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45
//See also http://bl.ocks.org/mbostock/3680999
$(function() {
//define size
var dim = EstLib.getMaxSize(), width = dim.width, height = dim.height;
//build svg
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var g = svg.append("g");
//build dataset
function phyllotaxis(radius) {
var theta = Math.PI * (3 - Math.sqrt(5));
return function(i) {
var r = radius * Math.sqrt(i), a = theta * i;
return [ width / 2 + r * Math.cos(a),
height / 2 + r * Math.sin(a) ];
};
}
var points = d3.range(2000).map(phyllotaxis(10));
//draw dataset
g.selectAll("circle")
.data(points)
.enter().append("circle")
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; })
.attr("r", 2.5);
//add zoom/pan behaviour
svg.append("rect")
.attr("width", width).attr("height", height)
.style("fill", "none").style("pointer-events", "all")
.call(d3.zoom().scaleExtent([0.25,4])
.on("zoom", function() { g.attr("transform", d3.event.transform); }));
});
</script>
</head>
<body>
</body>
</html>