BSC COMPUTER SCIENCE

SENIOR HONORS PROJECT

VISUALIZATION of MATERIAL QUALITIES OF A COLLECTION

Technologies used: JavaScript, D3

Bob Gibson’s Anthologies of Speculative Fictions are a collection of hand-crafted literary works with vastly different aesthetics and character. The anthologies collate thousands of stories of speculative fiction, ranging back as far as 1840. Material qualities are often vital to how an individual naturally explores literary collections - which is especially true for Gibson’s anthologies. This research project was composed of:

A dissertation analysis of the key visual qualities present in the collection
A data visualization prototype to explore the collection naturally - focusing on their physical attributes rather than their content

THE SPECULATIVE W@NDERVERSE

The Speculative W@nderverse is a visualization tool produced to allow literary analysis and public exploration of the Gibson Anthologies digitally. The final tool is an interlinked visualization that provides a variety of views on the collection.

A case study was conducted, and although feedback was very positive overall, many participants felt that the visual qualities were underrepresented in the interface. They conveyed that exploring books physically was of importance as physical qualities help add character and influence which ones stand out amongst the collection.

VISUAL PROTOTYPE

After conducting a small-scale qualitative study, a list of material qualities seen throughout the collection was generated. Various interconnected views were then constructed to help navigate this collection via those qualities. The prototype utilizes a subset of Gibson’s collection (as the process of digitizing the content was still ongoing at the time of this prototype’s creation).

The Anthology View is the main focus of the design. Upon selecting an anthology from within this view, the cover is displayed at much larger size with information pertaining to its contents. Having larger icons was desired by all participants in the case study to ensure smaller details of the cover aesthetic remained clear. Further to this, the anthology information helps clarify any typography, satisfying the issue of readability that all three participants identified.
The Anthology View cycles between three distinct representations of the collection - a cover spread, genre classification, and featured illustrations - each of which corresponds to a critical area of importance identified by the study participants.
The Cover View displays a scaled version of the front cover of each anthology. Any sorting will influence the order that the covers are displayed to the user.
The Genre View displays a bubble for each of Bleiler’s nine major science fiction motifs. Within these are child bubbles for each anthology that contains a story with associated keywords for that genre.
The size of each anthology bubble scales according to the number of keywords seen within it’s stories, with the size of each genre bubble scaling to the total sum. Each anthology bubble is filled with the most prominent color of its cover.
The Illustration View displays bubbles for the art featured throughout Gibson’s anthology collection - with the size of the bubble relating to the size of the original image.
The Spine View displays a colored rectangle for each anthology. The width and height of the block are a scaled representation of the anthology’s length and thickness. The color of the block is the most prominent color of the anthology cover’s palette, determined through the use of ColorThief.js.Any sorting will influence the ordering that the spines are displayed to the user. Any filtering will refine the spines that are displayed to the user.
Also within this section is the sorting mechanism which allows the user to change the order of the displayed collection based on a variety of factors: anthology number, length. thickness, hue, saturation, and lightness.
The Story List View details all of the individual stories featured within the anthologies. Each story item’s summary is displayed a banner styled with the source anthology’s cover to allow easy correlation between the story and anthology icon. Clicking on a story item will display the Story Details in the Anthology View.
Sorting will influence the order that the stories are displayed to the user so that they correspond with the Anthology View.
Filtering will refine the stories that are displayed to the user.

CONCODE: A SYSTEM FOR ONLINE COLLABORATIVE CODE EDITING

Technologies used: TypeScript, React, Express

A group assignment to design a form of collaborative online editor. Our group of 5 decided to implement a code editing tool that allowed for shared access over coding projects, which we named Concode. The desired features ranged from initial rudimentary requirements such as user accounts and a backing store, to more novel ones, such as locking blocks of code rather than whole files, executing code within the browser or providing real time updates utilizing abstract syntax trees to merge changes. We also included a collection of more ambitious final goals that we would attempt if time and circumstance allowed, which we jocosely dubbed “moonshots” and “super-moonshots”.

The finished application was a web-based code editor that allowed multiple users to create, delete and execute JavaScript files in-browser. The system included a database that served as a back-up if the main database was unavailable. Users could simultaneously edit separate files with live updates pushed to others automatically. Individual files were locked (but still viewable) while another user edits to prevent users from accidentally overwriting one another’s work. Users were able to create directories and projects, and select users to cooperate with on a project.

JUNIOR HONORS PROJECT

TEACHING MODULE

Computational Thinking with BBC’s micro:bit

This project aimed to encourage computational thinking and teach core coding concepts to a Primary 7 class (aged 10 – 11). Neither the pupils nor teacher had any previous exposure to computer science at the primary. To communicate technical subjects to such a young audience, I utilized a piece of programmable hardware (BBC’s micro:bit) and an associated code editor (Microsoft Block Editor). This interface of joining code segments together, much like a jigsaw, provided a much simpler interface than that of strictly text. The project structure was composed of three sections:

Working with pupils in pairs to familiarize them with the technology

Teaching a variety of coding concepts to expand pupils’ knowledge and skillset
- Variables - User Input & Loops - Logic (If & Equivalence) - Randomization
Groups of 3 designing and implementing a micro:pet (a task that encompassed all taught material)

I chose this project as I thought that the logic skills taught would be of importance to all pupils in the class - not only those who considered a future involving computer science. Wing (2006) argues that computational thinking is a fundamental skill to reading, writing, and arithmetic. A main aspect of computational thinking is understanding how to break down complex problems into a series of simpler tasks. It is clear that exposure to this kind of thinking will help simplify problems in many other aspects of the pupils’ educations and even life out with the classroom.