Quartz Things @quartzthings - Tumblr Blog

Making a mosaic of Landsat scenes

We just published a story about trash from mainland China ending up on Hong Kong's beaches.

Josh Horowitz a reporter in our Hong Kong bureau was working on the story and had cooked up this diagram based on his reporting.

The basic premise is that trash from the cities north of Hong Kong was flowing out south and west into the ocean, per usual after storms, but atypical winds were pushing that trash back towards Hong Kong.

I thought it was important to show the extent of the urban areas as that's where the trash was coming from. As you can see in Josh’s annotated google map you don’t get a good sense of how large or sprawling those urban areas are. This meant that relying on outlines from shapefiles (basically creating a prettier google map) wasn't going to cut it. We needed to be able to see the cities. We needed to use satellite images.

While I had done this before, processing satellite images is not a simple task. As to help me, my colleagues, and you in the future here’s a run through on how I made it:

1. Search for Landsat 8 data that covers the area around Hong Kong

The USGS has a website called EarthExplorer that lets you search through decades of satellite data. I limited my search to Landsat 8 data with less than 10% cloud cover.

(you can do this search on the command line with landsat-util too but i prefer the web interface. In the future I will probably use this online tool from Development Seed)

2. Copy the scene IDs

Sometimes you only have one, but in our case our area of focus spanned four scenes, which is where all the complexity comes from. Multiple scenes means having to match colors and hide seams where the scenes are stitched together.

I'm doing this for journalism, so I need repeatable processes. I used a Makefile in this case and set a variable for the list of IDs

LANDSAT_IDS = \ LC81220442016038LGN00 \ LC81220452016038LGN00 \ LC81210442014281LGN00 \ LC81210452014281LGN00

(Landsat IDs aren't random numbers, they're encoded with information about the scene. Here are the component parts

L C 8 121 045 2014 281 LGN 00

Which means, in order: Landsat, using OLI and TIRS, on satellite 8, captured at path 121, row 045, in 2014, on the 281 julian day of the year, downloaded at a LGN facility, with an archive version number of 00. You can learn more about that here. What's useful to know is that you can see these scenes are all adjacent because they're on path 121 or 122 and row 44 or 45)

3. Use landsat-util to download the scenes

landsat-util is a great piece of command line software that will download landsat scenes in just the way you want them. I only wanted the bands to make a natural color image so I used this command

landsat download LC81220442016038LGN00 --bands 4328

My makefile did this (and all the other commands below) for every scene based on the list of IDs

4. Use gdal to make 432 composites of the scenes

If you only have one scene you can use landsat-util for this, but because I need to color match all of them I used gdal so that there'd be no contrast adjustment.

gdal_merge.py \ -co "PHOTOMETRIC=RGB" \ -separate ~/landsat/downloads/LC81220442016038LGN00/LC81220442016038LGN00_B{4,3,2}.TIF \ -o LC81220442016038LGN00_rgb.tif

5. Resize and reproject the scenes

If you didn't know, these files are enormous: over 100MB each, in order to stitch them together I needed to reduce their size to 1000px wide to make sure I had enough memory.

At the same time I reprojected the scenes so that they'd be oriented how I wanted. I used UTM 50.

gdalwarp \ -co "PHOTOMETRIC=RGB" \ -t_srs '+proj=utm +zone=50 +datum=WGS84' \ -ts 1000 0 \ -r cubic \ LC81220442016038LGN00_rgb.tif \ LC81220442016038LGN00_rgb_resized_utm50.tif

6. Stitch all the images together

If you're stitching together two scenes from the same path you could probably use schooner-stitch in most cases

schooner-stitch \ LC81220442016038LGN00_rgb_resized_utm50.tif \ LC81220452016038LGN00_rgb_resized_utm50.tif \ stiched_432.tiff

Here's what those results looked like with my four scenes stitched together (after using some other tools to adjust the contrast on each one individually)

The seams are pretty apparent, despite being blended.

Here’s one where the contrast adjustment was done after the stitching (you can see how scenes on the same path—i.e. captures that immediately followed each other—blend much more easily than those on adjacent paths)

n.b. if you get an error from schooner-stitch referencing OpenCV it's probably because you don't have enough RAM to support the operation. You'll need to reduce the size of your images.

