C82 - The works and words of Nicholas Rougeux

Routelines

Thu, 01 Mar 2012 05:19:00 EST

Intricate posters of cities outlined only by their roads in beautiful detail.

Look at Cook

Wed, 17 Aug 2011 08:44:00 EDT

Explore Cook County's budget like never before. Look at Cook is a budget transparency tool for examining where the money's in Cook County who's in charge of it. Designed and built with Derek Eder and John Fritchey, Cook County Commissioner of the 12th District.

Visit this site »

Visualizing Metra

Sun, 14 Aug 2011 08:58:00 EDT

When I heard that Metra was planning to cut 46 trains from its service in 2012 to make up for high operating costs, I wanted to see just how much of an impact that would have on their schedules—using a technique from 1885. How the final result came about was a mixture of curiosity and fun with a pinch of obsession.

Inspiration

E.J. Marey's train schedule from for Paris to Lyon, 1885

Anyone who's read Edward Tufte's books is probably familiar with the chart by E.J. Marey on the cover of The Visual Display of Quantitative Information showing the train schedule from Paris to Lyon in the 1880s. Tufte describes it best:

Arrivals and departures from a station are located along the horizontal; length of stop at a station is indicated by the length of the horizontal line. The stations are separated in proportion to their actual distance apart. The slope of the line reflects the speed of the train: the more nearly vertical the line, the faster the train. The intersection of two lines locates the time and place that trains going in opposite directions pass each other.

Edward Tufte, The Visual Display of Quantitative Information

The rich amount of data in this chart has captivated me for some time and I wanted to see how it could be applied to other train schedules. Being a Metra rider for 7 years, their schedule was a natural choice.

Construction

I wanted to update the technique and make the chart interactive so I could easily explore it in more detail so a web interface made the most sense. I chose the excellent Highcharts charting library for the chart itself—primarily because I wanted to become more familiar with it for use in future projects, but also because its flexibility couldn't be matched by other similar libraries.

Collecting the data was next. I started with my train, the North Central Service (NCS), to get an idea of how it would look and if this project was even worth pursuing. After plotting just a few trains, I knew it was going to be interesting.

The time tables were carefully copied from Metra's site into separate JSON files for each schedule to keep the data consistent. This process took the longest and was spread out over the course of two weeks—copying a little here and there when I had the time and between design adjustments. Storing the data in JSON files had an unexpected benefit when I decided to show the proposed cuts and rescheduled trains because adding the extra data was a breeze. All I needed to do was update a few properties.

The times when trains stopped at each station were kept in the order shown on Metra's site mostly because this made the process of copying them into JSON files much faster. The name of each train contains the word "inbound" or "outbound" which is evaluated by the code to determine if times should be plotted as in the order shown in the JSON file (inbound trains) or in reverse order (outbound trains). There are probably more efficient methods or organizing the data.

Design

My original intent was to just plot train schedules and see the interesting patterns they take. After plotting the NCS, Union Pacific NorthWest, and Union Pacific North lines, I started seeing, clumps of lines indicating morning and evening rush hours. I intended to stay true to Marey's technique and space the labels on the vertical axis proportionate to their distance from their respective Chicago stations, however this resulted in overlapping labels for many lines and was not easily preventable within Highcharts. Evenly-spaced labels were used to maximize readability.

I also experimented with different methods of selecting train lines to view their charts including using colors of the lines from Metra's site and ridership reports. These proved to be more distracting than helpful and had several readability problems.

Early mockup showing navigation based on a column chart of ridership for each line and proportionally-spaced vertical axis labels

Early mockup showing navigation based on a stacked bar chart of ridership for each line

Early mockup showing navigation based on a bar chart of ridership for each line

Experimenting with these various navigation techniques made revealed three problems:

Colors were distracting and meant nothing except maybe a little to seasoned riders.
While mildly interesting, ridership data added little value.
It wasn't obvious that any of the navigation techniques were clickable.

Soon after these experiments, I discovered the details of the proposed cuts and adjusted schedules on Metra's site and shifted the focus from simply exploring schedules to showing the impact of these cuts. The final design really started to take shape.

Final design showing Burlington Northern Santa Fe line and zoomed in on inbound and outbound changes

Closeups of evening rush hour schedule on the Metra Electric line (left) and station details on the Union Pacific Northwest line (right)

I removed the bright colors entirely, highlighted the modified trains, and simplified the navigation. A few design notes:

Highlighted important information—cut trains are the most important aspect of the project so they are visible in the navigation in addition to the chart to to make the total number of cut trains per line visible without any interaction and to entice viewers to explore farther.
Simplified color palette
- Red indicates how many trains have been cut at a glance. Red is also typically connected with negative actions so it was a natural choice. Its boldness stands out throughout the entire page. Squares on the chart are for those who may not be able to distinguish between the two colors. They are also similar "stop" icons on media players.
- Blue indicates new or rescheduled trains. It's not as bold as red, but is still easily noticeable. Circles are used to differentiate the trains those that are cut.
- Grey indicates original versions of trains that have been rescheduled and a lighter version is for unchanged trains. Dotted lines reinforce the concept of rescheduling and circles are used to relate them to the new or rescheduled blue lines.
Zooming—Viewers can zoom in on any portion of the chart by clicking and dragging to select the desired area, letting them get a closer look at the fine details of some changes.
Stats—Key stats at the top change with each selected line to show how many trains are cut and how many stops have been added or rescheduled.

More train schedule visualizations

Daily Swiss Federal Railroad chart from Chaux de Fonds, 1932, Envisioning Information by Edward Tufte

Java railroad line, Soerabaja-Djokjakarta, 1937

Tokaido and Sanyo bullet trains from the Japanese National Railroad control room, 1985, Envisioning Information by Edward Tufte

Ridership analysis of Surfliner weekday ridership from California Department of Transportation, 2009. Additional charts are included in a 2009 analysis of passenger loads (PDF) conducted by the California Department of Transportation depicting schedules and ridership, giving them a new dimension of meaning. I hope to add similar data to the Metra visualization if Metra makes the information available.

Wrap-up

What started out as a simple exercise in data visualization quickly turned into an interesting way to examine major proposed change to Chicago's public transit system. The technique I employed was far from new but updating it for today's expectations was a fun challenge. I plan on updating the visualization if Metra formally decides to cut trains to reflect the new schedules.

Updates

August 14, 2011: After a board meeting on August 12, 2011, the Chicago Tribune reports that board members don't see cutting trains as an effective way to reduce their operating costs.
August 21, 2011: Metra posted an announcement on August 19, 2011 about an upcoming meeting of the Citizens Advisory Board to discuss the 2012 budget, fare increases, and service cuts.
August 21, 2011: Metra posted slides (PDF, slides 78–82) from its board meeting on August 12, 2011 containing options and recommendations for service reductions in addition to other topics on the board's agenda.
September 6, 2011: Metra proposed revised schedule changes to just four lines instead of ten lines.
September 8, 2011: Charts updated to allow comparing new and original proposed schedules.

Metra's 2012 proposed service cuts

Mon, 08 Aug 2011 06:37:00 EDT

Interactive chart showing how Metra's proposed service cuts will affect its train schedules.

Visit this site »

Chicago Lobbyists

Wed, 27 Jul 2011 08:01:41 EDT

Intended to improve the transparency of interactions between City of Chicago agencies and lobbyists and their clients.

Focus: Design

Visit this site »

Green City Market

Wed, 27 Jul 2011 08:01:03 EDT

Website redesign of Chicago's only year-round farmers' market promoting local, sustainable farmers, producers and chefs by connecting them to the public through educational programming and special events.

Designed while at Webitects.com Inc.

Focus: Design and development

Visit this site »

American Massage Therapy Association

