-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
164 lines (152 loc) · 8.33 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
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>D3 Stacked Bar Chart: MassPort Carriers</title>
<!-- CSS Styling -->
<link rel='stylesheet' href='style.css'>
<!-- Favicons -->
<link rel='apple-touch-icon' sizes='180x180' href='favicons/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicons/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicons/favicon-16x16.png'>
<link rel='manifest' href='favicons/site.webmanifest'>
<link rel='shortcut icon' href='favicons/favicon.ico'>
<meta name='msapplication-TileColor' content='#da532c'>
<meta name='msapplication-config' content='favicons/browserconfig.xml'>
<meta name='theme-color' content='#ffffff'>
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id='forkongithub'><a href='https://masonleon.github.io/d3-stacked-bar-massport-carriers/'>Fork me on GitHub</a></span>
<!-- Writeup -->
<div class='content-column'>
<h1>D3 Stacked Bar Chart: MassPort Carriers</h1>
<p>
This d3.js visualization was created by Mason Leon as an assignment for
<a href='https://northeastern.instructure.com/courses/63405'>
CS 7250 S21 Information Visualization: Theory and Applications
</a>, taught by
<a href='https://cody.khoury.northeastern.edu/'>
Prof. Cody Dunne
</a>,
<a href='https://visualization.khoury.northeastern.edu/'>
Data Visualization @ Khoury
</a>,
<a href='https://www.khoury.northeastern.edu/'>
Northeastern University
</a>.
</p>
<h3>MassPort Container Carriers by Alliance FY 2014 - FY 2020</h3>
<p>
As container carriers have consolidated services through mergers, acquisitions, and alliance restructuring, the number of carrier customers hailing the Massachusets Port Authority have waxed and waned
over the past few years.
The connectivity of a port often is derived from the distinct service pairings to other ports provided by ocean carrier and alliance group.
Although alliances largely offer cost-savings for the carrier, they can provide some benefits to the the shipper.
However, with fewer unique carriers and services limited to a select group of alliance pairings, customer choice is limited.
This type of information is important to monitor for economic development purposes such as marketing the services available to the region for potential shippers or for supply chain managers seeking alternative routings from the congested NY/NJ gateway.
<br>
<br>
The dataset used in the visualization below was derived from <a href='http://www.massport.com/massport/finance/financial-publications/comprehensive-annual-financial-report-cafr/'>MassPort Annual Financial Reports</a> and combined with other information relating to milestones in major global container carrier alliance formation.
The data was shaped into a "wide" format to allow for use of a stacked bar chart.
This dataset consists of continuous quarterly information, categorical information representing the alliance, and numerical quanitiative data for the carrier counts per alliance.
I utilized this chart type because it provides a clear view of the total number of unique carriers while also demonstrating the sizes and names of the alliance sub groupings with a color channel and interaction event.
The user may inspect a sub element of each quarter to examine the number of carriers participating in that alliance.
</p>
<!-- Visualization goes here -->
<div class='vis-holder' id='vis1'></div>
<h2>Data Sources</h2>
<ul>
<li><a href='http://www.massport.com/media/iwvjsnjz/fy2020_cafr.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2020, June 30, 2019 - June 30, 2020</a>
Table S-16 Port of Boston Principal Customers Fiscal Year 2020, page 162
</li>
<li><a href='http://www.massport.com/media/3425/mpa-fy19-cafr-final.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2019, June 30, 2018 - June 30, 2019</a>
Table S-16 Port of Boston Principal Customers Fiscal Year 2019, page 159
</li>
<li><a href='http://www.massport.com/media/3029/mpa-fy18-cafr-final.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2018, June 30, 2017 - June 30, 2018</a>
Table S-16 Port of Boston Principal Customers Fiscal Year 2018, page 159
</li>
<li><a href='http://www.massport.com/media/2641/mpa-fy17-cafr-final.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2017, June 30, 2016 - June 30, 2017</a>
Table S-16 Port of Boston Principal Customers Fiscal Year 2017, page 147
</li>
<li><a href='http://www.massport.com/media/1354/mpa-fy16-cafr-final.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2016, June 30, 2015 - June 30, 2016</a>
Table S-16 Port of Boston Principal Customers Fiscal Year 2016, page 141
</li>
<li><a href='http://www.massport.com/media/1353/mpa-fy15-cafr-final.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2015, June 30, 2014 - June 30, 2015</a>
Table S-14 Port of Boston Principal Customers Fiscal Year 2015, page 125
</li>
<li><a href='https://www.massport.com/media/1352/fy2014_cafr.pdf'>
Massachusetts Port Authority, Comprehensive Annual Financial Report, FY 2014, June 30, 2013 - June 30, 2014</a>
Table S-14 Port of Boston Principal Customers Fiscal Year 2014, page 119
</li>
<li><a href='https://www.massport.com/conley-terminal/shipping-directory/ocean-carrier-directory/'>
Massachusetts Port Authority, Port of Boston Shipping Directory</a>
Ocean Carriers
</li>
<li><a href='https://porteconomicsmanagement.org/pemp/contents/part1/ports-and-container-shipping/alliances-container-shipping/'>
Alliances in Container Shipping</a>
Theo Notteboom, Athanasios Pallis and Jean-Paul Rodrigue (2021) Port Economics, Management and Policy
</li>
<li><a href='https://www.intermodalexpo.com/sites/default/files/documents/2018-10/IU_OceanAlliances-AnIntroduction_EXPO2018.pdf'>
Alliance Evolution, 1996 - 2017</a>
Intermodal Association of North America, IANA Intermodal Expo 2018 Intermodal University, Ocean Alliances - An Introduction, slide 9
</li>
</ul>
<h2>Acknowledgments</h2>
<ul>
<li><a href='https://d3js.org/'>
D3: Data-Driven Documents</a>
by Mike Bostock is used for manipulating the DOM to create visualizations.
</li>
<li><a href='https://codepo8.github.io/css-fork-on-github-ribbon/#'>
Pure CSS responsive 'Fork me on GitHub' ribbon</a>
by Chris Heilmann is used to create the banner that links back to the source code repository.
</li>
<li><a href='https://www.d3-graph-gallery.com/graph/custom_axis.html'>
Custom Axis</a>
d3 Graph Gallery
</li>
<li><a href='https://www.d3-graph-gallery.com/graph/line_several_group.html'>
Multi Line Chart</a>
d3 Graph Gallery
</li>
<li><a href='https://observablehq.com/@d3/grouped-bar-chart'>
Grouped Bar</a>
d3 ObservableHq
</li>
<li><a href='https://observablehq.com/@d3/stacked-bar-chart'>
Stacked Bar</a>
d3 ObservableHq
</li>
<li><a href='https://observablehq.com/@d3/d3-scaleordinal'>
Scale Ordinal Colors</a>
d3 ObservableHq
</li>
<li><a href='https://observablehq.com/@d3/line-chart'>
Line Chart</a>
d3 ObservableHq
</li>
<li><a href='https://observablehq.com/@d3/multi-line-chart'>
Multi Line Chart</a>
d3 ObservableHq
</li>
<li><a href='https://stackoverflow.com/questions/20947488/d3-grouped-bar-chart-how-to-rotate-the-text-of-x-axis-ticks'>
Grouped Bar X Axis Ticks</a>
Stack Overflow
</li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<!-- Load the d3.js library( version 6 minified) -->
<script src='./lib/d3.v6.1.1/d3.js'></script>
<script src='./js/main.js'></script>
</body>
</html>