So I tried Photoshop's photomerge tool instead, here are where that put the seams:

As you’ll see in a moment, it's way better. Even in the ocean, they're tough to pick out.

7. Adjust the colors of the entire mosaic

Because I haven’t made any contrast adjustments yet the mosaic is still very dark.

Sensors on satellites have a huge range of sensitivity, the brightness of the clouds is vastly different than the brightness of the surface, thus the earth looks really dark, even in the day. So I add a bunch of adjustments to mosaic as layers

Again this allows me to be journalistically responsible by making sure my edits are reversible and non-destructive.

This left me with my final mosaic

8. Annotate

And here's how I used it in the the final graphic explaining the story:

Read all about it here http://qz.com/725498/heres-how-huge-amounts-of-trash-from-the-pearl-river-delta-washed-up-on-hong-kongs-shores/

And check out my complete Makefile

—David Yanofsky with thanks to Rob Simmon, Jeff Larson and Alex Kappel

The most important things we learned in our first two years of chartbuildering

In July 2013, we released a simple charting tool with a simple premise: great-looking charts, fast, easy enough for anyone to use. Since then, Chartbuilder has caught on. At Quartz, reporters have published thousands of charts that make their stories more compelling and the data they're writing about more understandable. Elsewhere, Chartbuilder has been used or forked to suit the needs of news organizations large and small.

Today, we're releasing a fully rewritten version of the software as open source. (It's connected with the launch of a new platform for charts, Atlas, that we're also launching today.) While there are lots of new things to get excited about with this release, more exciting are all of the things we've learned since version one.

Maintaining an open source project is hard

Between responding to people's off-topic questions, never being able to find time to work on new features, and dealing with small bugs, it can be difficult to stay motivated to push the project forward. Not to mention the conflict of interest between what is a high priority for us at Quartz to build versus what is a priority for those outside of the organization. We also want to encourage more people who make use of the project to contribute back to it. This new release is intended to encourage all of that.

Don't write your own charting framework

The biggest impediment to adding new features to Chartbuilder was our own bad code, a lot of which was written before we had any idea that Chartbuilder was going to become a open-sourced tool or even a newsroom-wide tool. Now, instead of having to code a new chart type from scratch, we can rely on the work of countless others who have done the work already in a way significantly better than we ever could have—namely, D4, a charting library by Mark Daggett.

The idea has caught on

Since we open sourced Chartbuilder, the New York Times, Wall Street Journal, and Bloomberg, have built their own custom software to allow more people in their newsrooms to make charts more quickly. Organizations like NPR, CNBC, and The New Yorker have created customized versions of Chartbuilder.

The initial constraints we set were much too loose.

When we first rolled out Chartbuilder to the Quartz newsroom we allowed for an unlimted amount of data to be plotted in 56 different colors. This level of flexibility ran counter to our ethos: Chartbuilder was creating ugly and hard to understand charts. Our current version of Chartbuilder has 11 colors (two hues in four values plus three grays) and allows no more than 11 data series.

Reporters can make charts just fine

At Quartz, where every reporter is empowered to make her own charts, it's not that we never make bad data visualizations, but they have turned out to be few and far between. Part of the reason is that Chartbuilder really only allows for simple charts. These are much harder to screw up than abstract visualizations.

It's made us faster and a little lazier.

Medium-sized data that might have been turned into a more complex visualization now tend to get squeezed through Chartbuilder. That's certainly faster, and most of the time, it's the right call. When our reporting gives us lemons, we make lemonade instead of lemon meringue pie. We've also found Chartbuilder to be a great tool in creating more complex static graphics. Instead of manually drawing shapes and layouts in Illustrator, we create a Chartbuilder chart and heavily modify it into something completely unique.

It's been a successful platform to teach reporters new skills

We've trained our top Chartbuilder users how to use Adobe Illustrator to annotate and make basic customizations to their charts. It has allowed them to gain further control over the crafting of their content, and removed a burden from the team I'm on.

Where will Chartbuilder be in another two years? Who knows. But we look forward to learning and coding with you. If you're interested in giving Chartbuilder 2 a spin, you can download or fork it from our Github repo, or for the less technically inclined test it out on the hosted version.

Turning 5,369,091 data points into a map

Yesterday I published two maps about global seismic hazard.

Here’s how I made them.

