Map of xkcd’s “Click and Drag”

Today’s xkcd comic has probably the largest comic frame ever drawn. You can explore it via clicking and dragging, as the title suggests. It is so large, that it takes a really long time to go through it. So I decided to create an overview map, to aid you in navigation.

This is what I did:
I figured out, that the map pieces follow the URL pattern

http://imgs.xkcd.com/clickdrag/X[n|s]Y[e|w].png,

where n, s, e, w are characters to select the quadrant, and X and Y are positive integers (>=1) with no zero padding. The images are each 2048×2048 pixels in size and are arranged in an orthogonal grid.

The bounds can be found in the JavaScript file http://imgs.xkcd.com/clickdrag/1110.js:

var size=[14, 48, 25, 33];

These are the bounds of [n, e, s, w] respectively, however, I did only find images for [13, 48, 19, 33], a little bit less in the n-s direction, but maybe I was missing something.

I did a brute force download of all the images (sorry Randall) using simple DOS shell commands like this for the s-e-quadrant:

FOR /L %x IN (1,1,25) DO FOR /L %y IN (1,1,48) DO wget http://imgs.xkcd.com/clickdrag/%xs%ye.png

I got 225 files that existed, all others are completely black or white and returned a 404-Not found.
You can find the sorted list of all images at the end of this post.

After I got all the images, I downsampled them to 1/10th, and arranged them with a little C# hack.
Here you can find the result. Gray marks areas where no images are available. These are either completely black or completely white. On the top and left you can find the coordinates of the png files. I added a white grid, so that you can easier follow the coordinates. The black grid lines mark the border between e-w and n-s, although the latter can hardly be seen, since the whole line is set with images.

This map is again 1/10th of my full map, so 1/100th of the original images (click to see full size, otherwise it’s approx. 1/162th):

Overview map 1:100 of xkcd.com/1110

Overview map 1:100 of xkcd.com/1110

You can download the 1/10th map here.
For the full images, please visit http://xkcd.com/1110/.

Thank you Randall, and keep up your great work!!

Edit: Other people’s approaches


A lot of other people on the web did very similar but different approaches. Since some visitors might be interested, here is the list, I found so far.

Zoom-Viewers

http://xkcd-map.rent-a-geek.de/

http://generatedbyatool.net/xkcdclickdrag/

http://servicesbeta.esri.com/demos/web-tiled/xkcd-1110.html

http://69.55.55.246/xkcd/

Large Images

http://www.mrphlip.com/xkcd1110/  (clickable)

http://vervio.us/xkcd

http://edc.srvs.us/1110/

http://explog.in/xkcd.html

http://imgur.com/o42WQ

Maps

http://imgur.com/GDJPL

http://www.baffo.org/xkcd/

http://www.wickedglitch.com/2012/09/full-low-res-image-spoiler-map-xkcds-click-and-drag/

Others

http://dl.dropbox.com/u/543600/1110polar.png

List of Images:

