EXIM Bank interactive

Code, Interactives, Mapping / Nov. 20, 2015

My congressional district maps have gotten a lot of use … this EXIM Bank interactive has two of them! But more interestingly, the maps are topped by scrubbable, linked small multiples similar to ProPublica’s Ambulances for Dialysis Patients on Rise. Unfortunately they break the small multiple rules and don’t have a consistent y-axis, but the guy paying the bills insisted. But still, it was an interesting challenge to solve and at least cools cool.

Check it out here.

exim

CQ alert and newsletter emails

Code, Design / Oct. 1, 2015

These screenshots of the revised CQ email alerts look pretty basic, and it’s completely on purpose. The old emails each had a completely different look, were very complex table-based designs, and were not at all responsive (mostly because when they were made the flip phone was just becoming popular.)

The goal with the new design was to have a great mobile reading experience as well as a consistent brand look. But it was also important that there be enough visual difference that you could easily tell them apart at first glance. The designs are kept minimal for both super-fast loading times and readable content even if images or styles were blocked by the server or email client. You’ll also notice there’s a lot of content in each email — yet another reason to keep the design lean.

alert
budget-tracker

Adding the current Git branch to your terminal prompt

Tips and tricks / Jan. 29, 2015

Screen Shot 2016-01-29 at 1.52.15 PM

Martin Fitzpatrick has a great tip that helps me keep my sanity when working with Git branches. Googling will give you lots of ways of accomplishing this, but this one is simple, straight-forward, and works well for me. I won’t repeat his post, but basically you add a short bit of code to the .bash_profile file that lives in your home folder. Note that if this is your first time altering Bash, .bash_profile may not exist, so you’ll have to create it using Sublime Text or whatever text editor you like.

I like having color in Terminal, but I find a colored prompt distracts from the other colored content, which is usually for colored for more important or informational reasons. This post on OSXDaily has a good rundown of adding color to Terminal.

Here’s my .bash_profile which puts the Git branch in light gray.

# Enable colors
export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad

# Get current Git branch
parse_git_branch() {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

# Prompt appearance
export PS1="\h:\W\[\033[37m\]\$(parse_git_branch)\[\033[00m\]$ "

Oxfam International extractive industries programs page

Interactives / Jan. 20, 2015

Oxfam wanted a way to both illustrate the scope of their international extractive industry programs and tell each individual county’s story. To that end, this single-page javascript application first gives the user a world map with the 36 program countries shaded as well as a list view with a short synopsis of that country’s efforts. Clicking either the map or the list item takes you to the county detail page with a narrative, photo and sidebar bullet-point details.

The final published project looks fairly simple, which I take as evidence of success. Major kudos to Oxfam’s Chris Hufstader and Scott Sellwood for narrowing the focus and editing down the content to just the essentials.

Map shapes came from ever-amazing Natural Earth rendered in the Robinson projection using D3 and TopoJSON. To reduce the size and complexity of the map, the custom TopoJSON includes one object with all the land shapes, and another with just the shapes of the 36 supported countries.

This project was also my first time using Aight to provide IE8 support. I didn’t both trying to come up with a map alternative for IE8 users, but the list view and the country detail pages work well.

Check the project out here.

oxfam-ei-home
oxfam-ei-country2

Minimum wage and poverty mapping for Oxfam

Mapping / Dec. 15, 2014

Oxfam America commissioned a huge study of the impact a $10.10 federal minimum wage would have on the country both at the state and congressional district levels. They asked me to create maps for a small slice of that data. But even that small slice was a big project —there are 20 maps users can explore and 486 print-ready scorecards. Also there’s twitter handles for everyone is congress so users can tweet details about their district and @mention their representatives and senators.

This wasn’t my first congressional map rodeo, but this version added more detail for urban areas like New York, markers for larger/notable cities across the country, and a search to look up a congressional district by street address or ZIP code.

Check the project out here.

min wage 1
min wage 2
min wage 3
min wage 4

CQ.com home page redesign

Code / Nov. 10, 2014

A previous design change to CQ.com proved unpopular with customers. This design provided better page hierarchy and structure and shifted the page’s focus from time-consuming curated news wells to CQ Now, a partially automated feed of breaking news, updates and other key content. Click for a more complete view.

cq home

How to change InDesign’s default screen resolution

Tips and tricks / Feb. 11, 2014

Once upon a time, back in the days of InDesign CS4 and earlier, viewing an image at 100% meant that each pixel in an image took up one pixel on your monitor. So a 50 pixel square viewed at 100% would appear the exact same size in InDesign as it did in Photoshop. It was fancy! But those days are gone. Go to InDesign, create a new document using their 800 x 600 pixel default, take a screenshot and measure. On my 27″ iMac, that 800 x 600 document is actually 1210 x 908 pixels when viewed at 100%. So what gives?

What size is it

Adobe changed the default screen resolution from a strict 72 ppi because monitor resolutions were getting higher as technology improved. If you were working on a print project, an object that was 1 inch wide in your document used to physically measure around 1 inch on your old CRT screen. But as resolutions increased and the world switched to LCDs, that inch kept getting optically smaller. I’m guessing this made some print designers unhappy, though it never bothered me. If you still work solely on print projects you probably don’t care about any of this. In fact maybe you love what Adobe has done.

But turns out InDesign is kinda awesome for creating web wireframes, especially if you’ve spent the last 10 years becoming an InDesign wizard. For years I’ve stuck with InDesign CS4 so 100% could be 100%, but I’ve discovered you can upgrade and eat your cake too! Here’s what you do:

  1. Paste these two lines into your favorite plain text editor:
    app.generalPreferences.customMonitorPpi = 72;
    app.generalPreferences.useCustomMonitorResolution = true;
  2. Save the file with a name something like ‘Monitor resolution – web.js’
  3. Put that file here: Macintosh HD > Applications > Adobe InDesign CC > Scripts > Scripts Panel
  4. Launch InDesign, create a new document, and open the scripts panel (Window > Utilities > Scripts)
  5. Double-click on that new script you added and BAM! … nothing happens. Ok, just wait a sec.
  6. Now double click on the zoom tool in the tools panel (you know, the magnifying glass under the hand) … and now BAM! The document should have just gotten smaller because now a pixel is a pixel — just like the days of yore!
  7. If you need to switch back and forth, create another script file with this single line of code:
    app.generalPreferences.useCustomMonitorResolution = false;

    Call that one something like ‘Monitor resolution – default.js’. Now you can switch back and forth using the scripts panel.

50 Richest Members of Congress

Interactives / Sep. 13, 2013

The annual 50 Richest Members of Congress project is big deal in CQ Roll Call land. This year 27 reporters, researchers, developers and fact-checkers worked on the project over the past 3 months. It’s generally a big hit and gets oodles of page views months and months after it goes up. This year we added lots more data, like breakdowns of asset types, with filtering, sorting and a graph view to help navigate through all the numbers.

50richest