-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindexBackup.html
132 lines (99 loc) · 4.22 KB
/
indexBackup.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<!-- saved from url=(0047)http://www.devforrest.com/examples/cvt/cvt.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<title>Voronoi Treemap</title>
<script language="javascript" type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!-- <script language="javascript" type="text/javascript" src="d3.v2.js"></script> -->
<script language="javascript" type="text/javascript" src="d3-master/d3.js"></script>
<script language="javascript" type="text/javascript" src="ConvexHull.js"></script>
<script language="javascript" type="text/javascript" src="PowerDiagram.js"></script>
<script language="javascript" type="text/javascript" src="VoronoiTreemap.js"></script>
<!-- test input local filesystem -->
<script language="javascript" type="text/javascript" src="flare.js"></script>
<script language="javascript" type="text/javascript" src="simple_two.js"></script>
<script language="javascript" type="text/javascript" src="simple_three.js"></script>
<script language="javascript" type="text/javascript" src="simple_four.js"></script>
<script language="javascript" type="text/javascript" src="simple_eight.js"></script>
</head>
<body>
<h2>Voronoi Treemap</h2>
<!--
<div id="div1">This is div1</div><br><br>
-->
<script language="javascript">
// here we set up the svg
var width = 510;
var height = 510;
var svg_container = d3.select("body").append("svg").attr("width",width).attr("height",height);
// here's the whole svg as a poly
var svg_poly = [[0,0],[0,height],[width,height],[width,0]];
// here's a octogon inside 510x510
var n1 = 10;
var n2 = 140;
var n3 = 370;
var n4 = 500;
var octogon_poly = [[n1, n2], [n1, n3], [n2, n4], [n3, n4], [n4, n3], [n4, n2], [n3, n1], [n2, n1]];
function make_d3_poly(d) {
return "M" + d.join("L") + "Z";
}
var refresh = function(polygon_list, sites) {
var polylines = svg_container.append("g").selectAll("path").data(polygon_list, make_d3_poly);
polylines.enter().append("path")
.attr("d", make_d3_poly)
.attr("stroke-width", "5px")
.attr("stroke", "black")
.attr("fill", "cyan");
polylines.exit().remove();
var center_circles = svg_container.append("g").selectAll(".center.circle").data(sites);
center_circles.enter().append("circle")
.attr("class", "center circle")
.attr("cx", function(d) {return (d.p[0]);})
.attr("cy", function(d) {return (d.p[1]);})
.attr("r", function(d) {return 5;})
//.attr("r", function(d) {return (Math.sqrt(d.weight));})
//.attr("r", function(d) {return (Math.max(Math.sqrt(d.weight), 2));})
.attr("stroke", "black")
.attr("fill", "black");
var radius_circles = svg_container.append("g").selectAll(".radius.circle").data(sites);
radius_circles.enter().append("circle")
.attr("class", "radius circle")
.attr("cx", function(d) {return (d.p[0]);})
.attr("cy", function(d) {return (d.p[1]);})
//.attr("r", function(d) {return 5;})
.attr("r", function(d) {return (Math.sqrt(d.weight));})
//.attr("r", function(d) {return (Math.max(Math.sqrt(d.weight), 2));})
.attr("stroke", "red")
.attr("fill", "none");
}
//var dataset = simple_two_json;
//var dataset = simple_three_json;
var dataset = simple_four_json;
//var dataset = simple_eight_json;
var sites = VoronoiTreemap.initSites(svg_poly, dataset);
refresh([], sites);
var iterate = function() {
var polygons_and_sites = VoronoiTreemap.computeVoronoiTreemapSingleWithSites(svg_poly, dataset, sites, 1);
var polygon_list = polygons_and_sites[0];
sites = polygons_and_sites[1];
refresh(polygon_list, sites);
}
var recursive = function() {
var polygons_and_sites = VoronoiTreemap.computeVoronoiTreemapRecursive(svg_poly, dataset, 2);
refresh(polygons_and_sites[0], polygons_and_sites[1]);
console.log("recursive result:");
console.log(polygons_and_sites);
}
d3.select("body").append("input")
.attr("type", "button")
//.attr("name", "iterate_button")
.attr("id", "iterate_button")
.attr("value", "Iterate!");
d3.select("#iterate_button").on("click", function() {iterate();});
d3.select("body").append("input")
.attr("type", "button")
//.attr("name", "iterate_button")
.attr("id", "recursive_button")
.attr("value", "Recursive Test");
d3.select("#recursive_button").on("click", function() {recursive();});
</script>
</body></html>