19s4e.png
19s5e.png
19s6e.png
19s7e.png
19s8e.png
18s3e.png
18s4e.png
18s8e.png
17s1e.png
17s2e.png
17s3e.png
17s5e.png
17s6e.png
17s7e.png
17s8e.png
16s1e.png
16s6e.png
16s7e.png
16s8e.png
15s1w.png
15s1e.png
15s7e.png
14s7w.png
14s6w.png
14s5w.png
14s4w.png
14s3w.png
14s2w.png
14s1w.png
14s1e.png
14s2e.png
14s3e.png
14s7e.png
13s8w.png
13s7w.png
13s6w.png
13s7e.png
12s17w.png
12s16w.png
12s15w.png
12s14w.png
12s13w.png
12s12w.png
12s11w.png
12s10w.png
12s9w.png
12s8w.png
12s7e.png
11s17w.png
11s11w.png
11s7e.png
11s11e.png
10s17w.png
10s7e.png
9s17w.png
9s7e.png
8s17w.png
8s7e.png
7s17w.png
7s7e.png
6s17w.png
6s7e.png
5s17w.png
5s7e.png
4s17w.png
4s7e.png
3s17w.png
3s7e.png
2s17w.png
2s9w.png
2s7e.png
1s17w.png
1s6w.png
1s7e.png
1n33w.png
1n32w.png
1n31w.png
1n30w.png
1n29w.png
1n28w.png
1n27w.png
1n26w.png
1n25w.png
1n24w.png
1n23w.png
1n22w.png
1n21w.png
1n20w.png
1n19w.png
1n18w.png
1n17w.png
1n16w.png
1n15w.png
1n14w.png
1n13w.png
1n12w.png
1n11w.png
1n10w.png
1n9w.png
1n8w.png
1n7w.png
1n6w.png
1n5w.png
1n4w.png
1n3w.png
1n2w.png
1n1w.png
1n1e.png
1n2e.png
1n3e.png
1n4e.png
1n5e.png
1n6e.png
1n7e.png
1n8e.png
1n9e.png
1n10e.png
1n11e.png
1n12e.png
1n13e.png
1n14e.png
1n15e.png
1n16e.png
1n17e.png
1n18e.png
1n19e.png
1n20e.png
1n21e.png
1n22e.png
1n23e.png
1n24e.png
1n25e.png
1n26e.png
1n27e.png
1n28e.png
1n29e.png
1n30e.png
1n31e.png
1n32e.png
1n33e.png
1n34e.png
1n35e.png
1n36e.png
1n37e.png
1n38e.png
1n39e.png
1n40e.png
1n41e.png
1n42e.png
1n43e.png
1n44e.png
1n45e.png
1n46e.png
1n47e.png
1n48e.png
2n22w.png
2n4w.png
2n3w.png
2n2w.png
2n1w.png
2n3e.png
2n4e.png
2n5e.png
2n6e.png
2n16e.png
2n17e.png
2n22e.png
2n23e.png
2n24e.png
2n25e.png
2n26e.png
2n27e.png
2n28e.png
2n29e.png
2n30e.png
2n31e.png
2n32e.png
2n39e.png
3n3w.png
3n2w.png
3n2e.png
3n3e.png
3n10e.png
3n18e.png
3n23e.png
3n24e.png
3n25e.png
3n26e.png
3n27e.png
3n28e.png
3n29e.png
3n30e.png
3n31e.png
4n2w.png
4n24e.png
4n25e.png
4n26e.png
4n27e.png
4n28e.png
4n29e.png
4n30e.png
5n2w.png
5n1w.png
5n12e.png
5n25e.png
5n26e.png
5n27e.png
5n28e.png
5n29e.png
6n5w.png
6n2w.png
6n1e.png
6n26e.png
6n27e.png
6n28e.png
7n7w.png
7n2w.png
7n27e.png
8n2w.png
8n1w.png
8n6e.png
9n2e.png
11n11w.png
11n11e.png
13n1e.png
About these ads
Tags: , ,

9 Comments to “Map of xkcd’s “Click and Drag””

  1. Kewl 8-)
    Thx

  2. Reblogged this on My Electric Life and commented:
    As a big fan of XKCD, I have to share this with everyone else out there. I don’t have the coding experience to do this kind of thing for myself, so here is a fellow XKCD lover’s take on it.

  3. entirely too much time was spent on this (both on your’s and Randall’s side)! thank you for keeping me from spiraling into the seemingly never ending abyss that my afternoon was going to become :-)

  4. Can you provide the C script you used to make it into one image?

  5. We did the same thing in different ways… I’ve made a bash script which use the functionality of ImageMagick.
    Well… It’s still going. I’m merging the tiles at 75% of the original dimension…
    How long did you take to do all the work?

    • Can I have that script? I’m trying to merge together the tiles too.

    • A lot of people did very similar things. Nice to watch the different approaches.
      Mine was only 10%, run-time was only a few seconds, maybe half a minute at the last version.
      Overall it took maybe 2-3 hours, with a little tweaking of the visualization and my own exploration of course.

      • Just ended the last version and it works like a charm… almost XD
        It had some rules of course:

        1. the files MUST be named as you download them! (xnxw.jpeg) <– jpeg!!!
        (now i realized i can get rid of the extension and made it work aw, but it's 00:30 here and i'm going to sleep!)
        2. the script use ImageMagick so you must have it installed on your machine. No alternative!
        3. the all the files, but the script, MUST be in this folder "cd ~/Desktop/xkcd/" cos the script will search them there…
        4. ImageMagick have a limitation on the dimension of images it can work on. So resulting image, after the merging work, will be divided in 4 just like a cartesian plane.

        Don't blame me… Apple did worst with his iOS6 :P
        I spent few hours working on something I've never seen in my life (bash command line) and I ended up with this!
        Anyway, there are comments in the code to understand and modify whatever you want!
        I will appreciate every suggestions and critics!

        Here the link to download it. (I put inside two images, _black and _blank, to fill the empty spaces)
        http://cl.ly/3f102y2P1i20

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: