-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
201 lines (172 loc) · 10.4 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Changing Trends in Business and Leisure Travel</title>
<meta name="description" content="CS 498 - Data visualization - Assignment 7.3.3">
<meta name="keywords" content="HTML, CSS, XML, JavaScript, D3">
<meta name="author" content="Sezgin Kucukcoban">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cairo">
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<h1 class="title"> Changing Trends in Business Travel </h1>
<div>
<img src="images/main.png" alt="Uber Taxi Lyft" style="width:300px;height:auto;">
</div>
<div>
Business travel constitutes one of the largest industries in the United States. There are several transportation modes available to business travelers. With the interaction of technology into transportation, dramatic changes have occurred in how people travel for their business trips. Over the last few years, ride-hailing has started to be the most preferred mode among business travelers while there has been a dramatic decrease in the use of rental cars and taxis. In this visualization, an interactive slideshow narrative structure has been used to go over this dramatic mode shift using the percentage of ground transportation business expenses filed by Certify customers from 2014 to 2018. Using the buttons provided below, you can navigate between the scenes and can learn more by hovering over the bars in the chart.
</div>
<div id="btn-group">
<button class="button" id="button" onclick="hideChart()"> Info </button>
<button class="button" id="button" value=2014 onclick="showChart(this)"> 2014 </button>
<button class="button" id="button" value=2015 onclick="showChart(this)"> 2015 </button>
<button class="button" id="button" value=2016 onclick="showChart(this)"> 2016 </button>
<button class="button" id="button" value=2017 onclick="showChart(this)"> 2017 </button>
<button class="button" id="button" value=2018 onclick="showChart(this)"> 2018 </button>
</div>
<div id="info" style="display: none">
<h4 style="margin-top:16px">About:</h4>
<p id="info-note"> CS498 - Data Visualization Assignment (sezgink2) [8/4/2019]</p>
<h4 style="margin-top:16px">Data:</h4>
<p id="info-note"> The Certify SpendSmart™ Report for Q1 2018 identifies the latest business travel and entertainment expense spending trends analyzing user transaction data collected from its cloud-based system. Click <a href="https://www.certify.com/Certify-SpendSmart-Report-Story-Infographic-Q1-2018.aspx">here</a> for details.</p>
<h4 style="margin-top:16px">Scenes:</h4>
<p id="info-note">There is a total of 5 scenes excluding the information on the visualization. Each scene provides information about the percent share of ground transportation modes used in business trips. The scenes are organized chronologically to allow the user to observe trends in traveler choice of transportation mode.</p>
<h4 style="margin-top:16px">Annotations:</h4>
<p id="info-note">The annotations are used to provide additional insights for the user. The annotations focus on important shifts in travel mode and allow user to gain an overall understanding of the scene before diving into the details with tooltips. The annotations are kept on the top-right corner of the chart and just the contents are replaced between scenes so that the user does not feel disoriented. The annotations do not change within the scene. The color scheme for the annotations follow light background and dark text based on the theme colors. The annotations display automatically for each scene and no action is required from the user.</p>
<h4 style="margin-top:16px">Parameters:</h4>
<p id="info-note">The navigation buttons provided at the top left of the page help the user to navigate through scenes. Each button represents a year and clicking on each of these buttons will switch the year parameter, and the bar chart will change accordingly. Changes resulted from switching the year parameter include the height of bars that are displayed, the content of the annotation which provides additional insights for the user for that year. Buttons change the state of the page based on the year parameter.</p>
<h4 style="margin-top:16px">Triggers:</h4>
<p id="info-note">User can click on the buttons at the top left of the page to switch between the scenes, and the way user can know about this feature is that the buttons will change their colors by hovering the mouse over them. The mouse icon will also turn into a hand shape to tip the user that these buttons are clickable. In each scene, user can also hover the mouse over the bars to see detailed information as tooltip. This information includes the real percentage of that travel mode in the corresponding year. At the end of the introduction section, the instructions are provided for the user to navigate through the scenes and to hover the mouse over the bars to see the tooltip.</p>
</div>
<svg width="600" height="400" id="barChart">
<text class="ann" id="annotation" x="200" y="30" height="100px" width="350px" word-wrap="break-word" fill=#a9a9a9></text>
</svg>
<script>
document.getElementById("barChart").style.display = "none";
document.getElementById("annotation").style.display = "none";
document.getElementById("info").style.display = "none";
function hideChart() {
document.getElementById("barChart").style.display = "none";
document.getElementById("annotation").style.display = "none";
document.getElementById("info").style.display = "block";
d3.select("svg").select("g").selectAll(".bar").data([]).exit().remove();
}
function showChart(year) {
document.getElementById("barChart").style.display = "block";
document.getElementById("annotation").style.display = "block";
document.getElementById("info").style.display = "none";
// data definition
const items = [[2104,55,37,8],
[2015,50,24,25],
[2016,40,14,46],
[2017,31,10,59],
[2018,23,6,71]];
const labels = ["Rental Car", "Taxi", "Ride-Hailing"]
var ind = year.value - 2014;
var selYear = year.value;
var data = [items[ind][1],
items[ind][2],
items[ind][3]];
// svg margin and plot area
var svg = d3.select("svg"),
margin = {top: 40, right: 40, bottom: 60, left: 60},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
// setup x and y axis
var xs = d3.scaleBand().domain(labels).range([0, width]);
var ys = d3.scaleLinear().domain([0,100]).range([height, 0]);
var g = svg.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");
// clear axis
d3.selectAll(".axis").remove();
d3.selectAll(".axisTitle").remove();
// x axis
g.append("g")
.attr("class","axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xs));
// y axis
g.append("g")
.attr("class","axis")
.call(d3.axisLeft(ys).ticks(10));
// x axis title
g.append("g").append("text")
.attr("class","axisTitle")
.attr("transform","translate(" + (width / 2) + "," + (height + 0.75*margin.bottom) + ")")
.style("text-anchor","middle")
.style("font","red")
.text("Mode of Transportation");
// y axis title
g.append("g").append("text")
.attr("class", "axisTitle")
.attr("transform","translate("+ (0 - 0.75*margin.left) + "," + (height / 2) + ") rotate(-90)")
.style("text-anchor","middle")
.style("color","white")
.text("Market Share (%)");
// tooltip
var tooltip = d3.select("body")
.append("div")
.attr("class", "toolTip");
d3.selectAll(".bar").remove();
// bars of the chart
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.on("mousemove", function(d,i){
tooltip.style("left", d3.event.pageX + 5 + "px")
.style("top", d3.event.pageY + 5 + "px")
.html(tooltipContent(d,i))
.style("display", "block");
})
.on("mouseout", function(d){
tooltip.style("display", "none");
})
.attr("x", function(d,i) { return xs(labels[i]) + 10; })
.attr("y", function(d,i) { return ys(d); })
.attr("width", xs.bandwidth()-20)
.attr("height", function(d) { return height - ys(d); }) ;
if (year.value == 2014) {
desctext = "Rental cars reached to their highest peak for" +
'<tspan x="200" y="55">business travel.</tspan>';
}
else if (year.value == 2015) {
desctext = "The use of ride-hailing services has started" +
'<tspan x="200" y="55">to increase while the use of rental cars and</tspan>' +
'<tspan x="200" y="80">taxis have decreased.</tspan>';
}
else if (year.value == 2016) {
desctext = "The share of ride-hailing in business travel" +
'<tspan x="200" y="55">has exceeded the other two modes for the first</tspan>' +
'<tspan x="200" y="80">time.</tspan>';
}
else if (year.value == 2017) {
desctext = "Ride-hailing has continued to increase," +
'<tspan x="200" y="55">governing almost 60% of ground transportation</tspan>' +
'<tspan x="200" y="80">modes used in business travel.</tspan>';
}
else if (year.value == 2018) {
desctext = "In four years, the use of rental cars and"+
'<tspan x="200" y="55">taxis have dropped down by 32% each,</tspan>'+
'<tspan x="200" y="80">while ride-hailing has gone up by 63%.</tspan>';
};
// extra info
var anno = d3.select("svg")
.selectAll(".ann")
anno
.html(desctext)
.style("display", "block")
.attr("color","red");
}
function tooltipContent(d,i) {
if (i == 0) {tmp = "Rental: " + d + "%";}
if (i == 1) {tmp = "Taxi: " + d + "%";}
if (i == 2) {tmp = "Ride-Hailing: " + d + "%";}
return tmp;
}
</script>
</body>
</html>