
Show HN: Visualizing Postmates' first 1000 deliveries in San Francisco - bastian
http://1000.postmates.com/
======
jqueryin
That is one hell of a sexy (and dynamic) infographic (and page). Congrats on
launch. Pat your designer(s) and frontend devs on the back for a job well
done.

~~~
badclient
I felt like the numbers were too big compared to the text describing them.

I agree that it _looks_ impressive; but I wouldn't say it was as easy to
consume the data it is trying to show.

------
bastian
Hi, i'm one of the founders of Postmates. We just launched Postmates but in
the last 3 month we did over 1,000 closed beta deliveries in San Francisco. We
created this infographic to share some of the insights with you. It would be
great to get your feedback!

~~~
eridius
Hi Bastian. Postmates looks very cool, but the site seems a bit sparse with
details (I did find the help page, but it was very hard). For example, if I
wanted an item delivered, does it need to be boxed up like I would if I were
shipping with UPS (e.g. cardboard box, packing tape, etc.) or are you guys
more flexible (or, alternatively, can you guys deliver a box to the shipper,
wait 2 minutes to get it packed, and then ship it)? How flexible are delivery
times?

~~~
bastian
Eridius, this is great feedback. We can probably do a better job at describing
this process. You do currently don't need to warp your deliveries with
Postmates - so we're pretty flexible. Today our couriers can transport items
that "one" person can carry but we will extend that in the future.

------
tyrelb
Why create your own courier company? Why not leverage and consolidate others.
For example, <http://www.phantomcouriers.com/> Phantom Couriers is the Web 1.0
version of Postmates up here in Canada. I could see them benefiting from a new
UI like Postmates offers... they would already have the contracts with law
firms, etc....

~~~
bastian
We're using existing couriers - instead of creating a new courier company, we
make them more efficient and give them awesome tools.

~~~
tyrelb
Ahh! I had no clue! Awesome you're doing that... would love to use you when
you come to Vancouver, Canada.

------
zeratul
Congrats!

Note to self: great visualization; very good javascript; what would I do to
get those guys on my team ...

Note to bastian: you may consider adding viewport statistics to your google
analytics account (you can add many other useful events the same way):

[http://wishfulcode.com/2011/11/02/measuring-viewport-size-
wi...](http://wishfulcode.com/2011/11/02/measuring-viewport-size-with-google-
analytics/)

~~~
bastian
Thanks Zeratul, that's very kind feedback!

------
hsshah
Congrats on hitting the milestone! The UI is really wicked. Props to the
designers. Mind sharing the technology behind it? All in HTML5?!

~~~
samstr
Hey there,

I developed the site but we have our amazing head of design, Skyler, to thank
for the beautiful layout.

The First1000 site is entirely native javascript/html5/css3. No jQuery or
frameworks. I believe that frameworks are fantastic but only if you are
utilizing their full potential. In the past I've included jQuery for random
bits and pieces but I found myself coding around it and I really don't like
including a library where I only use a couple of its functions.

Here are some of the cool things we included.

Multiple background images in CSS3. This is a beautiful thing. We should
rarely have to nest divs inside divs to achieve a layered background effect
now.

Transitions (Webkit, Mozilla, Opera etc have their own implementations) for
most of the animations you see on the site. I found myself using the
transiton-delay: property a fair bit too. This is really helpful as you can
set a delay before the animation start point. Using delays is how we make the
flip cards start from the top left and gradually flip over to the bottom
right. Each group of flipcards (diagonally) are given a different transition-
delay. We transition opacity, width/height, top/left positioned coords and
background-colors.

We use Transforms to achieve rotation. Each card has a slightly different
angle ranging from -3deg to 3deg. If I had NOT been using transforms then I
imagine each card would have been a nightmare to implement at an angle like
that. It would have taken forever and I would have had to use images for the
text. Thankfully you can transform an entire div (and its contents, of course)
with ease in CSS3.

As you scroll down the page you'll notice the switches on the right
highlighting depending on which card you are viewing. jQuery has plugins for
this kind of thing (to see if an element is visible in the current viewport -
<http://remysharp.com/2009/01/26/element-in-view-event-plugin>) but I thought
it would be a nice challenge to achieve this effect with native javascript.

For things like numeric figures ascending from 0 to 5700 (for example) I used
javascript's setInterval() function with a very short interval adding +10 to
the innerHTML of the container. The loop breaks and clearInterval() is called,
stopping the loop when the desired number, 5700 is reached.

I used a lot more absolute positioning that I would like to, but it worked out
very well.

Transparent PNGs positioned above each card give the 'noise' effect.

I took advantage of lossless PNG compression (using Google Page Speed), and
minified our CSS and Javascript.

Other cool things like text-shadow to make text appear to be slightly raised,
or impressed always come in handy too.

Thanks :)

------
rubyrescue
i have to know which stop light in SF is 20 mins - google turns up nothing.

~~~
bastian
:) Did you click on the video link? It was actually when Obama was in town for
a fundraiser.

------
stwe
<https://1000.postmates.com/> doesn't show the right page, 443 seems to be not
properly configured for this domain.

------
seanplaice
Just a note, doing some liberal hovering over elements might reveal additional
interesting facts to you about the first 1000 deliveries.

------
pyoung
5.7 miles in a city that is 7x7 miles?

Also, 43 minutes to go 5.7 miles? Is that round trip?

~~~
Anechoic
It's San Francisco, so between the hills and the traffic, an average of 43
minutes for 5.7 miles (~8mph) doesn't sound unreasonable.

------
bretthardin
Love the animation. Congrats guys.

------
thomasgerbe
Very pretty.