I was collaborating with Annalisa Merelli, she had been looking into other places at risk of major earthquakes following the devastation in Nepal and wasn’t finding much good to go by. The best she found was this map from 1999 created by the now defunct Global Seismic Hazard Assessment Program:

There are a number of problems with this map, ranging from those caused by human perception to those caused by our house style preferences. But data quality was not an issue. Annalisa made a phone call to an expert we learned that the data from this 1999 map is the best mankind has on the subject.

Thankfully GSHAP published all of their data before shutting down, and it is still available on their website. Not so thankfully, the data is a 5-million line text file.

Each line contains a latitude, longitude, and data value. I turned this file into an image using python

#!/usr/bin/env python # encoding: utf-8 import Image def main(): #open the data file with open("GSHPUB.DAT") as f: data = f.read().split("\r\n") data = map(lambda x: x.split("\t"), data) #define the dimenstions of the image #one degree for each 1/10th of a degree width = 180*2*10 height = 90*2*10 #create a new image object img = Image.new("RGB",[width+1,height+1]) pixels = img.load() #loop through the data for d in data: try: #shift the data to be all positive numbers x = int(float(d[0])*10) + (180*10) y = height - (int(float(d[1])*10) + (90*10)) #set no data to 0 c = int(float(d[2])*10) if d[2] != "NaN" else 0 #if the data is set too far east...wrap it to the west if x > width: x = x - width #assign the data and check for errors try: pixels[x,y] = (c,c,c) except IndexError: print x,y,c except ValueError: print d #save the image img.save("output.tiff", "TIFF") pass if __name__ == '__main__': main()

That gave me an image that looked like this

To make this useful all I had to do was geocode the image. I followed this tutorial to do that in QGIS, to turn my basic tiff into a geoTiff.

I loaded up my fresh geoTiff into QGIS, clipped the areas for non-land areas after reading this answer on stack exchange, mapped a purple color ramp to the the black/white values, and overlaid the normal map accoutrement—grids, borders, lakes, cities.

I spot-checked some values on the map I made against the values in the original.

The final step in QGIS was reprojecting the map into something a little more suitable for our selected areas of focus and exporting as a pdf.

After cleaning those files up in Illustrator, and adding titles, sources, and legends, the maps were ready to go.

Here’s the full story: This map shows where the strongest earthquakes are expected to strike

If you want to try to run this yourself, here’s my a make process.

—David Yanofsky

How the special SRCCON edition of the Quartz Daily Brief came to be

When we got on the train to Philadelphia, creating a daily brief for SRCCON wasn’t on our list of ideas for commemorating Quartz’s participation in the conference.

We considered a range of options: Should we put together a bio page like Vox Media? Create some sort of interactive tool? Something to show our open positions? A session description Markov chain? A @srccon_ebooks twitter account?

We had been discussing such possibilities for about an hour before Nikhil came up with the winner: A SRCCON daily brief. As soon as he proposed it, the suggestion was obviously the one to pursue.

We were probably around Princeton, New Jersey by the time we got coding. Sam started to set up an API and google doc proxy, Nikhil worked on a command-line interface, and I worked on designing and coding a webpage for this to live on.

The train rolled into Philadelphia, and we almost forgot to get off it—we weren’t done yet.

After checking into the hotel and grabbing dinner and beers, we picked up night caps at the hotel bar and got back to work.

Of course, once all the code and design was in place, we had to actually write the thing—we wrapped it up the first edition around 3:30am on Thursday morning.

We had hoped that the second edition would go faster now that the infrastructure was settled. It might have, but after a night of lighting talks, ginquats, and jalapeno tequila, it still felt like an eternity. Edition two went live at 3am on Friday morning.

Friday afternoon I headed to DC while Sam and Nikhil went back to New York. We instant messaged while traveling in opposite directions, and once again Nikhil had the best idea for our next step: Make a summary brief, just like we send to our readers every weekend. A reflective essay on top, followed by more considered highlights from the week (in our case, days).

Once again, the time on the train was not enough bring it to completion. Adjusting some code to accommodate the essay and dropping a section was simple but—as always—words are hard.

We published the final edition on Monday morning, and couldn’t be happier with response we’ve received the last week. Thank you for reading, and we look forward to doing it again. —David Yanofsky

