Concept
Through this work I wanted to create a virtual library where a dataset of books is visualized in a dynamic way. I explored the possible datasets in search of one that includes the genre of every book, then integrated that into the visualization with every genre having it’s respective color that represents them to have a more effective format that reveals more about a book. To accomodate a larger number of books in the dimensions of the work, it is interactive with the user pressing each book switches it out to another book, converting the title, author and color to convey the details of the new selected book. The screen displays nine books at a time not to overwhelm the use with too many books and not to have too few to not exclude too many books. The main plan here is to create an interactive and engaging visualization of a dataset of books to help a user explore the dataset for recommendations or to discover the range of books available.
Highlight Code
wrapText(txt, cx, cy, maxW, maxH) {
let words = txt.split(" "); //split text into words
let lines = [""]; //initialize lines array
//build lines until they exceed width
for (let w of words) {
let test = lines[lines.length - 1] + (lines[lines.length - 1] ? " " : "") + w; //add word to current line
if (textWidth(test) <= maxW) lines[lines.length - 1] = test; //fits line, add it
else lines.push(w); //doesn't fit, start new line
}
//limit lines to available height
let lineH = textAscent() + textDescent(); //line height
let maxLines = floor(maxH / lineH); //max number of lines
if (lines.length > maxLines) {
lines = lines.slice(0, maxLines);
lines[maxLines - 1] += "..."; //truncate last line with ellipsis
}
//draw centered vertically
let startY = cy - ((lines.length - 1) * lineH) / 2; //calculate starting y position
for (let i = 0; i < lines.length; i++) {
text(lines[i], cx, startY + i * lineH); //draw each line
}
}
I’m most proud of the wrapText function within the book class, due to it’s ability solve a formatting problem that I faced with the lengthy book titles not fitting into the small allocated space on the book. It tokenizes the input string, by separating each word detected with a space between them then builds lines that respect the maximum width. For the titles that were too long to fit into the book I tried to using smaller font at the start but it was too difficult to read the lines in that case. So I decided to replace words that do not fit with an ellipsis if it exceeds the height to avoid having to use a smaller unreadable font size. This helped me ensure that all the titles fit into the book cover and are visually coherent and uniform.
Embedded Sketch
Reflection
Through this assignment I’d say I learnt a lot on data visualization and how to accommodate a large amount of data that comes in with it’s own attributes, like different lengths and format of sentences in the book titles. This taught me how to alter code to accommodate rather than smaller set of data determined by me to a larger more diverse set. Which also taught me the importance of dynamic code that is able to adapt to different inputs. For further assignments and projects I’d like to take lessons I learnt from completing this assignment and integrating them with more interactivity and storytelling so there is a more dynamic path to take rather than the current one where there is only one aspect that could be changed by the user interacting with it.