Dress your data viz in the most fabulous colours

There are fabulous resources available on the emotional, psychological, and accessibility impact of colour in art and communication. This is not one of them. Instead, this is what you need to know about starting to use colour with intent.

First up, let’s get some vocabulary straight. You’ve probably heard all the following in relation to colour, but what do they mean, how are they different, and how can we use them to our advantage?

Hue. When a cop asks, what colour was his t-shirt? They generally mean what hue was it. They’re not worried about matching it to accessories. The important information is that it was some kind of green as opposed to, say, red. Hue refers to pure spectrum colours, the ones with the straight forward names. The core components change depending on if we’re thinking about pigment (e.g. for mixing paint) or light (e.g in digital work). In pigment the primary colours are red, blue, and yellow, and the secondary colours from mixing them are orange, blue, and purple.

For digital work, the primary colours are the components of light — red, green, and blue. This gives us a way to reference any hue by an RGB value: three figures between 0 and 255. In this model pure red is (255,0,0), green is (0, 255, 0), and blue is (0, 0, 255). And the secondary colours are Blue + Red -> Magenta (255, 0, 255), Red + Green -> Yellow (255, 255, 0), Green + Blue -> Cyan (0, 255, 255).

Value is the relative lightness or darkness of a colour. Artists use contrasting values to create areas of focus in an image. See how the skin really pops out of the painting below? (This painting, by the way, was seen as scandalous when Sargent presented it in 1883, and at a later date he overpainted the shoulder strap to make her dress seem more securely fastened.)

madame x.jpg

You get different values by making tones, tints, and shades. Used interchangeably by people who don’t care (and why should they?) these are different but related terms.

A tint is the addition of white to a colour, it makes it lighter. A shade is the addition of black to a colour, which makes it darker. A tone is the addition of grey to a colour, which makes a softer colour, but guess what? Grey is made up of black and white, so you could say tone is adding black and white to a colour. Or not. Let’s keep it simple. Importantly, none of these additions changes the hue of your starting colour, only the value.

Saturation is the intensity of a colour. It is defined as a percentage from pure colour (100%) to complete grey (0%), at a constant value. When you decrease a colour’s saturation, it makes it feel washed out.

Brightness is not a measurable colour property, but part of how we perceive colour. We tend to call lighter and/or more saturated colours ‘brighter’.

But why does this matter? I ain’t no renaissance painter, Emma, is what you are probably thinking. It matters because adjusting colours (hues) along their value or saturation scales is how you find a palette that is perfectly matched, or perfectly hideous.

Colour is used to provide two types of information in data visualisation: 1) how two elements are related (or distinct from each other), and 2) that certain elements or marks are more important than others.