Read our brief online or subscribe to the one our newsroom puts together every day.

Building our election dashboard in three days and 100 emails

On the eve/morning/WOAH TIME ZONES of Indians going to the polls we published our India election results tracker. With any luck, it looks like we spent loads of time on it—contemplating for weeks or months the functionality and design, then responsibly iterating and testing.

In actuality, we decided to make it and build it in just over three days, collaborating with our colleagues in four different time zones. Miraculously, it worked.

Here's a paraphrased selection of the more than 100 emails that were sent in that time to make it happen. (The timestamps are in Central European Summer Time.)

Mon, May 12, 2014 at 12:21 PM: Mitra: We want to make a graphic about the Indian election. Yano how can we do this? We'll need to update it a lot.

Mon, May 12, 2014 at 7:00 PMish I call Mitra to discuss

Mon, May 12, 2014 at 10:59 PM Me: See the attached sketch would something like this work?

Tue, May 13, 2014 at 3:43 PM SK: We need something to show the control of power.

Tue, May 13, 2014 at 11:14 PM Me: How about something like this?

Wed, May 14, 2014 at 2:45 AM Heather: Looks good, but are we going to have to frantically update data for every party? India has a lot of political parties.

Wed, May 14, 2014 at 5:56 AM SK: We only want to show like five or six parties, anyway, don't worry. Also, what are we going to do if the Election Commission website crashes like it did in 2009?

Wed, May 14, 2014 at 12:29 PM Me: I'll add in a way to drop a message at the top. That way we can let people know what's up with the data. Also, here's what it looks like now and how it works.

Desktop:

Mobile:

Wed, May 14, 2014 at 12:29 PM SK: The way you have this working wont work for us logistically

Wed, May 14, 2014 at 4:09 PM Me: Okay I'll try and figure something out. In the meantime can you populate this google doc with real information? Also, here's the current state of the page:

Wed, May 14, 2014 at 4:56 PM SK: You know that some stuff isn't working?

Wed, May 14, 2014 at 5:46 PM Me: Yes, I know some stuff isn't working.

Wed, May 14, 2014 at 8:22 PM Me: Okay everything is working now. But it still doesn't auto update or have a legend.

Wed, May 14, 2014 at 9:26 PM SK: I think we should get rid of the names of the leaders

Thu, May 15, 2014 at 1:40 AM Heather: I think we should get rid of the names of the leaders, too.

Thu, May 15, 2014 at 10:03 AM Me: I think we should keep the names of the leaders.

Thu, May 15, 2014 at 2:26 PM SK: I think we should get rid of the names of the leaders.

Thu, May 15, 2014 at 3:05 PM Me: I'll get rid of the names of the leaders.

Thu, May 15, 2014 at 7:53 PM Me: Here is the almost final page! Here are the docs on how to use it!

Thu, May 15, 2014 at 9:55 PM Mitra: Can we pub?

Thu, May 15, 2014 at 10:21 PM Me: DON'T PUB. I need to test more, and Heather needs to edit the text.

Fri, May 16, 2014 at 12:19 AM Me: Everything is tested, bugs are fixed, and we're ready to go once Heather edits.

Fri, May 16, 2014 at 12:59 AM Heather: Good morning from Hong Kong! We're edited and ready to go.

Fri, May 16, 2014 at 5:33 AM Wordpressbot: Post #209809 was published.

Fri, May 16, 2014 at 10:16 AM Me: Good morning from Geneva. I added a BJP bar to the chart at the top and numbers next to all of the party names.

- David Yanofsky

Chartbuilder's many friends and the value of open source

It's been eight months since we open-sourced Chartbuilder, our tool for quickly making good-looking charts. In releasing the project to the public, we hoped it might promote visual journalism and that new contributors would help make Chartbuilder better.

We're happy to report success toward both goals.

Since we released it to the public, Chartbuilder has been used to make thousands of charts for at least a dozen media organizations, including NPR, the Wall Street Journal, the New Yorker, CNBC, the Press-Enterprise, and New Hampshire Public Radio. Just last week, ESPN's FiveThirtyEight joined the Chartbuilder club.

Isn't that beautiful? Chartbuilder's proliferation gives us renewed confidence in our commitment to open-source journalism. We hope it also inspires others to implement the tool and contribute back to the project on GitHub. Chartbuilder needs your help. It still has plenty of bugs and room for improvement.

