-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplaceQuant.html
117 lines (92 loc) · 3.91 KB
/
placeQuant.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
<!DOCTYPE html>
<meta charset="utf-8">
<title>
Catalog Visualizations
</title>
<!--A series of basic data visualizations using Javascript and the D3 libary
these are based loosely on the bubble pack layout examples by Mike Bostock
d3 bubble pack-style data visualization with a twist - pulls directly from
database via the associated php script - displays place names from a library
catalog - size of bubble is based on number of records with that place name.
Clicking on the bubble opens a search for that place name in the catalog in
a new browser window.
-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="vis.css"/>
<style>
body{
background: lightgrey;
}
</style>
<body>
<div class="header">
<header>
<h1>Geographic Subjects : number of records</h1>
</header>
<small>Bubbles are links to Catalog Searches*</small>
</div>
<div class="buttons">
<a href="placeQuantSize.html">Geographic sorted by Size</a>
<a href="termsQuant.html">Item Types by Quantities</a>
<a href="https://github.com/dmer/vis" style="float: right; padding-right: 40px;">about</a>
</div>
<!--Begin D3 Script Here -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var diameter = 1020, //set area or canvas for visualization
format = d3.format(",d"),
//fooling around with random selections for rgb color
red = Math.floor((Math.random() * 255) + 69);
grn = Math.floor((Math.random() * 255) + 70);
blu = Math.floor((Math.random() * 255) + 71);
color = "rgb("+red+","+grn+","+blu+")";
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(12.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
// source data as JSON
d3.json("placeQuant.php", function(error, root) {
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(root))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) { return d.className + ": " + format(d.value); })
node.append("svg:circle") //create the circles with radius based on size attribute
.attr("r", function(d) { return (d.r*1.15); })
.style("fill", function(d) { return "rgb("+red+","+grn+","+Math.floor(d.r*3)+")"})
.on("click", function(d) { // make text label link
var url = d.url + d.className; //add the current name to the end of the url
window.open( url ); //open the link in new window
})
node.append("text") // create text label from the name attribute
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.className.substring(0, d.r / 3.3); })
.on("click", function(d) { // make text label link
var url = d.url + d.className; //add the current name to the end of the url
window.open( url ); //open the link in new window
});
});
// Returns a flat hierarchy containing all nodes.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size, url: node.url});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
<small>*There are inconsistencies between the quantities in this visualization and the search results on the catalog. These are due to a number of factors including inconsistent legacy metadata in the catalog itself and a lack of flexibility in the search string of the url. The next version will use API calls to read accurate quantity information and build more precise search urls.</small>
</body></html>