forked from mikedewar/d3talk
-
Notifications
You must be signed in to change notification settings - Fork 0
/
scale_1.html
58 lines (55 loc) · 2.15 KB
/
scale_1.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.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.select("#chart")
.append("svg")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.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)
</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([20,730])
value_scale = d3.scale.linear()
.domain([0, d3.max(data, function(d){return d.yes_rsvp_count})])
.range([290, 10])
d3.select("#chart")
.append("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")
}
)
</script>
</body>
</html>