I’ve been working since the last update on my demo idea for the ISWC 2010, and it is finally to the point where it has some real functionality. I have finished making the browsing sections, and will probably spend time tomorrow trying to add some sort of visualization to part of it. I don’t think I’ll have time to implement and test the searching that I wanted to have, but I did add some anchor links to try to help the user quickly find what they need that way within the full results.

ISWC 2010 Demo Page

Here is a sample screenshot from the demo, I’ll be talking about how the different parts work, and what those parts are. In general, the form manipulates the GET variables in the URL, which are used to both determine the query that is used as well as the specific parsing/display actions that are performed. Each main page has an organized listing that is the parsed output of the query, and each is linked to an information page containing all of its information, with all links made active for easy navigation. The original plan was three-fold, with browsing, searching, and visualization. Only browsing is done right now, but I’m hoping to at least get one visualization done by Friday’s All-Hands Meeting.

The first element is a simple drop-down menu, which allows filtering by either People, Papers, Organizations, or Times. The default view is Times, which displays the list of all the events, sorted by day/time. This was one of my key goals for this demo, and although it is a different form than I had planned (due to time constraints), I am happy with how it came out.  It is clearly readable, although it might not be immediately clear where overlaps occur.  I had originally wanted to have it in a visualization form, where overlaps could be easily seen.

When on the Times menu, there is also a second drop-down menu, which contains a list of all the different start times that are listed. This is so the user can select one and immediately go to that section.  A similar setup is used for the other sections, with small differences.

The People, Papers, and Organization sections are sorted by alphabetical order.  Also, People are organized in groups of four per row, Organizations with two per row, and Papers with just one per row; this was just to keep the size of the page more compact and easier to read.  Alphabetical anchor-points are used in all three sections to enable fast navigation by users.

In the previous screenshots, you might have noted that all the results are linked.  All of them link to a new window which displays all of the information available in the triple store about that particular thing.  I had planned on created a nicer format for the output, but did not have time to do so.  However, I did implement a lot of parsing to try to make it more readable, including making the links active and making people’s depiction-tagged links automatically load in <img> form.

There were a few points in the process where I spent a large amount of time figuring out.  The first was when I was trying to figure out how to parse the query results to get all the information in a way that let me easily output what I wanted (append &debug=results onto the end of any of the pages to see the raw query results, if you’d like).  This took me until around Sunday, when I finally started to write the code to simply output all the triples in a simple form so I could further decide how I actually wanted to structure everything (there were a lot of ideas that were just simplified down to simple listings later due to time).  Only two of these brainstorm areas are left (the others were deleted or turned into the current pages), but you can see them by editing the url to have filter=types (for a listing of all instances and their type) or filter=events (for a listing of all event-related data).

Today was the biggest section of work, where I wrote the code for the information display pages as well as converting most of the brainstorm areas into the listings with the anchors and nice looking formatting.  The next step would be to add visualizations to all the pages, so I was hoping to make a visualization tomorrow for organizations.  This would be showing the locations of each of them using their long/lat information and the Google Maps API, which Jie was hoping someone would do.  The search aspect will definitely not be reached in time, so I’ll just focus on visualization(s) tomorrow.

As for the code structure itself, it started out pretty organized but mutated rather horribly over the course of today, since I was more concerned with getting everything working.  It is divided into a few sections, which from top-to-bottom looks like: the big code block for the information pages, the form, all the query generation code, the first part of the display output, the giant parsing section that loads/processes results and sets up the output, and the final display section.  All of the code is pretty simple by itself, it’s just conditionals/loops mixed with a lot of string parsing/concatenation as well as a bunch of SPARQL for the queries, but gets very complicated to put together to work the way you want.  I won’t be posting snippets right now since the code and queries are still in flux (and super disorganized right now…there’s debug stuff and code that’s no longer used scattered everywhere).

Advertisements