/
nasa.html
89 lines (71 loc) · 3.16 KB
/
nasa.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
<!DOCTYPE html>
<meta charset="utf-8">
<script src="d3.min.js"></script>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script>
var milestones = [{date: new Date(1977), text: "Mariner Jupiter/Saturn 1977 is renamed Voyager"},
{date: new Date(1977, 8, 20), text: "Voyager 2 launched from Kennedy Space Flight Center"},
{date: new Date(1977, 9, 5), text: "Voyager 1 launched from Kennedy Space Flight Center. Voyager 1 returns first spacecraft photo of Earth and Moon"},
{date: new Date(1979, 3, 5), text: "Voyager 1 makes its closest approach to Jupiter"},
{date: new Date(1979, 7, 9), text: "Voyager 2 makes its closest approach to Jupiter"},
{date: new Date(1980, 11, 12), text: "Voyager 1 flies by Saturn. Voyager 1 begins its trip out of the Solar System"},
{date: new Date(1981, 8, 25), text: "Voyager 2 flies by Saturn"},
{date: new Date(1982), text: "Deep Space Network upgrades two 26-m antennas to 34-m"},
{date: new Date(1986, 1, 24), text: "Voyager 2 has the first-ever encounter with Uranus. Deep Space Network begins expansion of 64-m antennas to 70-m"},
{date: new Date(1987), text: 'Voyager 2 "observes" Supernova 1987A'},
{date: new Date(1988), text: "Voyager 2 returns first color images of Neptune"},
{date: new Date(1989, 8, 25), text: "Voyager 2 is the first spacecraft to observe Neptune. Voyager 2 begins its trip out of the Solar System below the ecliptic plane"},
{date: new Date(1990, 1, 1), text: "Begins Voyager Interstellar Mission"},
{date: new Date(1990, 2, 14), text: "Last Voyager Images - Portrait of the Solar System"},
{date: new Date(1998, 2, 17), text: "Voyager 1 passes Pioneer 10 to become the most distant human-made object in space"},
{date: new Date(2004, 12, 15), text: "Voyager 1 crosses Termination Shock"},
{date: new Date(2007, 9, 5), text: "Voyager 2 crosses Termination Shock"}/*,
{date: "TBD", text: "Voyager enters Interstellar Space"}*/];
var margin = {top: 20, right: 10, bottom: 30, left: 50};
var width = 940 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
// INITIALIZING THE PLOT //
var xScale = d3.time.scale().domain([new Date(1977), new Date(2013)]).range([0, width]);
var yScale = d3.scale.linear().domain([0, 1]).range([height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
var line = d3.svg.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(Math.random()); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
svg.append("path")
.datum(milestones)
.attr("class", "line")
.attr("d", line);
</script>
</div>