Using design grids to beautify your vizzes

One of the ways designers create simple, striking designs is through the use of grids. Grids act as a skeleton to support the flesh of the design. You can’t see it in the finished article, but without it, the design would be a wobbly mess, kind of like you without your bones.

 
 

This is Apple’s design grid for iPhone icons. It already feels kind of familiar if you’re an iPhone user. The grid supports designers in three ways. First, it defines proportions, for instance the inner circles in relation to the outer one. Second, it sets up a way for the design to find balance — you could fill the four corner squares with a single colour and have a design that feels evenly spaced, or use the squares across a diagonal and feel the same. And thirdly it sets up a repeating rhythm for the icons on your home screen. All the apps use the same design grid, and therefore, no matter what colours or content, they share the same ‘feel’.

These are three of Apple’s own icons and how they use the design grid. The grid allows them to share a common language. From the obvious — they all use the outer circle to define the edges of the image, to the tiny — the way petals are lined up with the diagonal dividers, just like the arrows on the compass.

We can apply the same techniques to dashboards and reports. The results help create content that is easier to interpret and have a slick, professional look. You can also share a grid across an analytical team, creating a look and feel that your stakeholders come to know and love, and learn how to intuitively use. The question is, what grid should you use? How should you divide the page? You can choose literally anything!

 
 

Let’s pick a random place to start. Here’s an A4 page divided into a 6 by 8 grid. A gutter between each box to align spacings and content. I made this in Adobe Illustrator, but you can fill a Tableau dashboard with 48 shaded text boxes and get the same result. The boxes can now be combined in a whole variety of patterns, and each larger box filled with text, images or charts. Because you’re working off the same base grid, these final elements will always be in proportion and alignment with each other. The gif below demonstrates what I mean.

 
 

For every day analytics use, you’re probably don’t want to fiddle around with this detail though. No worries, there’s an easy trick you can use. Humans just love it when things are divided into thirds, or use the golden ratio. You can use that in your dashboards as well. Divide it into a 2x3 or 3x3 grid - leaving one box height for header, and half for the footer if you’re so inclined. Then combine as above. Here’s just a few options to get you on the road to beautifully proportioned, finely balanced dashboards.

 
 

If you're interested in learning more about information design tools and techniques, I run a data design half day training course. Get in touch for more details.

The 2015 SF Count

The purpose of doing the SF count is to draw attention to the lack of inclusivity in SF book reviews. It's been running since 2010, but this is the first time I've been involved, and I wanted to design something that was simple, engaging and easy to share.

These days, the simplest way to do that is to put the critical information in gifs. They look great on any device, they play automatically, people love to share them, and they loop over and over and over until at least some of the information is taken in!

egcosh

However, for those who were interested in knowing more, I also wanted to create something that let them explore the data in a guided way. Tableau was perfect for this, as I could publish the dashboards on the Tableau Public site, and Strange Horizons (or anyone else) could embed them on their site with all the interactivity retained.

How I did it

In animation and Tableau dashboards, you can create virtually any view of data you want to, and it's easy to get lost in the desert of 'what about this? what about this...?' It's important to figure out the story you want to tell first, to guide you and keep you focused.

The critical questions I wanted to answer were: what does the data show in 2015? how has it changed since last year? how has it changed over time? and how do I satisfy the few users who will want to see the granular detail of the data? Lastly, my client (Niall Harrison, Strange Horizons editor) was rightly concerned to put the results in the context of the size of each venue. Some venues review 300+ books a year, and some less than 30. A percentage change in these different venues has a vastly different impact on the overall market.

I always advise clients to design their visualisations with the audience in mind, and in this case Niall was not only the client but also my first audience. He had a lot of questions and feedback during the design process that helped shape the output and make sure the story was complete and understandable by anyone who wasn't me! This kind of role is necessary in visualisation design to minimise the assumptions you make about what is on the page vs. in your head.

