forked from NEU-DS-4200-S20/s-l-project-sbn4
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (112 loc) · 9.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<!-- Metadata -->
<head>
<meta charset="utf-8">
<!-- Title -->
<title>Project Team SBN4: Connecting Members of SBN, DS 4200 S20</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">
<style type="text/css">
#map {
width: 615px;
height: 375px;
}
.town {
fill: #ccc;
}
</style>
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id="forkongithub"><a href="https://github.com/NEU-DS-4200-S20/s-l-project-sbn4">Fork me on GitHub</a></span>
<!-- Your writeup goes here -->
<div class = "content-column">
<h1>Project Team SBN4: Connecting Members of SBN, DS 4200 S20</h1>
<p><strong>Jack Baxter</strong>, <strong>William Conti</strong>, <strong>Xuyang Li</strong>, <strong>Ken Ma</strong></p>
<p>Service-Learning Course Project as part of <a href="https://canvas.instructure.com/courses/1781714">DS 4200: Information Presentation and Visualization</a>, taught by <a href="https://www.eecs.tufts.edu/~dcashm01/">Prof. Dylan Cashman</a>, <a href="https://visualization.khoury.northeastern.edu/">Data Visualization @ Khoury</a>, <a href="https://www.khoury.northeastern.edu/">Northeastern University</a>.</p>
<h1>Motivation</h1>
<p>The Sustainable Business Network (SBN) is a non profit organization aiming to create a community capable of sustainable local production and demand. This visualization will showcase the current members of the network, including types of members and a geographic representation of member distribution. It will assist in connecting not only local food buyers and vendors, but also members in fields such as financial services or energy and utilities within SBN.</p>
<p>This page will assist SBN in informing potentially interested people and help them learn about the members of SBN. As a local business network, SBN provides venues for a complex group of local businesses, ranging from commercial services to clean energy. When browsing through the visualizations we present, the user would be able to examine what kind of business are there, as well as where are they located if they have a physical location. They could also retrieve contact information of the business, such as a phone number or a directory to their websites.</p>
<h1>Visualization</h1>
<p><em>Interactive Visualization</em></p>
</div>
<!-- Your visualization here -->
<div class="vis-holder">
<!-- Change viewbox to whatever you want, e.g. "0 0 1000 6000" This determines your aspect ratio and coordinate system -->
<!-- Delete all the sample SVG code below after the viewbox to before the closing tag. Populate this part of the SVG with D3. -->
<h1 align="center"> Filter Treemap, Map and Table by selecting Map zip code and/or business type</h1>
<svg id="vis-svg"
preserveAspectRatio="xMidYMid meet" class="marks" viewBox="0 0 1500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Don't delete the closing tag! -->
<div class="treemap-holder" align="right" id="treemap"></div>
<h1 align="center"> Filter Treemap and Map by using Table and highlighting rows </h1>
<div class="table-holder" id="table"></div>
</svg>
</div>
<!-- Your writeup goes here -->
<div class = "content-column">
<h1>Demo Video</h1>
<p><em>Embedded MP4 demo video using the HTML5 <video> tag:</em></p>
<video controls width="100%">
<source src="files/screen-capture.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="http://www.ccs.neu.edu/home/cody/courses/shared/d3-flexible-transitions.mp4">link to the video</a> instead.</p>
</video>
<h1>Visualization explanation</h1>
<p><em>Final visualization screenshots (PNG images), design justifications, UI walk-through, and linked presentation slides.</em></p>
<h2>Treemap</h2>
<img src="images/treemap.png" alt="treemap">
<p>The treemap serves as a demonstration of categories of services available from members of SBN. A user could click a specific area of interest to show businesses from that category, such as members involved within the legal services industry; the main map will then filter to show only businesses of that type, and the table will be filtered to show only this category of businesses.</p>
<h2>Geographical Map</h2>
<img src="images/map.png" alt="map">
<p>The geographical map of massachusets will allow the user to see the location of a vendor, if it has one. The map used is a map of MA centered around Greater Boston Area, since this is where the majority of SBN's members located.</p>
<p>Initially, location of all SBN members will be presented on the map. If the user select a category from the treemap, the locations where a vendor of that type is located in will be highlighted. If rows of the table is selected, location of those vendors will also be highlighted. This map will provide the user an impression of where the members of SBN are located.</p>
<h2>Table</h2>
<img src="images/table.png" alt="table">
<p>The scrollable table shows a detailed collection of all information for a vendor, including the specific product or service, the address and the zip code, the phone number as well as the website. The table will serve as a directory for users to visit or contact the vendor of their greatest interest. The user could also select rows of table in order to view the location of the vendors on the map.</p>
<h2>Static Example: Selecting all shops for one category</h2>
<img src="images/static_ex1.png" alt="static ex1">
<p>As the user click on a category (Light blue - Food Product for this case), areas with this category will be highlighted on the map, table will also be filtered to all vendors of this category.</p>
<h2>Static Example: Selecting shops for a location</h2>
<img src="images/static_ex2.png" alt="static ex2">
<p>If the user click on the map (the circled area), the table will be filtered and show members located at that area. The categories of members will also be hightlighted on the treemap.</p>
<h2>Static Example: Selecting shops from table</h2>
<img src="images/static_ex3.png" alt="static ex3">
<p>When the user select rows from the table, the locations of members selected will be highlighted on the map. This will allow the user to quickly get an impression of the members' geographical information.</p>
<h1>Data Analysis</h1>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vSsMIoOZ4qGlQtdqAW05vQtOFdiRBk9yFE7_gF07nM2G3jv_xLOKjZNeSiFD0dhRJ3VIHM0C6YlE4X-/pub?embedded=true"></iframe>
<h1>Task Analysis</h1>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vS0AvMaPEkXjlYfOD9DpVL4k8KLVzL1cSo0_9ebQlv-ZCrSFtPsGOrEyn3fybCCHa9kWp3aoATu4gA1/pub?embedded=true"></iframe>
<h1>Design Process</h1>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vTnFJ66WHfS6FL9pk8O1qYal_NChnsIakYKefQnsmb1zr3GTaNFyXpU9Rx8Qj9tA92gB60YBq4G21pB/pub?embedded=true"></iframe>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQxk6vkdbRwIDv4RdSO6PD7VQ1ZFu5q9NXugF1BYgcujs57xNgw7Mjp3E-xI_R3qxiop8xDyEa2SZwK/pub?embedded=true"></iframe>
<h1>Conclusion</h1>
<p>The above visualizations allows the users to achieve several domain tasks, such as identifying informations of a member providing certain type of service; it also allows the potential members of the SBN to examine the current network presented, both the geographical connection as well as the categorical diversity. It could also provide the SBN with a platform to showcase the members within the network. We employed ample amount of multi-directioned brushing and linking, allowing the users to interact with the visualization, carry out searches based on their needs.</p>
<p>For future work, the interaction could be enhanced. For instance, it would be helpful if the user could zoom into a specific area of MA. With a dynamic geographic map, the user could avoid certain obstacles, such as the location of the vendor is sometimes too small and might be hard to see from the bigger map. Furthermore, the map could be more specific, providing more detailed representation down to street address or present the density of members in an area with chromatic color.</p>
<h1>Acknowledgments</h1>
<ul>
<li><a href="https://d3js.org/">D3: Data-Driven Documents</a> by Mike Bostock.</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.</li>
<li><a href="https://sbnmass.org/">Sustainable Business Network of Massachusetts</a></li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src="lib/d3.v4/d3.v4.js"></script>
<script src="js/visualization.js"></script>
<script src="js/treemap.js"></script>
<script src="js/table.js"></script>
<script src="js/map.js"></script>
<script src="js/legend.js"></script>
</body>
</html>