This repository has been archived by the owner on Jul 29, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (60 loc) · 1.73 KB
/
index.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>
<meta charset="utf-8">
<head>
<title>
Pokhara Lekhnath OSM User Contributions
</title>
</head>
<style>
h1{
margin-left: 75px;
}
h2{
margin-left: 75px;
font-style: italic;
}
h3{
margin-left: 75px;
font-style: italic;
}
</style>
<body>
<h1> User Contributions and Size of Contribution </h1>
<h2> hover over the circle to find the username, can you find yours? </h2>
<h3> OSM data from Feburary 25 2018 </h3>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var diameter = 1100,
format = d3.format(",d"),
color = d3.scale.category20c();
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(2.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.csv("userSummary.csv", function(error, data) {
if (error) throw error;
//convert numerical values from strings to numbers
data = data.map(function(d){ d.value = +d["Freq"]; console.log(d);return d; });
//bubbles needs very specific format, convert data to this.
var nodes = bubble.nodes({children:data}).filter(function(d) { return !d.children; });
//setup the chart
var bubbles = svg.append("g")
.attr("transform", "translate(0,0)")
.selectAll(".bubble")
.data(nodes)
.enter();
//create the bubbles
bubbles.append("circle")
.attr("r", function(d){ return d.r; })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
.style("fill", function(d) { return color(d.value); })
.append("svg:title")
.text(function(d) { return (d["Var1"] + " with " + d.value + " objects"); });;
})
</script>
</body>