Pictoline inspired the animations. They do a great job of explaining news issues in simple bold graphics. I built the gifs in Illustrator and animated them with After Effects. After Effects doesn't output to gif format, so I got around that by opening the .mov files in Photoshop, and exporting them as gifs.

The Tableau's online community is brilliant. It has so many enthusiastic analysts sharing their tips, I couldn't have done it without them. The main posts I used to help me build the dashboards were:

Slope charts
Filtering with Parameters
Small Multiples
One Parameter, Multiple Formats
Hover for Instructions

I also used the free tool Chroma.js to put together a new diverging colour palette for the 2015 tree map, based on the bright green from the animations.

Explore the data for yourself below, or see the results in the Strange Horizons post.

 

 

Eastercon 2016 Recommended Reading

We just got back from Eastercon in Manchester (Mancunicon), and it was awesome. It felt like there was more diverse and interesting (to me) programming than last year, and I took part in my first panels, which was balling.

A huge thanks to the committee and the panellists and audiences for fascinating, respectful and educational discussions. I feel at least 18% smarter now than before I went.

mancunicon sketch002

There was so much great fiction recommended it was hard to keep up. Here’s a round up from the panels I was on.

Image: My favourite sketch I did at Mancunicon. 'Man Fascinated by Panel' :)

Supporting the Short Stuff Val Nolan, Ruth EJ Booth, Matthew Hughes, Juliet Kemp

We didn’t solve the challenges in the market, but we did talk about using new media (Youtube, Snapchat) to engage new readers, as well as the fact that magazines are a precipitous business no matter what their subject matter.

Discussion ranged over the health of the short fiction landscape, Kickstarter fatigue, and whether short stories were fine art (therefore expected to support themselves through fundraising and philanthropy) or entertainment (therefore a small business).

My recommendations for some smaller short fiction magazines to read were:

Lontar, Journal of South East Asian Speculative Fiction Interfictions - A Journal of Interstitial Arts Omenana - Speculative fiction writing from across Africa and the African Diaspora Delinquent’s Spice - Bringing together lesser known folk and fairy-tale types Fireside Fiction - A magazine covering many genres, just great stories.

Lastly, a huge thank you to the person to came up to me later in the con and said how much they’d enjoyed this panel, were going to check out the podcast, and felt like the recommendations had given them a way into short fiction. You made my day :)

Radicalism in World building I was totally schooled in radical thinking, fiction and academic critique by my wonderful co-panellists Kate Wood, Graham Sleight and Jude Roberts. My contribution was mainly to ask them what the words they were saying meant. I learned a new one, heterotopia.

In no particular order, the fiction we talked about:

  • Player of Games, by Iain M. Banks
  • When it Changed, by Joanna Russ
  • Houston Houston do you Read Me? by James Tiptree Jr.
  • Snow Crash, by Neal Stephenson
  • Infotopia, by Cass Sunstein
  • Left Hand of Darkness, by Ursula K Le Guin
  • Lagoon, by Nnedi Okorafor
  • Written Body, by Jeanette Winston
  • Greg Egan’s short fiction
  • Omnisexual, by Geoff Ryman
  • Frederic Jameson (literary critic)
  • Pomona, a play by Alistair McDowall

The Year ahead And The Year Just gone in Science Fiction with Johan Anglemark (mod), Martin Wisse, Niall Harrison, Nina Allen

All around, we were excited by a lot of fiction in 2015 & 16. Here’s a quick run down. It’s enough to keep me going til 2017 I think.

My recommendations: 2015

2016

Nina’s recommendations: 2015

  • If Then - Matthew de Abaitua
  • Find Me - Laura Van Den Berg
  • The Shore - Sara Taylor
  • Rawblood - catriona Ward
  • Sorcerer of the Wildeeps - Kai Ashante Wilson

2016

  • Hystopia, by David Means
  • When the Floods Came, by Claire Morrall
  • Graft, by Matt Hill
  • The Sunlight Pilgrims, by Jenni Fagan
  • Gold Fame Citrus, by Claire Vaye Watkins