In the coming weeks, we will be rolling out a new version of Chartbuilder that Quartz reporters have been using. It resolves some of the strange behaviors that have persisted for some time.

If you want to check it out before then, see this branch on GitHub. Or as always, use the current version online here and submit any bugs you come across here.

If you want to join us making tools like this and reporting through code: we're hiring.

quartz

Quartz is looking for an intern to help us cover technology and science, starting immediately. It’s a paid gig with plenty of opportunities to write. You don’t have to be a current tech journalist, but a familiarity with how we cover the news is essential. The best candidate will be...

yanofsky

I released Chartbuilder last week not knowing what to expect. I had thrown up some gists in the past, but I’d never open-sourced an ongoing project.

I had a fear was that it would be shrugged off with a whimper of notice. I was worried that people who I admired in the industry would...

We've just open-sourced Chartbuilder, the tool that all reporters use at Quartz to quickly make simple charts at graphics-desk quality. Read more about how Chartbuilder came to be and how we use it in David Yanofsky's piece for the Nieman Journalism Lab.

How we found the center of international air travel

While I was making "29 of the world’s largest bike-sharing programs in one map," my colleague Ritchie sent along a New Yorker article from March about Neil Freeman, the man who created "Subway systems at the same scale" that inspired the bike map.

In the article, Freeman brought the New Yorker's Jason Fagone to the geographic center of New York City's road intersections.

It was a unfamiliar concept to grasp, but Fagone described it like this:

if the city was a giant cookie tray and you put a tiny weight on every intersection, the tray would balance on this point.

We like writing about air travel at Quartz, so I thought I'd try creating a similar map, at a global scale, with airports. Then, to make the results more meaningful than "this is the center-most airport," I decided to weight every airport by the number of routes that came out of it.

When calculated for the entire world, it would show the average midpoint of every airline route. When calculated for a country, it could show the average destination.

I wasn't entirely sure of the proper math to do this, so I just tried to replicate the cookie tray analogy: For every country, take the destinations of every departing route and average the latitudes and longitudes of every destination.

This was the result

All the calculated center's of gravity were clustered in the Atlantic Ocean: clearly wrong.

The limits of the cookie sheet method was revealed. Cookie sheets are flat and have a cartesian coordinate system, but planets are round and have a polar coordinate system.

Before submitting myself to the mind-bending geometry that is three-dimensional trigonometry, I searched the internet to see if someone else has tried to accomplish the same.

I found this question on the GIS Sack Exchange—"Computing an averaged latitude and longitude coordinates"—and converted the code to Python, which is what I was using to parse and combine the three databases from OpenFlights.

import math import numpy def toCartesian(t): """Convert a tuple of lat,long to x,y,z""" latD,longD = t latR = math.radians(latD) longR = math.radians(longD) return ( math.cos(latR)*math.cos(longR), math.cos(latR)*math.sin(longR), math.sin(latR) ) def toSpherical(t): """Convert a tuple of x,y,z to lat,long""" x,y,z = t r = math.hypot(x,y) if r == 0: if z > 0: return (90,0) elif z< 0: return (-90,0) else: return None else: return ( math.degrees(math.atan2(z, r)), math.degrees(math.atan2(y,x)) 3) #use numpy to allow for easy vector and matrix math xyz = numpy.asarray([0.0,0.0,0.0]) total = 0 for p in points: weight = p["weight"] total += weight xyz += numpy.asarray(toCartesian((p["lat"],p["long"])))*weight avgXYZ = xyz/total avgLat, avgLong = toSpherical(avgXYZ) print avgLat,avgLong

New code written, I tested out another map:

That pink dot is supposed to be the center of gravity for the flights from Saudi Arabia shown... It's not.

Looking for some help, I posted my code to the GIS Stack Exchange, tweeted it, and retweeted it.

Turns out I had a bug in my code (not shown above), but when I went and tried the data again, I still had issues.

A math nerd friend chatted me. We talked it over. He asked if I had tested it. Turns out I hadn't...I'm an idiot.

I ran some tests on the averaging code I wrote and made some test maps. (The pink dot is the calculated center)

Turns out that was all working, it was my input data that was wrong. So I rewrote my parser and tried again:

