-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (125 loc) · 4.62 KB
/
index.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
svg {
font-size: 14px;
}
rect.background {
fill: none;
pointer-events: all;
}
.axis {
shape-rendering: crispEdges;
}
.axis path, .axis line {
fill: none;
stroke: #000;
stroke-width: .5px;
}
.chart rect {
fill: steelblue;
}
.chart-text-left {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
.chart-text-right {
fill: black;
font: 10px sans-serif;
text-anchor: begin;
}
.date-label {
font: 10px sans-serif;
fill: black;
text-anchor: begin;
}
.tick text {
font: 10px sans-serif;
}
body {
font-family: "Helvetica" sans-serif;
}
</style>
</head>
<body>
<h2>
Home-Work Journey Times
</h2>
<svg class="chart">
</svg>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script src="jquery-1.8.1.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="jquery.xml2json.js"></script>
<script type="text/javascript">
var width = document.getElementsByTagName("body")[0].clientWidth;
var barHeight = 17;
d3.xml("home-work-journey-timings.xml", function(xml){
var journeys = parseXML(xml); // convert to JSON
// console.dir(journeys);
journeys.sort(function(a,b){ return d3.descending(new Date(a.date), new Date(b.date));});
// console.dir(journeys); //should be according to descending journey.date elements
var beginnings = d3.extent(journeys, function(d){ return moment(d.go.starttime, "HH:mm:ss").toDate();});
var endings = d3.extent(journeys, function(d){ return moment(d.return.endtime, "HH:mm:ss").toDate();});
// console.log(beginnings[0]);
// console.log(endings[1]);
// timescale converts a Date object into a pixel position
var timescale = d3.time.scale()
.domain([moment("07:00:00", "HH:mm:ss").toDate(), endings[1]])
.range([0, width]);
// add time axis
var xaxis = d3.svg.axis()
.scale(timescale)
.orient('top')
// dimension the svg chart element
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", barHeight * (journeys.length + 1));
// add some svg magic:
var bar = chart.selectAll("g")
.data(journeys)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + (20.0 + (i * barHeight)) + ")"; }); // keep 20 pixels space for drawing the axis later on
// draw the rectangles
bar.append("rect")
.attr("x", function(d){ return timescale(moment(d.go.starttime, "HH:mm:ss").toDate());})
.attr("width", function(d){
var x = timescale(moment(d.go.starttime, "HH:mm:ss").toDate());
var w = timescale(moment(d.go.endtime, "HH:mm:ss").toDate()) - timescale(moment(d.go.starttime, "HH:mm:ss").toDate());
return w;
if(x + w < width){
return w;
}else{
return width - x - 5;
}
})
.attr("height", barHeight - 1);
bar.append("rect")
.attr("x", function(d){ return timescale(moment(d.return.starttime, "HH:mm:ss").toDate());})
.attr("width", function(d){ return timescale(moment(d.return.endtime, "HH:mm:ss").toDate()) - timescale(moment(d.return.starttime, "HH:mm:ss").toDate());})
.attr("height", barHeight - 1);
// add some text
bar.append("text")
.attr("x", function(d) { return 5;
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d){ return d.date;})
.classed("date-label", true);
// draw time axis
var xaxis_el = chart.append("g")
.attr("transform", "translate(0," + 17 + ")")
.attr("class", "axis")
.call(xaxis);
})
function parseXML(xml){
var a = $.xml2json(xml); //expecting an XML file with multiple journeys. Only 1 journey element will throw an error.
return a.journey;
}
</script>
</body>
</html>