{"id":1269,"date":"2014-12-17T02:56:03","date_gmt":"2014-12-17T02:56:03","guid":{"rendered":"http:\/\/www.rbknrbkn.com\/workandprogress\/?p=1269"},"modified":"2014-12-17T02:56:03","modified_gmt":"2014-12-17T02:56:03","slug":"online-wayfinding-system-version-1-0","status":"publish","type":"post","link":"https:\/\/www.rbknrbkn.com\/workandprogress\/?p=1269","title":{"rendered":"Online Wayfinding System [Version 1.0]"},"content":{"rendered":"

(This post is a place for my concluding remarks for the online wayfinding system project that I started this semester. It is also the starting point for my work on it in the next semester.)<\/em><\/p>\n

In this project, I ventured to explore, design, and implement the concept of an online wayfinding system.<\/p>\n

\"pds-final-presentation.002\"<\/a><\/p>\n

\"pds-final-presentation.003\"<\/a><\/p>\n

 <\/p>\n

I started the process by trying to understand the problem further, including circulating a questionnaire about the tabs that the respondents had open in their browser window.<\/p>\n

\"pds-final-presentation.004\"<\/a><\/p>\n

The problem, I found out, has three main challenging facets.<\/p>\n

\"pds-final-presentation.005\"<\/a><\/p>\n

In particular, the representational aspect of the problem can be distilled by considering maps and graphs as two views of the same underlying data constructs. Each view has its own benefits, as shown below. Which of them is best for the problem at hand?<\/p>\n

\"pds-final-presentation.010\"<\/a><\/p>\n

To explore the problem further, I followed a process that is abbreviated below throughout this semester.<\/p>\n

\"pds-final-presentation.007\"<\/a> \"pds-final-presentation.008\"<\/a> \"pds-final-presentation.009\"<\/a><\/p>\n

Additionally, I found out that it is important to understand what a location is when we speak about an online session. There is the obvious, topographical definition of the term, where a web page is part of a domain hosted in a server. More pragmatic, however, is the view of a location as a point of time in a browsing session, as a particular page-visit<\/i>.<\/p>\n

\"pds-final-presentation.012\"<\/a><\/p>\n

From there, I started the process of designing the dynamic “map” I wanted to implement.<\/p>\n

\"pds-final-presentation.013\"<\/a><\/p>\n

I worked on defining a modular visual language that allows for showing each visit according to its connectivity to other visits.<\/p>\n

In terms of data structures, I experimented with a few. A graph, at least as a data structure, is the best fit for the job.<\/p>\n

\"pds-final-presentation.014\"<\/a><\/p>\n

Next was mapping the parameters of visits to their visual representations. I experimented with a few combinations.<\/p>\n

\"pds-final-presentation.016\"<\/a><\/p>\n

The final product, at least in its current iteration, is a Chrome extension I created using JavaScript, jsnetworkx, d3js, jQuery, among other framework.\"Screen<\/a><\/p>\n

 <\/p>\n

The main map view is supplemented with a legend. The extension listens passively to the user’s activities, and accordingly categorises each action into a location in the current session, or in a new one.<\/p>\n

As you progress into a browsing session, forks and intersections are introduced to the map view. The size of each node is proportional to the number of paths it led to.<\/p>\n

\"Screen<\/a><\/p>\n

The user also has the ability to “annotate” each node by selecting an element from the page, whether an image or a text, to be added to the node as a form of note-taking and highlighting for future reference.<\/p>\n

\"Screen<\/a><\/p>\n

The below is a rough estimation of how I’ve spent my time in this project. How I wish it was is more of the pink stuff and less of blue ones.<\/p>\n

\"pds-final-presentation.017\"<\/a><\/p>\n

 <\/p>\n

What about the future, you ask? The future sounds exciting.<\/p>\n

\"pds-final-presentation.018\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

(This post is a place for my concluding remarks for the online wayfinding system project that I started this semester. It is also the starting point for my work on it in the next semester.) In this project, I ventured to explore, design, and implement the concept of an online wayfinding system.   I started […]<\/p>\n","protected":false},"author":1,"featured_media":1272,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-project-development-studio"],"_links":{"self":[{"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/posts\/1269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1269"}],"version-history":[{"count":5,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/posts\/1269\/revisions"}],"predecessor-version":[{"id":1292,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/posts\/1269\/revisions\/1292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=\/wp\/v2\/media\/1272"}],"wp:attachment":[{"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rbknrbkn.com\/workandprogress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}