Niall’s recommendations: 2015:

  • The Devourers, by Indra Das
  • Signs Preceding the End of the World, by Yuri Herrera
  • The Grace of Kings, by Ken Liu
  • The Glorious Angels, by Justina Robson
  • The Swan Book, by Alexis Wright

2016:

  • Ninefox Gambit, by Yoon Ha Lee
  • What is Yours is not Yours, by Helen Oyeyemi
  • Version Control, by Dexter Palmer
  • The Winged Histories, by Sofia Samatar
  • The Core of the Sun, by Johanna Sinisalo

I didn’t catch all of Martin’s recommendations, but here’s the ones I did:

  • The Long Way to a Small, Angry Planet, by Becky Chambers
  • Otherbound & On the Edge of Gone, by Corinne Duyvis

There were so many panels I wanted to see, but couldn’t. It was always tough to decide what to go to. I’m especially interested if anyone has a round up from the Spanish or African SFF panels, I’d love to see them.

UPDATES: Check out these other great round ups from Val Nolan, Chris Kammerud, and Adrian Long (Adrian's includes the Spanish SFF panel)

Getting Shit Done

My fascination with doing all the things is matched only by my fear of them, which means that I have approximately four hundred and sixty eight projects I’m giving the side eye to, and none of them are quite done.

They only person I know with a shorter attention span is my three year old nephew, but even he can sustain a life long obsession with wooden trains to the point of frequently completing an entire track and pushing trains around it for what feels like forever.

I want to complete my train track.

One of the more irritating things about the way my attention works is that it doesn’t actually like attention itself. It’s like an imperious cat who sits in the window rather than on your lap, no matter how many kissy-kitty sounds you make.

It goes back to being at school, when trying hard to do anything was deeply uncool. Because, I don’t know? Trying was equivalent to saying it mattered, and saying it mattered meant that failure was suddenly a very real and very frightening option.

To get around this, I have, over the years, designed productivity systems and schedules for myself so complex, they required expertise in fractal mathematics to figure them out. But most of them ended up collapsing under the insolvable nature of their constraint equations. And the ones that didn’t collapse consumed so much attention that they needed their own

But recently, I have started to treat my attention span like a feature, not a bug.

You want to work on five different projects a day? Fine. You want to draw, and write stories, and visualise data, and possibly figure out how to do all of those things inside the same project? Fine, let’s work with that.

So now, I do two things. I work on projects that range in size, from five minute sketches through to the deep space adventure novel I'm writing, so that even with a tiny amount of work, I can still get that little buzz of achievement that comes with completing something and sending it out into the world. And I set goals in small increments.

This is where I tell you how great #300wordpact* is. It’s about writing 300 words every day, on any project, and when you’re done, you’re done. Three hundred words a day? That’s totally achievable. Well, for me it was achievable on 42 days of the 50 days, or 84% of the time. (I kept a spreadsheet, obvs.)

It feels pretty good to look back and see how hitting that small daily task has built up to 10k new novel words and two short stories planned out.

Here’s to the next fifty days.

*shout out to the lovely Sara Saab and her Clarion 2015 class who came up with the idea which I happily adopted.

How Fast?

Sometimes you really need to see it to believe how fast something is.

I knew Star Wars: The Force Awakens was big, and I knew it got big fast. This dataviz I put together in Illustrator and After Effects shows just how fast.

SW-Boxoffice-4_1

In my other life, as GracefulRobot, I make data visualisations. Sometimes I make them just for my own entertainment, too.

Emotionally Perfect

Sometimes, high altitude, excitement for holidays and friends, and the perfect story, all combine in one cataclysmic moment that completely undoes me.

On the flight from London to Nashville I caught up with a film I’d been meaning to see -- Pitch Perfect.

In a moment early on, the main character, Becca auditions for an acapella group. We’ve just had a giant, lung-opening supercut of all the other candidates belting out the same overblown tune, and then we drop to silence. Becca skulks into the end of the audition, hasn’t prepared the same all the other candidates have prepared. We’re nervous for her, want her to succeed.

She sits on the edge of the stage, grabs a cup from the judges table and table and gives a haunting, beautiful, echoing performance of ‘You’re gonna miss me when I’m gone’.

[youtube https://www.youtube.com/watch?v=weqDCGg0GYs&w=560&h=315]

It’s good on it’s own, but in context, it’s joyful. The contrasting energy is so perfectly judged that it gave me skin crunching shivers.

I sobbed my heart out for pretty much most of the film. Possibly something to do with the high altitude? But also because it’s such a masterclass in managing peaks and troughs in emotion.

Then I followed it up with The Futureheads Rant acapella album, so haunting.

[youtube https://www.youtube.com/watch?v=NYHfF_4aMyc&w=560&h=315]

TV Writing for Novelists

Work on the novel has been slow recently, so I’ve been stealing from the structure and clarity of TV writing to help move it forward. I picked up *tons* of useful energy from this approach. Below are some of the great links that helped me figure out the process.

Often TV shows are structured with A, B, and C storylines. They intertwine and influence each other to varying degrees. Each story line premise is broken into beats (called ‘breaking the episode’) and is plotted out step by step, to create a beat sheet. These are then blended together and fleshed out in an outline document. This is a simple prose version of the script.

From low to high levels of detail, the outputs on the writing journey are: Premise > A,B,C storylines > beat sheet > outline > script.

This great blogpost breaks down an episode of Community into its storylines and creates a beat sheet, to show you what it looks like. The most important thing i took from this, is that:

A point on the beat sheet isn’t just an action happening. It’s action + the character’s response.

Once I started outlining my story in this way, it moved so fast! No more dawdling around with characters not going anywhere.

Mike DiMartino also has a great series of posts that go through the process of writing a Korra episode:

Even Giant Space Dogs Need Toys

Dog Toys from EGCOSH.com

Or: Creating a grainy shadow in Adobe Illustrator.

I’ve been playing around with a new (to me) shading technique in Illustrator, using a transparent bitmap of contrasting colour to add depth. It’s explained pretty well by Don Clarke of Invisible Creature here.

Took me a few goes to get exactly right, as I’m less familiar with Photoshop, and he doesn’t go into much detail about that bit. I ended up creating a black > white gradient on a blank canvas, with a pretty sharp gradient (16% transition). Then going to Filter > Pixelate > Color Halftone.

Getting the output format right is critical. Go to Image > Mode > Greyscale to remove all the colour. And then go to Image > Mode > Bitmap, before saving it out as a TIFF file (not saving it as a copy).

The shading brought the dog to life so much, that i then couldn’t resist giffing it. It’s now its own little piece of flash fiction. Strange, lonely games while lost in space, and only the people in your head for company.

Get a website, quick!

First things first, you need a domain name. That is, you want to find a website address that is available, and meaningful to you and your audience. Generally shorter is better, and if you're an author or artist, grabbing your name is the best. Registering and paying for this is totally separate to whatever you put on the website itself. You can find out what names are available at www.hover.com —type the name you want into the search field, and it will come back and tell you what extensions are available for that name. i.e. .com, .org etc. Generally, .coms are a bit more expensive than other extensions, but they do have a professional ring about them. Registration with hover costs around $13/year, and you will need to pay that every year you want to keep the website.

Separately you can try wordpress.com for easy hosting and website set up. This will hold all the content on your site.

Hit the register website button and fill in the form. In the blog address field, enter the name you registered at hover, but leave the .wordpress.com extension for now. You can point Wordpress to your new domain when it has finished registering. This is called domain mapping, and instructions on how do that are here. It involves going back to your domain registrar (Hover) and telling them you want that domain to look at wordpress for the content. It currently costs $13/year at Wordpress.

If that sounds too challenging, you *can* just register a domain with wordpress, but it makes it harder to move around when down the line you decide you want to move away from their hosting, or manage multiple sites.

Once you’ve set it up, you can select a theme from the hundreds available, and start customizing the look. Some are free, others cost money. I recommend starting with a free one to figure things out like, uploading pictures, and how to add pages to list your publications, or ‘about’ details.

There’s a quick start guide here: https://learn.wordpress.com/

Good luck!

Speaking at 300 Seconds

I decided a couple of weeks ago, that I would start talking publicly about the work I do in data visualisation. It's cool right now, it's fun and engaging. It's also a chance to give back to a community that is very open and supportive of those coming up and developing new skills such as D3. The very next day, I saw the following in my Twitter feed:

[embed]https://twitter.com/300_seconds/status/527876177797840896[/embed]

I did, so I got in touch, and last night I spoke at the Open Data Institute. You can see my slides here. The video will be up shortly.

Credit: Chris Kammerud

The people at 300 Seconds are doing an awesome job at my favourite thing ever: see something broken--do something to fix it. They saw there weren't enough women speaking at tech events, so they started an event to get people started in their speaking careers. There were a raft of fascinating and lively talks which I'll link to when the info goes up. I had a ball. Congratulations Lily, and Mils, and Ann and the others. You are doing amazing work.

Learning New Tricks

The last couple weeks I've been playing around with some new software, Adobe After Effects. Generally used for post production special effects and motion graphics, I used it to make a trailer for our SF Anthology, the red volume. [youtube https://www.youtube.com/watch?v=If4ZI3oNZmM&w=854&h=510]

If you want to learn After Effects, I went from no experience, to making this trailer using the tutorials at edfilms. Great work, guys, thanks!

A Month of London Stories

We moved to London last month.

It’s beautiful, and full of stories, and people, and amazing food, and great coffee, and joy, and the weather is so much cooler than Saigon, I can really feel my brain flowing faster than before. So we are diving into as many stories as we can. These are some of the ones I’ve loved this month.

Writeclub @ The King’s Head, W1
A laid back group of writers who meet with no particular goal other than to talk shit and have fun. Delightful! Go: any time you want to laugh and chat to new people.

David Bowie in The Man Who Fell to Earth @ The British Museum
Part of the BFI Science Fiction season, screening outside at the British Museum. It’s not for the story, or particularly for the acting, nor even the script that you might want to see this movie. In fact, there is little i can point to that explains why i enjoyed it. It’s twice as long as it needs to be, drowns under the attempted significance of its imagery and in parts is a third rate B movie. But it’s also an interesting examination of a man disjointed and out of place, and it’s kind of beautiful. Watch when: you’re doing the ironing.

Super Relaxed Fantasy Club @ Holborn somewhere
Okay, I admit it. I didn’t go to this one. Tiredness got the better of me. But it’s drinks and author readings, and it looks ace, and I’m totally going to the next on on the 30th. Organised by author Den Patrick, it promises laidbackness, so I'm in. Go: yes, I will. Promise.

Book Slam @ The Grand, Clapham
I love Josie Long. She’s funny and cool in the dorkiest of ways. She did some stand up, Simon Rich and Mark Watson read from their latest books, Sophia Thakur performed some poetry. Also, go for the amazing Australian MC Felicity Ward. She held the whole thing together with a kind of casual grace that got everyone relaxed and laughing. It looks easy when she does it, but I know it’s not. Go: every time you can drag yourself south of the river.

Liars League @ The Phoenix, nr Oxford Circus
A vague acquaintance had a story being read here, so we went, and it was beautiful! Six different actors reading six different stories, all were funny and charming and at least two mentioned the Britishness of tea. Go: every time it’s on (second Tuesday of the month)

Finally, did you know that London is now the centre of anthropomorphic animals? Move over Joan Aitkin and Brian Jacques, we have no time for your pastoral scenes here. This place is full to the brim of chubby foxes and bolder than fuck squirrels. Case in point: this morning’s visitor. He came to the third floor just to say hello.

IMG_0384