It worked.

If you're wondering, I was using Tilemill to make these maps from the CSV files my Python script exported. To create the flight paths and lines connecting the center of gravities to the country I put a geojson blob in the CSV.

That method allowed me to make a map of all of the international routes:

Unfortunately, Tilemill draws the lines connecting points after the map data is projected. This means that the paths shown are not actually the shortest distance between the two points.

The only way to accomplish this was to write some more code that would convert two endpoints into a series of points along the great circle that runs through it. I found the formula here, converted it to Python and created a way to loop through it.

There were typos and bugs:

But I figured out the code eventually:

def greatCircPoint(start,end,d,f): #from http://williams.best.vwh.net/avform.htm#Intermediate lat1 = math.radians(start[0]) lon1 = math.radians(start[1]) lat2 = math.radians(end[0]) lon2 = math.radians(end[1]) A = math.sin((1-f)*d)/math.sin(d) B = math.sin(f*d)/math.sin(d) x = A * math.cos(lat1) * math.cos(lon1) + B * math.cos(lat2) * math.cos(lon2) y = A * math.cos(lat1) * math.sin(lon1) + B * math.cos(lat2) * math.sin(lon2) z = A * math.sin(lat1) + B * math.sin(lat2) return toSpherical((x,y,z)) def greatCirclePoints(start,end): # 3963 is the radius of the earth num_points = float(round(greatCircDistance(start[0],start[1],end[0],end[1])/(3963/2)*15)) if num_points < 4: #make sure there are at least 4 points on the path num_points = 4 pnts = [0]*int(num_points+1) dist = arcD(start[0],start[1],end[0],end[1]) for i in range(int(num_points+1)): pt = greatCircPoint(start,end,dist,(i/num_points)) pnts[i] = pt return pnts

The exported maps from Tilemill looked something like this:

and after the final touches in Illustrator:

See the rest of the maps and read "The average destination of international flights from every country in the world" and "The center of the international airline industry is in the middle of rural Poland" on Quartz.

Get your hands on the same flight data we used from Openflights.

–David Yanofsky

#airlines #flight #gis #data-visualization #dataviz #map #mapping #tilemill #quartz #qz

Quartz Things B-roll vol. 3

See the slides that made the cut here: A brief history of the US government’s awful graphic design

#design #powerpoint #government

Plotting some dots

Like every news organization and their sisters this week, Quartz felt compelled to acknowledge the (delayed) launch of the New York City bike sharing program.

As is always the case here at Quartz we try to keep our content globally relevant. While the New York system is large, it's really late to implementing this type of policy compared to other cities around the world. There are already more than 500 municipalities with similar systems.

To say the least, I was skeptical that we should be covering this story.

But then like a super hero in comes Roberto with a instant message, "here's a website with all of the information you'd ever want about a whole bunch of bike sharing systems http://bikes.oobrien.com/"

The site had geolocation data for 85 cities.

I saw it and immediately knew what I was going to do [1], then sketched something highly detailed to sell everyone on it:

The top was what I drew then, the bottom came later. I tried to find links to the subway maps I had seen displayed in similar ways, but I couldn't find them at the time. "Trust me, It'll be great," I said.

(I found those links later, here, and here)

I collected the geo data from bikes.oobrien.com using a python script, opened it up in tilemill and exported a really big pdf map that looked like this:

An hour of Illustrator selecting grouping and resizing later and we had this:

Then some more fiddling, versioning, and alt-dragging:

some copy writing, and editing, and hand wringing over a Headline and kicker later, we published (sans kicker).

Read the story on Quartz: 29 of the world’s largest bike-sharing programs in one map

[1] It turns out that Oliver O'brien had made a similar map last year

The best things can't be planned. The "sleeps" post began life as something Leo wrote, but making a different argument. David and Ritchie were separately working on an analysis of the tweets, but didn't really know what to say about them. I suggested pairing the two. Zach saw a way to do that by giving the post a new spin.

Gideon Lichfield regarding "We know when Dzhokhar Tsarnaev sleeps"

Quartz Things B-roll Vol. 2

Everything you ever wanted to know about baseball ticket prices

Quartz Things B-roll Vol. 1

The Beatles’s first album turns 50 years old today

These tweets didn't make the cut