Wed, 27 Jul 2011 07:59:10 EDT

Designed while at Webitects.com Inc.

Focus: Design and development

Visit this site »

Frost

Sun, 19 Dec 2010 10:10:21 EST

You can purchase this image as a high-quality wall poster thanks to affiliations with Zazzle and deviantART. (Learn more)

Buy on Zazzle | Buy on devianART

Breach

Sun, 12 Dec 2010 06:42:31 EST

You can purchase this image as a high-quality wall poster thanks to affiliations with Zazzle and deviantART. (Learn more)

Buy on Zazzle | Buy on devianART

AIA Chicago 2010 Design Excellence Awards

Sun, 31 Oct 2010 03:07:55 EDT

Designed while at Webitects.com Inc.

Focus: design, CSS/HTML, development

What Our Water's Worth

Sun, 31 Oct 2010 03:06:17 EDT

Designed while at Webitects.com Inc.

Focus: design, CSS/HTML, development

Children's Memorial Hospital Mobile

Sun, 31 Oct 2010 03:05:18 EDT

Designed while at Webitects.com Inc.

Focus: research, design, CSS/HTML

Visit this site »

Why I block ads

Wed, 18 Aug 2010 07:29:24 EDT

Ever since I found out I could block ads, I have. I've even gone out of my way to download Firefox extensions like Stylish to let me write my own styles that block ads not caught by AdBlock. I popped over to NBC Chicago's weather page to see the forecast for tonight and was painfully reminded that I had forgotten to re-enable AdBlock after disabling it for another project.

With ads

My eyes! So much yellow…so much movement…such a loud video that I can't pause, stop, or remove…

Without ads

And people wonder why I hate ads.

Above

Mon, 26 Jul 2010 07:35:19 EDT

You can purchase this image as a high-quality wall poster thanks to affiliations with Zazzle and deviantART. (Learn more)

Buy on Zazzle | Buy on devianART

Warehouse

Sat, 10 Jul 2010 09:54:45 EDT

You can purchase this image as a high-quality wall poster thanks to affiliations with Zazzle and deviantART. (Learn more)

Buy on Zazzle | Buy on devianART

TV cheat sheet: a design exercise

Mon, 05 Jul 2010 03:14:53 EDT

After some recent back-and-forth with Comcast, I upgraded my TV subscription and with it came a raft of new channels with numbers far higher than I ever imagined as a kid. I don't watch TV a lot but I watch it enough to know my favorite channels but with these new options, I needed a cheat sheet. During a recent visit with my parents, my father presented me with a cheat sheet of his own and inspired me to take up the challenge myself.

Digital alternative

Digital TV Guide with truncated and stretched text, plus banner ads on every screen.

The digital TV Guide that came with the upgrade would have been fine except:

four channels are shown at once and paging through hundreds of channels is tedious,
text is frequently truncated to fit on the screen so I never get the full picture,
text is stretched so much that it's difficult to read, and
banner ads eat up valuable screen real estate at the bottom of every page.

The challenge

Now that all my favorites were in HD, which is more fun to watch than the alternative, I needed to learn a new list of 3-digit numbers and remember others as I discovered all the new options available to me. I decided to make this an exercise and spent some time over the long weekend making a convenient cheat sheet that listed all the channels. Fitting the huge list of 406 channels on one sheet isn't easy.

(Interestingly enough, Comcast used to offer cheat sheets a few years ago but stopped in favor of the digital version.)

I needed two lists to find channels:

sorted by name to when I didn't know what number to type in and
sorted by number when I didn't know what channel I was on.

I also wanted to fit both lists on the front and back of a regular 8.5×11” piece of paper.

First attempt: too much chartjunk

I started by copying the Comcast channel lineup into InDesign and dropped the font size down to six points. After adding some lines, columns, and condensing some ranges, I thought it was perfect—until I printed it.

First attempt at a channel cheat sheet—too busy.

