Scatterplot

Note: I’m a graduate student at the University of Miami working on my capstone, a visualization of the Pictures of the Year International Archives. If you’re curious about my journey, here are my posts tagged with capstone.

My state of mind feels like this scatterplot:

This chart won’t make it into the final but it was good to see. Honestly, I was disappointed about the results but it does elicit some more questions about the relationship between woman juros and women winners (photographers).

I also wanted to learn how to do it using D3 so it was worth the time and occasional outbursts of profanity.

Visual Design: Colors

Note: I’m a graduate student at the University of Miami working on my capstone, a visualization of the Pictures of the Year International Archives. If you’re curious about my journey, here are my posts tagged with capstone.

Gender and Colors

Once I decided that my focus would be on gender representation, I knew I wanted to avoid the obvious pink and blue or variations of, to communicate female (pink) and male (blue). So, I did some research about alternatives to pink and blue and discovered these great articles (below). One of them happens to be from one of my trusty go-to resources, Chartable, the DataWrapper blog.

Exploring Alternative Pairs

Below is just one of the color combinations I explored to communicate gender without perpetuating the gender color associations ingrained in our consciousness.

Not the best chart to communicate comparisons but the colors were working!

I thought these colors worked well but not everyone was particularly fond of the electric yellow-green (chartreuse in my mind) and referred to it as “vomit green”. Interesting. Well, you can’t please everyone.

The chart colors will set the foundation for every other color choice moving forward.

It’s important to me to get the colors for the charts established before I can determine the final colors for the background, type, links, and more. My typical choice for colors when working with photography tends to be more muted, earthy tones. Neutral, like when in a gallery.

But for this project, a little ”electric” and unexpected would be a breath of fresh air and draw more attention to the visualizations.

Visual Design: Typography

Note: I’m a graduate student at the University of Miami working on my capstone, a visualization of the Pictures of the Year International Archives. If you’re curious about my journey, here are my posts tagged with capstone.

For me, typography is what can take a design from good to great. Everything I learned, I learned on the job working as a designer at newspapers and magazines where typography can make the difference between happy readers and angry readers (serious). For publications, that means money. For designers, beware the wrath of your boss.

Like all my projects, I take extra time to explore my options. For my capstone, I didn’t want to purchase fonts so I gave myself constraints: use Google fonts or Fonts from Adobe.

Here are few questions I asked myself before selecting typefaces for my capstone:

  • What mood or emotions do I want to convey? Modern? Approachable? Techie? Bold? Classy? Edgy?
  • Do I want to be consistent with most publishing websites (Sans-serif headlines, serif body text) or do I want to break the mold?
  • What are the most readable typefaces available?
  • What typeface pair well together? Maybe use one super family?
  • Charts often require small sizes. What typefaces are designed to be readable are extra small sizes?

Once I have an idea of what I want to convey, I do a search to see if Google Fonts or Adobe Fonts have added any new typefaces. If nothing comes up, I check out my favorites. I’m the type that, for fun, browses type foundries and makes a wishlist. What’s nice about this is that when I’m under pressure, I’m not starting from scratch. Plus, I’m on numerous email lists so I try to stay on top of all that’s font news.

Classy, Approachable with a bit of Bold

At first, I decided to go bold and setting my type with a variety of sans-serif typefaces to see how it would render on screen. I go to great lengths to get the sizes right for screens so 2.275rem vs 2.125rem makes all the difference to me. Below are just a few of the choices I explored.

Trade Gothic
Interstate
DIN
Good
Soleil

I eventually went with classy, and decided to set type that is more consistent with publishing websites. Bold, sans-serif headlines with a warm, friendly serif typeface for the body text. I decided to go with FF Real by Erik Spiekermann and Ralph du Carrois, below. The weight is perfect as are the shapes of the individual characters and the space between each character. It’s solid, crisp, modern, friendly. So far, loving it.

FF Real, my final choice

Typeface for charts

For the charts in my project, I wanted to go with a monospace typeface for readability at super small sizes. It’s amazing the number of choices available now for monospace. Some are quite elegant. Plus, there was a quality about them that reminded me of the type etched into cameras before digital.

Body Text

I’m deciding between Droid Sans Mono and PT Mono (above) for my charts and currently going back and forth between using FF Real Text or a serif typeface such as Merriweather, FF Tisa or FF Scala. What’s nice about CSS is that trying all of them out will be fast.

There’s more to explore with type and I’ll be excited when I get to that stage of refinement, my favorite part!

The Importance of Writing & Focusing Narrative

Note: I’m a graduate student at the University of Miami working on my capstone, a visualization of the Pictures of the Year International Archives. If you’re curious about my journey, here are my posts tagged with capstone.

Remember that design process I talked about establishing? Well, apparently I need to print it out and tape it right in front of me.

Dueling Mindsets

This semester has been full of learning the technical. For me, JavaScript, D3.js and some Excel. JavaScript and D3 especially are hurdles. Last semester I finally understood the D3js concept. Once I understood that you load your data, then create invisible frames to then present the encoding of your data, it all made sense. Do I love it? Uh, no. But it is what it is and D3 is the industry standard so like it or not … go.

The struggle is in learning too many different things at once. When I’m in D3 mode, I’m in that mode and trying to get the clear ideas I have in my head to display on the screen. I’m not paying attention to details such as annotations, grid lines or thinking about narrative. Even shifting to CSS and HTML is a big shift. My fingers are on autopilot so my syntax is oiled for JavaScript not CSS and HTML. Oh, the mistakes I’ve made!

So when your mind is in one mode, it takes a long time to shift into a different mode, with a different type of language and thought process. Writing an academic paper is different from writing a blog post and writing the story of your data viz project.

“Take a break from the technical and focus on narrative”.

That’s the advice I got from Alberto recently. It makes sense right? I’ve been so focused on learning how to use d3 to make my charts that I don’t really even have a story. I have a general idea but not a complete picture. He is concerned I’ll spend way too much time building charts and not have a story to explain them. Valid!

So for the next few days, I am tasked with writing. No charts, no code. You would think that would make me happy. It does, but… going back into code mode is going to take some time. I just hope the notes I’ve taken are good enough to save me time.

Filter and Focus

Note: I’m a graduate student at the University of Miami working on my capstone, a visualization of the Pictures of the Year International Archives. If you’re curious about my journey, here are my posts tagged with capstone.

The Fun Begins

So now that I have a better idea of what charts to make and have completed some tests to understand d3js I can start building charts and putting the website together in earnest. I also need to review CSSGrid and for that, I’ll look to Wes Bos.

Clean, Filtered Data

So, remember the data viz design process I shared? This is the filter and represent part of the process. But I needed to get even more organized so I created another master workbook with every filtered piece of data organized in a way that makes sense to me. It took awhile, but here it is:

From the above, I created CSV files to load for the D3 charts. It was easier for me to have a “master” where I could leave notes to myself than to create multiple CSVs. I’m sure my process and practice will evolve but for now, this has kept me sane.

Represent Data

Now that I have focus, its really about figuring out how best to represent the filtered data. Horizontal bars or vertical in a group of small multiples? Grouped bars or something more like a population pyramid? Using tools like RawGraphs and Flourish allowed me to quickly see if one was better than the other. I also shared these with my “committee” to get their initial reactions.

I’m starting to get excited about where this is going. You can see I’ve already started playing around with colors that aren’t the usual pink and blue!