Xkcd's world - pieced together with AngularJS (warning: big images) (embed.plnkr.co)

220 points by geelen ↗ HN
Source here: http://plnkr.co/edit/IfpBH4

This was as big as I could get it before my computer started to grind to a halt, but it's more of a demo of how little code it takes to do this sort of thing in AngularJS than anything else.

Took me away from building http://goodfil.ms for about 40 minutes all up.

50 comments

[ 2.9 ms ] story [ 90.4 ms ] thread
Source here: http://plnkr.co/edit/IfpBH4

This was as big as I could get it before my computer started to grind to a halt, but it's more of a demo of how little code it takes to do this sort of thing in AngularJS than anything else.

Took me away from building http://goodfil.ms for about 40 minutes all up.

The hack is interesting but it ruins the experience of the discovery of the world :(
I can't help to think that these hacks were somewhat expected and intended by Randall
There's some stuff up in the sky that I don't know how you would find otherwise.
Cool hack, but I can't help but feel like this completely misses the point.
After 45 minutes, my index fingers are absolutely warn out from using a trackpad. I really wish he would have made it navigable by more than just click & drag. I do wish this was more thorough, though.
You didn't expect it would be so big?
To me that's why its so magical. Its actually expensive in time and effort to navigate, so you feel like you're investing something in order to explore. This also means that its difficult to see every part of the image, so you're left with a sense of frontiers yet unexplored when you navigate away from the page. The zooming versions are cool but, to me, actually take away from what Randall is trying to achieve here.
I think it still works with zooming because the scale is so extreme that it leaves you wondering whether a tiny smudge is worth zooming in on. And once you zoom in far enough to read the text, the surrounding objects look as big as they're meant to be.
I thought that it was the "click" part of the original navigation that really frustrated me, rather than only seeing a little bit at a time. I gave up on the original in a few minutes because my hands/wrists were aching after using a touchpad and then a mouse

I used the zoom versions after the fact primarily so I could swipe to look at the original 1:1 more comfortably, and then only later to follow up on what I thought (correctly) was just a bunch of blank space. Clicking to drag specifically really dampened my enthusiasm for going off in random directions to investigate the whole thing.

Ahhh I see. I have three finger drag enabled, so not as much of a pain.
I appreciate it. After spending so much time clicking around and enjoying, and being near positive I've seen it all, I like having this to be sure.
Having trouble loading the parent link so here's my own version for anyone else with the same problem:

http://dl.dropbox.com/u/20403079/xkcd1110map.zip

I had this master plan of putting it into a webpage and using some sort of screen-print extension or JS to save it as one huge image. But as of now I've now spent more time on the capture part of it than I did on the initial scripts to grab the files and render them out in JavaScript, and need to get back to work instead.

If this helps anyone get closer to a full image, please post the result!

Full image in PDF (close enough to full res for readable text balloons): http://s.rlink.co/JZ6G
Does this remind anyone else of Limbo, the monochrome video game?
Not enough horrible, pointless deathtraps.
A friend tells me there's a Limbo reference in there but I don't know what it is.
My fully zoomable (think google maps) version based on http://leaflet.cloudmade.com

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

This is pretty awesome and more easily navigable.
this should be on top - great work!
Best one yet in my opinion. Thanks.
Great work, much easier to explore now! I spent far to long this morning dragging myself down a tunnel.
Great work! Two minor problems:

1) Zooming is accompanied by a sideways wobble on Chrome/Linux

2) Solid black tiles are shown as solid white

In the original, the supposedly black tiles were actually just missing images, allowing the black background to show through. That's why they're white here. The author has used a solid background for the whole map, instead of having a black background for the bottom half.
Not sure about 1), but 2) is fixed now.
Thx for the effort, but: I already discovered more than is shown on your map, I think! going left, I followed the first tunnel I found - and found an exit into the open. Could not find that on your version at all. Is xkcd changing tiles?
I must be missing the point to this because I'm having a "huh, cool? move on moment"; but it's the top item on the front page right now. Can someone shed some light at what I'm looking at?
The latest XKCD comic features a panel which you drag around to explore a world. This is that map of that panel.
> If you're having fencepost problems I feel bad for you, son--

> I've got 99 problems but somehow solved 101

lol, if it hadn't been for reinierladan I never would have seen that one. It's http://imgs.xkcd.com/clickdrag/1n9e.png (to the right of the windmills)

Nice one. If it wasn't for myself I wouldn't have found the second x-wing. This thing is too big and too epic.
(comment deleted)
I wanted to do this but felt it is cheating on xkcd. He did not intend this to viewed as such.
Actually, I am pretty certain he fully expected all kinds of alternate views to spring up within hours.
That was the biggest time waster I had in so many time. My hand hurts but I loved it.
Creator of Plunker here. Big thanks to the Nodejitsu and Mongolab folks whose services are strong enough to compensate for my crappy code being hit by a Hackernews assault.