Not a bad first attempt but too much chartjunk. The lines looked good on the screen but far too thick when printed on an inkjet, the reversed-out type in the title was impossible to scan quickly, and everything blended together. I tried making the lines thinner, lighter, dotted, etc. but little helped.

Second attempt: white space love

Then I wised up and took the lines out entirely and after right-aligning the numbers, saw that the white space created by the text was enough division between the channels.

Second attempt at a channel cheat sheet—getting closer

It was close but not there yet. The numbers and names blended together too much and I still didn't like that black title bar at the top. I tried making the numbers bold but that made things worse.

Final: less is more

Finally, I removed even more chartjunk by lightening the secondary text. For example, when browsing by number, the number is primary and name secondary and vice versa for browsing by name. Making the secondary text 40% lighter made the primary text stand out a lot more without impeding legibility. Plus, I tightened up the spacing even more creating more room to bump up the font size to seven. I also finally fixed the title bar.

Final channel cheat sheet (Download full version)

I'm very pleased with the final result. There are probably other improvements I could have made like highlighting my favorite channels, color coding different genres, or removing channels I don't get, but I made this for me and a simple list is all I needed. Creating this was also a fun exercise in the idea of removing all you can until only the essential information remains.

I've included a PDF of the final result for those who want to get a better view than my cheap photos above.

Designing Obama arrives

Wed, 23 Jun 2010 03:06:07 EDT

Arriving home from a long vacation is usually met with bills, messages, and piles of emails but this time, an extra surprise was waiting: my copy of Designing Obama.

Saying the book is beautiful wouldn't do justice to the work of Scott Thomas. I'm eagerly looking forward to reading it and thought I'd share a few shots below.

Book sleeve up close

Table of contents

Logo evolution

Initial website concepts

Website feature graphics

Campaign typography

Introduction to Artists for Obama featuring Shepard Fairey's Progress

Artwork by Gui Borchert

Artwork by Jorge Rodriguez Gerada

Order yours

Transport

Sun, 13 Jun 2010 05:03:55 EDT

You can purchase this image as a high-quality wall poster thanks to affiliations with Zazzle and deviantART. (Learn more)

Buy on Zazzle | Buy on devianART

Time-lapse video of Iceland volcano

Sat, 15 May 2010 09:08:34 EDT

Stunning time-lapse imagery of the Eyjafjallajökull volcano in Iceland:

Iceland, Eyjafjallajökull - May 1st and 2nd, 2010 from Sean Stiegemeier on Vimeo.

Mandelbrot fractal art competition exhibitions

Tue, 04 May 2010 10:19:56 EDT

Anyone going to be in San Sebastián, Bilbao, Buenos Aires, or Hyderabad? If you are and enjoy fractal art, take some time to check out the exhibit of 2009 Benoit Mandelbrot Fractal Art Competition winners—including a piece from me.

I'm very pleased that Juice was chosen among the winners of the winners along with several other amazing http://www.c82.net/images by very talented artists.

It's currently on display in San Sebastián (info below) and will be in Bilbao starting May 10 for two weeks. Following that the exhibit travels to Buenos Aires in June and finally to Hyderabad, India for the 2010 International Congress of Mathematicians, August 19–27.

Sala de Exposiciones - Erakustaretoa UPV/EHU (map)
Plaza Oñati, 2
20018 Donostia
San Sebastián, Spain

Fractal art on display in San Sebastián, Spain. Juice on far right. Photo by Javier Barrallo

Fractal art on display in San Sebastián, Spain. Photo by Javier Barrallo

Particulate Matters to Me!

Tue, 23 Feb 2010 10:22:47 EST

Developed for the Illinois EPA, Particulate Matters to Me! is a campaign to raise awareness about keeping the air clean. Visitors can test their knowledge about particulate matter pollution and enter to win an Energy Star appliance.

Designed while at Webitects.com Inc.

Focus: design, CSS/HTML