I just found this browsing around Smashing Magazine. Slick interactive graphs using javascript. I'm definitely thinking of experimenting with this....
ojovivo
Stranger Things
2025 on Tumblr: Trends That Defined the Year

PR's Tumblrdome

Origami Around
will byers stan first human second
we're not kids anymore.

No title available
RMH
KIROKAZE

Product Placement

blake kathryn
official daine visual archive
Claire Keane
No title available
𓃗

if i look back, i am lost
untitled
YOU ARE THE REASON

izzy's playlists!

seen from Indonesia
seen from Argentina
seen from United States

seen from Malaysia
seen from India
seen from Germany
seen from Türkiye

seen from United States

seen from United Kingdom

seen from Malaysia
seen from United States
seen from Argentina
seen from Canada

seen from Indonesia
seen from Singapore
seen from Ecuador

seen from Netherlands

seen from United States
seen from France

seen from United States
@writtendesign-blog
I just found this browsing around Smashing Magazine. Slick interactive graphs using javascript. I'm definitely thinking of experimenting with this....
Sweet. I was just sent this link. Writing is a science now too, heh heh. Does that mean design is a science? Where do we draw the line? Maybe never? No one likes limitations anyway...
Post-game wrap up
Ok...I can't believe it's done. Especially since I'll have the minimal amount of adjustments to make for grad show. Everything's pretty much in place, which is sweeeet.
Alright so I've been going over this a bit since I had to present the project in class. Going back to the very beginning, the purpose of this project was to explore the concept of the writer being a designer of the written word or written idea. I had this idea that there could be a huge encyclopedia, a guide to writing, in graphic terms. This was the big idea, the doable one was that I could do an analysis of a series of books. I wanted to do one series that I really loved but no one knew about. In the end I ended up comparing two, the other series being a very well known—Harry Potter.
I really tried to make it work with Processing for a while, but coding killed it. I would probably say that this is what kept me back the most. Coding sucks. Not fun. It was a great experience in seeing what Processing might be able to do and I did learn a bit about creating infographics using Processing so it could have been worse.
Another big setback is that I didn't have a final form for the project for a long time. I wanted it to be a display at first, something I could easily orient around grad show, but the experiments I was doing required so much text that it was inconvenient and wasteful to pursue anything print-related.
In the end, the brilliant solution was to make an interactive PDF. Simple links and rollovers could make the information more easily digestible and everything could be in one place. It was also easy to put into grad show—all I needed was a laptop on scene.
So looking back, what I really sought to answer was expressed in three main questions that I'm not sure if I even came all that close to answering.
What does it take to design an epic?
How do you attract an audience in words?
How can we use design to achieve this?
In reality, a lot of what I did was based on experiments that already existed in one form or another. I think the real difference is that I put it all together with a single purpose in mind. I lot of the designers I checked out (and whose work is posted on this blog) did amazing work, but even the ones that were closest to what I was interested in were very focused on one particular expression. I was working with less knowledge, time, and resources and I have to say I'm pretty proud of myself to finishing it. I think the combination of graphic experiments give the project the scope it needs to bring across the idea that we can analyze writing in many different ways.
Initially I was interested in the project because I wanted to write my own novel. I wanted to see what was so great about the novels I did love to better approach my own writing. I'm a designer and I wanted to do this in a way that was visual. Secondary to this aspiration was the desire to get designers interested in writing. I didn't want that to be the purpose of this project at all, as I wanted to learn from another perspective, but I feel as though this is a major issue. I feel as though a lot of design students run away from writing, but it's essential to the development of the profession, especially from a theoretical perspective. I don't know that I was helpful in this area at all, but I'm glad I am a designer who's interested in writing. I feel like this is asset amongst practitioners and I'm hoping it pays off for me in the future. Hopefully.
Anyways, definitely doing too much writing. Sorry. Not being a very good design designer (as opposed to a writer designer, haha). So..what's next? I definitely want to use what I learned from this project to continue analysis on the rest of the books in the series (non-harry potter one). I feel like I've only just begun figuring out what's so great about it and it'll be nice to be able to do it without the pressure of having to deliver. It would also be nice to work on the Processing version of the timeline section of the project. So damn annoying having to do it manually. I'd also never like to make interactive PDFs ever again...the button making in InDesign is ridiculously time consuming. I'd also like to start a blog about this stuff....maybe I'll just continue this one and see how it goes. In any case, thanks to everyone who helped out with this and I'll say bye until maybe after grad show...unless I find something too cool not to share.
See ya!
Just in case anyone else reads this...
Not that it'll be all that stimulating, but I figured I'd post a little about the technical challenges I've faced so far...and a little something I've learned along the way.
1. The first issue was with Processing a while ago. I wrote the code (in words) and then had a coder friend help me. What I realized by the time I'd asked a few friends is that it's really difficult when you don't write the code yourself. Or when you write code in full and don't test it in small steps because it makes it impossible to find the problem. This, and a lack of reliable coder help led this idea to an early demise. (everyone was awesome, but obviously I understand people are busy — thanks again everyone!)
2. While working on another project that involved visualizing my process, I learnt you can create interactive PDFs in InDesign. This led to my decision that the project would be an interactive PDF in its final form. I have yet to learn how to hide things when you make a rollover (at least CS4) so I foresee great frustration in my near future. Good to know about interactive PDFs for prototyping..funnily enough InDesign won't let you format a document in pixels though. Wouldn't this make sense?
3. Tip: I have tested combining two PDF files in Acrobat that have interactive elements that were created in InDesign. Even if you combine files, this works. In the end this wasn't useful to me, but it's helpful to know since InDesign can only have one document size throughout a single file. (I still think it's weird there are interactive capabilities to a program that is so strictly print in every other aspect)
4. I've been copying vectors from Illustrator to InDesign. It's been useful because it's so much easier to create these shapes in Illustrator. In general I've been testing shapes in Illustrator and then importing final or near final versions into InDesign. Much quicker in general.
5. Learn to use object styles! I bold this as it's so helpful. I needed around more than 200 boxes with text, with custom bulleting and borders. This is all customizable and then you can use the object styles to apply it to many text boxes at once. SO. HELPFUL. I can't stress this enough. Character and paragraph styles as well, but I feel like people forget about object styles. In object styles you can even assign a paragraph style so double points for that! Incidentally does anyone know how to have a text box auto fit itself to the text (say if you change the paragraph style and suddenly there's text that no longer fits...auto resize! how?)
6. In InDesign, you can't rename your pages. This is highly annoying. One compromise I found was that I could use different master pages for different sections. You can name master pages and then give them short forms. These short forms appear on each page with that particular master page when you open your Pages tab. That's how I've been keeping track of things seeing as I have 40+ pages. (Seriously, something needs to be done about this. Has CS5 rectified this situation?)
7. I'd like to have seven things just to make this post lucky...-ier than it already is. Um...I suppose one more well known fact is that you can adjust the appearance of image files placed in Illustrator to ‘Multiply’ to hide the white background of an image...ok not that great a tip. Boring. It was nice to have the option though, as I needed to use Illustrator to apply text to something and preferred to have its type editing capabilities. Anyway, still kinda boring. I'll try to do better and if I figure one out I'll edit this right outta here.
Follow the link for an amusing little chart. It helps you decide whether working for free is worth it in pretty much any given situation. Double karma points!
This is the type of chart I’d definitely be interested in doing for the Seven Basic Plots detailed in Christopher Booker’s…uh, book. I couldn’t make it happen for this project, but I’d definitely like to include it in future iterations. I’ve said it before, but this project is a personal project rather than just a grade, so there are definite plans to learn from this experience.
wait half a second...
Ok, so this'll be a short one. I've been working on getting the interactive PDF together. So it's mainly involved laying out sections and seeing how each section is formatted; ensuring that these sections visually connect to one another.
Initially the plan for this project was to create a display, some items were supposed to be print, others in a digital format. Now I'm just going for an interactive PDF format because it will consolidate the items a lot more effectively. All I need in terms of interactive elements is rollovers and links to make this work, so it shouldn't be too difficult. It's also easier to share the project online if it's a PDF.
So now it's quite repetitive work. I've already tested all the functionality on a much smaller scale for another project so now it's just a matter of laying everything out and doing a lot of button-making and linking.
One benefit of making this PDF is that I'm getting a lot of practice with InDesign. I think it's a valuable skill to be able to use paragraph, character and object styles effectively. Being able to make interactive PDFs also help in prototyping so it's a transferable skill. I'm interested in learning about intuitive interactive experiences, and how best to use the available format to convey all the information I've amassed so far.
Not much of an update, but I'm still at it, so hopefully next time I update it'll be almost done. Right now the plan is to design everything with basic functionality and get feedback, before making it fully functional in case any major changes need to be made.
I quite like this one. I also feel less witty now. Oh well.
I love how things from the past can come back to help you. I've counted at least 3 instances of work or processes from past years that I've reused in a new form in projects this year.
I was just thinking about how to do the 'grade 12 graphs' (basic plot graphs with the rising action, climax, denouement—basically things you learn in high school). The issue I was having was that I had little speech box type things pointing to different sections of the graph and that seemed kind of arbitrary. I wasn't measuring how far apart things were so what was the point? This was also in question because there wasn't enough space and the little 'arrows' that pointed to sections of the graph didn't seem to work when they were all the same size, or different sizes.
So I thought of not having them at all, and being able to have different configurations. I could then draw lines by hand (making it work with the index cards visuals) that were more flexible. It's kind of like in Family Circus when many people are speaking and there's no visual indication as to who it is.
I'll see how this works, but I like the idea so far.
From Katie Shelly's Website. I like the idea that you can break down how something works. A story is comparable to a recipe. It's a like a short story of food. Yay.
Comparison of the writing process and the design process
I also tried to find an online version of “Starting from Zero: Teaching Writing to Designers” by Warren Lehrer, from The Education of a Graphic Designer.
It's as though he is doing the opposite of what I'm interested in with this project. He actually outlines the process and he starts using graphic elements and free-writing techniques to ease designers into a writing frame of mind. The students actually developed a graphic language in the process of transition between the two.
I haven't finished reading the article yet, but it's a interesting process so far. I definitely recommend the book. It's edited by Steven Heller.
I realize it's been a while since I posted any inspiration. I found this not too long ago. I liked it not just for the infographics but the formatting. Pinterest is all about cataloging things yours interested in. Might be an idea as to how I could showcase the different elements of the project. Probably not now...but maybe I learn from their design. Will come back to this later.
Issue/Opportunity
Ok so, main issues to this point. I have more or less abandoned the Processing approach. The code's there but it's tough going. It's not in working order and there really aren't that many people I know who can code — particularly coding in Processing. Also everyone's just busy. The main purpose of the Processing was to get it up and working so that it could be applied to any data set. Anything else I can do myself, it's just much more time consuming. Now that I've already done most of data plotting, the results of the Processing as not as important as they once were. I would have liked to have had it as a tool that could be constantly reused given any data set, but...there isn't really enough time. If I find someone to help then great, but I've started feeling pretty guilty about asking for help.
The other issue now is that everything needs to be consistent. This isn't really a problem so much as an opportunity. I'm going to be experimenting with different ways to tie together all the data visualizations. The biggest problem is probably the index cards and perhaps the animated GIF. They're both hand-drawn as opposed to computer generated. I'm trying to tie them together with colours, possibly with the typeface. One thing I really enjoy is bringing outside imagery into infographics to introduce more organic textures to something that is usually so cold and calculated. I've done it before though, so another problem for me is: how is this different? I could say that everything I worked on in the past was just in preparation for this.
I think that at this point, even though this idea is mine, my knowledge of methodology is still new. I love making infographics, collecting data, seeing how it all connects, but I haven't had that much experience with the methods of visualization. What was most important to me with this project was the concept; the concept what I wanted to explore. A lot of my favourite visualizations of information have been based on complex coding, of which I have little experience. I think if this project has taught me anything is that maybe I need to get more experience in that area, or I need to form a partnership with an awesome coder, haha. I think one issue with that is actually finding someone who is interested in the same type of projects you're interested in if you want to do a collaboration like this. There should be an app for that.
Anyway, I think it's a good thing that I'm finding this out now. I can still complete everything I wanted to for this project and at the same time, I'm learning about how I can work towards better results in the future. A while back I said that I was using this workshop as a trial run as to how I could analyze all the books more thoroughly as a future project. I think I've definitely learned enough to figure out new methods for next time. It's all about being a little more prepared for next time because there's always going to be a next time where I'll have a chance to do better.
What did we learn on the show tonight, Craig?
Right, so it's not as though I've been nothing this whole time. I've been following through with the change in format I discussed in my last post. So I've been fleshing out the Harry Potter side of things: collecting the same type of data from Philosopher's Stone as I did from Exile's Return, drawing up index cards (an experiment inspired by Jessica Hagy) that are relevant to both novels, mainly matching up what I had for the Books of Elita with the Harry Potter equivalents.
So just to recap, the new format is comparing Harry Potter with the Books of Elita to make this project more relevant to people. Hopefully, it'll also mean that people will also be exposed to the Books of Elita, see the comparison and maybe even seek out the series themselves. There are a lot of common elements between the two, and I'm really enjoying the fact that this project means I can learn more about what makes them great stories.
So here's the run down of what's actually going to be included in this project. There may be a few more adjustments, but essentially here's the narrowed down version. I have tried to include a range of data visualization experiments so show different of ways one can analyze the books. I think each has its strengths, which is why having this range is more effective in representing what these books are about and why their formats are valuable. So without further ado:
1. Index cards: The index cards, to me, mean a way of communicating a idea efficiently. It's quick, but sometimes the idea can be quite complex. I like this method for its ability to surprise you and point out interesting tidbits in a really simple way. I've done some index cards that are specifically relevant to each novel separately, as well as comparisons between the two.
Purpose: quick communication, simple expression but often complex ideas
2. Animated GIF: Ok so this was another way to show a basic idea, but this time it involves the expression of the idea over time. You have to watch it and see how the idea unfolds. Again, a really basic way of communicating, but I wanted to include it because, at least in the Books of Elita, there's a key element to the protagonist's character that can be well expressed this way.There is an HP equivalent, but we'll see how this unfolds...
Purpose: quick communication of one main idea over time
3. Timelines: So I've been documenting how characters have been interacting in the books. This has been the most time-consuming part of the project as I documented the number of lines each section in the book takes up. (Sections are defined by double spaces in the text, usually denoted by a symbol like an asterisk...check out any novel if this doesn't make sense) Sections in the Books of Elita are easily defined, usually characterised by a change in the narrating character (POV: Point of View). With Harry Potter it's a little more difficult because it's all 3rd person omniscient from Harry's POV so I have changed somewhat what data I am going to be visualizing. These timelines are going to be digital and have simple rollovers to explain each one.
Purpose: complex, detailed communication that can be explored in-depth
4. Character Relationships: Based on the model from a Writer's Journey, the character relationships infographic shows how the characters relate to the hero. It's about how the hero's character is expressed through different archetypes that manifest themselves in other characters (check out the wiki for more detailed info on this). Because the archetypes change depending on who you are viewing as 'the hero', I have decided to do the obvious and it base each graph on the main characters of each novel, even though I have tried it out with other characters. It's really about making the information accessible.
Purpose: looking at relationships within the book, expression of archetypes. Showing who these characters are from one the protagonist's perspective rather than from an outside, reader's perspective
5. Book Graphs: These are what I call 'Grade 12 graphs'. It's the basic graph that shows the rising action, climax, denouement, all that good stuff from high school English. They do go into some detail, but essentially show the plot of each book in the series in a familiar format. It's kind of like an intro to the project. Information, with zero intimidation.
Purpose: show the basic plot of a book in a familiar, accessible format
6. Series Graph (still kind of optional): This is a circular graph based on Christopher Vogler's analysis of the Hero's Journey in his book, The Writer's Journey. This divides the hero's character development into different acts, each with their own purpose in the overall journey. That progression also relates to the archetypes because the end result involves the hero becoming that 'higher self'. These could be used for individual books, but because the grade 12 graphs do that on their own, I thought of having these graphs do each series as a whole.
Purpose: overview of the two series in a 'new format', about understanding one form of analysis that may be unfamiliar to us
Time Warp! Mini-Update!
(Sorry I should have posted this before the 3 links before this post to explain)
So I've thought about it for a bit and a new, perhaps more suitable idea to solve all the issues of 'what should I do?' came to me. Here's the info from an email I sent to my prof:
I was just working on the data collection and there's so much of it that I was thinking maybe I should adjust how I'm working on the project. It might solve the 'time issue' of collecting so much data, which inevitably leads to less detail, as well as the issue of making this project easier for people to relate to. I was wondering what you thought about, instead of doing the five books in a series, doing two books, the first in each of their series. I could do first book in the series I'm working on now, as well as the first Harry Potter book, which is obviously far better known in comparison. By doing this I could collect the same data from each, and at a higher level of accuracy and detail. Even if people don't know the Books of Elita (the original series I was working on), they can still interpret it as a much more complex fantasy novel. It could represent the 'standard fantasy novel', more in line with a series like A Song of Fire and Ice. I think it's also going to be an effective compare and contrast because there are many similar elements between the two novels. They are similar plot types and the main characters are similar archetypes, but still differ in significant and interesting ways. This also supports another idea I had where the research I did would also help promote the Books of Elita. Seeing that series as similar to Harry Potter could definitely make it more appealing to people. In terms of the project I had originally proposed, this comparison could serve as 2 case studies in the encyclopedia idea I initially proposed. I would have the option to both analyse them as separate entities as well as analysing them in relation to one another. I just wanted to ask your opinion as making this decision would mean that I would stop collecting data from the other books and start doing Harry Potter and the Philosopher's Stone analysis instead.
Alright, got it? So now I've stopped collecting data from the Books of Elita. I'm a little disappointed about that because I really wanted to do them justice. On the other hand, I might be better equipped to do them justice in the future as this project will provide me with more experience in dealing with this type of analysis. So I'm almost thinking of this project as a prototype as to how I could analyse the Books of Elita in the future.
Meanwhile, Harry Potter is a lot more easily researched as it's not all on me. I can get summaries from sites like HP-Lexicon (as I have indicated in a previous post). I'm also going to now have more time to think about how I can deal with this comparison between novels.
Now that I've been working on it for a bit, I'm thinking it's probably better to have some involvement of the plots from the other books, just not as hardcore as the Processing comparison. Most of the similarities in the character development aren't evident until later books in each series, so it's pretty important. Plus, once the Processing data analysis works, I can quickly do around 3 or 4 different analyses as I already have most of the data for those. It's not like the Processing code will be wasted and I'll have time to pursue other things.
I do still want to do a hand-done component, so now I'm thinking that's how I could deal with the other books. I have loads of info from my personal memory so now could be a good time to break out the 'graphic experimentation' idea I initially had.
In which case, maybe this project is an exploration into the types of graphic experimentation across different media. I've been looking at the different types of graphic inspiration I got from Data Flow and I could definitely try a bit of each approach, from more casual and 'on the spot' understanding and expression of 'cool moments' of the book (previous posts), to more complex expressions like the Processing analysis. There could even be room for motion-based analysis on a very small scale. I think that might actually help a lot in expressing the initial proposed 'big' idea of the encyclopedia.
Cool, huh? That kinda worked out.
Makes me wish I kind of did more English Lit. Ok so irony is a literary technique. Good to have a handy list of them for future reference. Seriously.
I don't really know if that's how you spell ironies but..nevertheless, I have been thinking about them. The types of irony, I mean. I have a whole set of data of 'moments of cool' as I am calling them, and they look at moments in the story where it's totally genius that the author could place something so secretly into the text. Usually it's foreshadowing, dramatic or situational irony. So I had to look up the definitions again...gah.
Having been part of the Harry Potter fandom for sometime, I know one of the advantages is there are always fellow fans out there who have already catalogued information in many different ways. I came across this site years ago, probably around the time the Order of the Phoenix was released, and has proved handy ever since.This is definitely going a make a lot of things easier.
Thanks to the guides I can easily go back to see major events in the plot that I might be fuzzy on. I'm using this info, so far, to produce draft diagrams of the plots like I did with the books of Elita. I might only be able to fully get data myself on the first 2 books of the series, but I feel there does need to be expression of the other books in some form because the biggest similarities in plot and character development come out further on the overal plots of both series.