forked from mikedewar/d3talk
-
Notifications
You must be signed in to change notification settings - Fork 0
/
axes.html
77 lines (66 loc) · 2.79 KB
/
axes.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
<!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">
xAxis = d3.svg.axis().scale(time_scale)
yAxis = d3.svg.axis().scale(value_scale).orient("left")
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)
</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");
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");
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)
}
)
</script>
</body>
</html>