There are a ton of rules and tools out there to help you pick palettes, but how and when should you use them? Here’s some handy tips to get started:

  • Don’t use colours from a corporate logo in the viz, unless the mark represents the whole of your business (e.g. looking at competitor market share). Otherwise you are implying that, for instance, department #1 is more representative of the business than department #2.
  • Start by selecting your neutrals. Will you have a dark background with light text, or vice versa? Current trends are for deep greys and eggshell creams — but the shades that draw people in change with fashion. Keep your contrast high, and don’t make your background a dark ‘light’ colour, it ends up looking like a bad spray tan. Instead, to bring colour into this part of the viz, pick a fully saturated hue, and a very light tint of the same hue. You can use tools like this [http://www.rapidtables.com/web/color/RGB_Color.htm] to find such pairings.
  • Figure out which palette types you need for the marks on the visualisation: 
    1. Discrete categories, like markets, gender, or departments should use different hues of similar value and saturation. [Categorical Palette]
    2. A continuous variable in a measure field that does not cross zero, such as sales, response count, or percentage coverage, should use a single hue that ranges in saturation or value [Sequential Palette]
    3. A continuous variable that may cross zero, such as profit, change in sales, or survey responses, should use a gradient that moves between two different hues. This can range in value as well, but saturation should remain broadly constant. [Diverging Palette]
  • To find base colours for these palettes, a tool like Adobe Colour can help you pick a set of hues with similar saturation. Mixing saturations at this point will make your colours  feel unrelated. It’s what’s keeping them together. Look at the two samples below. The same hues are in each strip, but the second is desaturated. If you attempt to use the bright pink with the faded orange, they will vibrate against each other and give your audience a headache.
  • This strip can either be a categorical palette on its own, or it can provide a base colour for sequential or diverging palettes. In this case, I used the minty green to create a diverging palette in this colour picker tool.
  • You will likely need a secondary text colour—it can either be high contrast like the International Tourism example above, or more muted — a neutral plus one of your saturated colours in the base palette.
  • Whatever you choose, decide what each colour represents and keep to it — the same colour on the viz should not mean two different things. It’s confusing for users.
  • Users arrive with expectations about colour: High value colours are seen as more important than low value (lighter) colours
  • If you’re working in Tableau, learn how to install your own colour palettes in the Preferences.tps file. It will mean you can easily define and reuse palettes you create.

A note on accessibility. People with colour blindness have trouble distinguishing between particular hue combinations—red-green, or blue-green, depending on the variant. To keep your palettes accessible, make sure they vary in value as well as hue. This means even if someone only sees it in greyscale, they can still distinguish between categories. Tools like ColorOracle can show you how your colours look to those with different types of colour blindness.

That’s it! that should be enough to help you explore colour confidently. Remember the only ‘wrong’ is if people are confused by your choices. Everything else is a matter of taste.
Enjoy!    

Samuel Delany’s Rules of Writing

As laid out in the introduction to his book About Writing, Seven Essays, Four Letters, and Five Interviews.

Whether you’re writing fiction or slide decks, applying these rules is vital to keep your audience interested.

  1. Use simple words with clear meanings whenever possible. (This is a call for clarity, not simplicity.)
  2. Use the precise word. Don’t say gaze when you mean look. Don’t say ambled or sauntered or stalked when you mean walked. There are no synonyms.
  3. Whenever reasonable avoid the passive voice.
  4. Omit unnecessary modifiers. As a rule of thumb, nouns can stand up to one modifier each; thus, if you use two or more, have good reason.
  5. For strong sentences, put your subject directly against the verb. Preferably, when possible, move adverbial baggage to the beginning of the sentence—or to the end, less preferably. Don’t let it fall between subject and verb. Do not write “He then sat,” “She suddenly stood,” “He at once rose.” Write “Then he sat,” “Suddenly she stood,” or “He rose at once.”
  6. Omit unnecessary chunks of received language: “From our discussion so far it is clearly evident that…” If it’s that evident, you needn’t tell us. If it’s not evident, explain it and omit the phrase.
  7. Avoid stock expressions like “The rolling hills,” “A flash of lightening.” Good writers don’t use such phrases. Talented writers find new ways to say them that have never been said before, ways that we have all seen but have rarely noted.
  8. Good writing rarely uses “be” or “being” as a separate verb. Do not use either be or being when you mean either “becoming” (not “It had started to be stormy, but “A storm had started”) or “acting” (not “She was being very unpleasant,” but “She was unpleasant”). By the same token, avoid “there are” or “there were”. Don’t write “There were five kids standing in line at the counter”. Write “At the counter five kids stood in line.”
  9. Don’t weigh down the end of clauses or sentences with terminal prepositional phrases reiterating information the beginning already implies. Here’s an example of the last: “I turned from my keyboard to stack the papers on the desk.” Since the vast majority of keyboards sit on desks, you don’t need that terminal prepositional phrase.
  10. Use a variety of sentence forms. Avoid strings of three or more sentences with the same subject—especially “I”. While you want to avoid clutter, you also want to avoid thinness. Variety and specificity are the ways to achieve this.

And some definitions, for those who (like me) did not learn grammar at school.

Verb: a word used to describe an action or state. The “doing” word of the sentence. Run, throw, become, happen and so on,

Subject: the person, place, or thing doing the verb.

Adverb: a word that tells us more about the verb. Vera spoke loudly. Afterwards she ate a mouse. Theodore lives locally.

Preposition: a word that indicates position (in, near, beside, on top of), or some other relationship between a noun or pronoun and other parts of the sentence (about, after, besides, instead of, in accordance with). This noun or pronoun is called the object of the preposition.

Prepositional phrase: the sequence of words that make up the preposition and its object.

Clause: a group of words that includes a subject and a verb.

Passive voice: when the subject of a sentence is the recipient of the action. Passive: “The product was launched by the team.” Active: “The team launched the product.”

That’s it! Happy (re)writing!

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!