-
Notifications
You must be signed in to change notification settings - Fork 54
/
onmouseover.html
98 lines (86 loc) · 3.82 KB
/
onmouseover.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js"></script>
<link type="text/css" rel="stylesheet" href="prettify.css">
<script type="text/javascript" src="prettify.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
<title></title>
</head>
<body onload="prettyPrint()">
<div style="height:300px; width:750px; margin-left:auto; margin-right:auto; margin-top:1em" id="chart">
</div>
<pre style="font-size:0.7em" class="prettyprint">
d3.selectAll("circle")
.on('mouseover', function(d){
svg.append('text')
.attr("x", time_scale( new Date(d.time)) + 5)
.attr("y", value_scale(d.yes_rsvp_count) + 5)
.text(d.name)
.attr('class','tip')
})
.on('mouseout', function(d){
d3.selectAll(".tip").remove()
})
</pre>
</div>
<script>
d3.json(
'http://localhost:8000/data/meetup_history.json',
function(data){
time_scale = d3.time.scale()
.domain([
new Date(d3.min(data, function(d){return d.time})),
new Date(d3.max(data, function(d){return d.time}))
])
.range([30,730])
value_scale = d3.scale.linear()
.domain([0, d3.max(data, function(d){return d.yes_rsvp_count})])
.range([280, 20])
xAxis = d3.svg.axis().scale(time_scale)
yAxis = d3.svg.axis().scale(value_scale).orient("left")
svg = d3.select("#chart")
.append("svg");
line = d3.svg.line()
.x(function(d){return time_scale( new Date(d.time));})
.y(function(d){return value_scale(d.yes_rsvp_count);})
svg.append("svg:path")
.attr("class", "line")
.attr("d", line(data));
svg.append("svg:g")
.attr("class", "xaxis")
.attr("transform","translate(0,280)")
.call(xAxis)
svg.append("svg:g")
.attr("class", "yaxis")
.attr("transform", "translate(30,0)")
.call(yAxis);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class","brill")
.attr("cx", function(d){return time_scale( new Date(d.time) )})
.attr("cy", function(d){return value_scale(d.yes_rsvp_count);})
.attr("r", 6)
.style("fill","red")
.style("fill-opacity", 0.8)
.style("stroke", "black");
d3.selectAll("circle")
.on('mouseover', function(d){
svg.append('text')
.attr("x", time_scale( new Date(d.time)) + 5)
.attr("y", value_scale(d.yes_rsvp_count) + 5)
.text(d.name)
.attr('class','tip')
.style("font-size","1.5em")
})
.on('mouseout', function(d){
d3.selectAll(".tip").remove()
})
}
)
</script>
</body>
</html>