Mapping the debt ceiling debacle: There be dragons!

Sometimes, we at the things team like to pair up with our more writerly colleagues to work on a story. Especially when he or she has a killer idea.

When Tim Fernholz (aka Quartz Los Angeles) approached us with the notion of a making a sort of decision tree showing all the options the US has for dealing (or not dealing) with the debt ceiling, we were intrigued. Certainly seemed useful. Then he emailed me this awesome sketch:

I mean, look at that dragon

Maybe I’m biased because I spend all my time making graphics using software, but I think there’s something really charming about hand-drawn charts and diagrams. At any rate, I proposed that maybe we publish a cleaned-up hand-drawn version of Tim’s chart. Then, I quickly took it back after remembering how many damn circles I had to scrawl before I was able to publish this pretty basic thing.

So, I offered to do a quick mock-up, and Tim sent me some text to fill the chart out a bit and make it clearer. This is is what it looked like:

Not bad. It was now even clearer that this chart was just a really well-conceived idea.

The dragon was a placeholder. I changed some of the formatting, added some text, and then Tim and I started combing Wikimedia commons for a dragon that was in the same strata of coolness as his original sketch.

I found this one in an old map but I was kind of on the fence about it:

Then I got thrown off track after coming across this perplexing and revolting Eye of Sauron cheesecake.

Tim suggested this Dr. Seussian thing, which is pretty compelling. It's some sort of unicorn Luck Dragon servent, apparently both a pedestal to assist with divination and a towel rack:

But after that, while I was still in the flickr weeds, Tim claimed to be "dragnostic" and I started to get worried that we might not find the right beast. I shouldn't have doubted. Tim chatted me a link to this chimerical griffin-worm, and I knew right away it was the one.

The insipid and sharp-toothed head-head combined with the diminutive and depressed tail-head seemed somehow like the perfect combination to represent the strange and uncertain territory the US will find itself in if congress fails to raise the debt ceiling.

Here's the final graphic. The post can be read in its entirety here.

- Ritchie King

How we built hastheusgoneoffthefiscalcliff.com

Today we put hastheusgoneoffthefiscalcliff.com to sleep after a month of service, so we wanted to explain how it came to be.

How did the site work?

We had a DSLR plugged into a AC power supply, on a tripod, hooked up to a Mac Mini with a USB cable:

The Mac Mini ran a bash script every 5 minutes through the crontab

the script triggered a camera capture through the USB cable and downloaded the image

the script created two smaller resized copies of the image (one for the site one for social media use)

the script uploaded those images to our web server, replacing the previous captures

the script put a timestamp in the full sized image's filename and moved it to an archive on the Mac Mini (for posterity)

The webpage was hard coded to the location of the image file and had some javascript that would update the image every 2.5 minutes (faster than images are taken to reduce the lag between what one user may see and what is actually in the office). That script used jQuery and looked like this:

setInterval(function() { $("#camimg").attr( "src", "http://hastheusgoneoffthefiscalcliff.com/imagecapture_1000.jpg?timestamp=" + (new Date()).getTime() ) },1000*60*2.5);

This redefined the path to the image every 2.5 minutes; appended with the date stamp as a parameter to make sure we dont get a cached version of the image.

The clickable areas were defined in a Google spreadsheet that was loaded in every time the page loaded and on each subsequent image replacement. We updated this document by hand every time we changed the wall.

How was the wall work?

The hard way: Every morning we got up, printed out some headlines, tweets, quotes and pictures, tiled them together and taped them to the wall.

Why??!

The idea for the single serving site from the beginning was Zach's. Sometime in October he noticed that that the hastheusgoneoffthefiscalcliff.com domain was available to register, and he brought it up as something maybe worth pursuing. The first idea he sketched out was this:

A man who slowly inches towards the edge of a cliff paired with links to stories around the web about the topic and an explanation of what the fiscal cliff was. That conversation devolved into the merits of different depictions of cliffs:

After seeing Brian Rea's coverage of the US Presidential Election Night on Instagram and remembering the website for Sagmeister and Walsh, I thought about making a webcam of a wall of stuff. I made this as a proof of concept:

Everyone got on board, and this is what resulted over the next month:

- David Yanofsky

View the code on github

Development time: 2 days

Trending Blogs

Recently Viewed Blogs

Quartz Things