forked from bitlyscience/bitlyscience.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
fermi.html
66 lines (54 loc) · 1.63 KB
/
fermi.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
<html>
<head>
<script type="text/javascript" src="static/js/d3.v2.js"></script>
<script>
function draw(data) {
var margin = 30,
width = 700,
height = 300;
step = 25
y_extent = d3.extent(data, function(d){return d.miles})
var y_scale = d3.scale.linear()
.range([height-margin, margin])
.domain(y_extent)
x_extent = d3.extent(data, function(d){return d.week})
var x_scale = d3.scale.linear()
.range([margin, width-margin])
.domain(x_extent)
"use strict";
d3.select(".science_graph")
.append('svg')
.attr('width', width)
.attr('height', height)
.selectAll("div.bar")
.data(data)
.enter()
.append('rect')
.attr('x', function(d) { return x_scale(d.week) })
.attr('y', function(d) { return y_scale(d.miles) })
.attr('height', function(d) { return height-y_scale(d.miles)})
.attr('width', step)
}
</script>
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cantata+One' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
d3.json('data/marathon.json', draw);
</script>
<div class="science_title">
<h1>science @ bitly</h1>
</div>
<div class="science_graph"></div>
<div class="blerb">
<h2>check out our latest blog post >> <a href="http://blog.bitly.com">time is on your side</a></h2>
</div>
<div class="projects">
<h2>lab reports</h2>
<p>how do i pull in bloggy bits?</p>
<p>also add best charts</p>
</div>
</body>
</html>