We Built Interactive Seating Maps Using Raphael; Please Give Us Feedback(seatgeek.com)
seatgeek.com
We Built Interactive Seating Maps Using Raphael; Please Give Us Feedback
http://seatgeek.com/event/show/457589/green-bay-packers-at-atlanta-falcons-2010-11-28/
80 comments
I was researching button colouring the other day and contrary to expectation red is actually normally more clicked on than green (yes, despite the go-stop metaphor).
Depends of course on specific implementations but might be worth trialling shades of red down to white (best down to worst).
Depends of course on specific implementations but might be worth trialling shades of red down to white (best down to worst).
Looks awesome. I will definitely use this from now on. A couple questions:
1) When did you guys release this? I have used SeatGeek before and thought I saw this awhile ago.
2) How many venues do you have this for? The entire country?
Zooming in is awesome. Default map view is a little weird. Slider could be a tad more responsive.(could be chrome)
Overall much better than your last version.
Zooming would be even more awesome if the symbols (+ -) were not covered by the info bubble on certain seats. For example, Shea Stadium section 325. The map is fun.
I think this is awesome. If you could allow me to zoom in and out via the scroll-wheel on the mouse (or maybe double-clicking in an area) that would be really great! I will definitely be using this for all my future ticket needs!
I used to be a developer at Ticketmaster, and all I can say is kudos, great job!
It took TM/LN an absolutely ridiculous amount of time to build their own half-assed interactive seating charts, and yours beats all the big guys. Don't worry about them shamelessly copying your version—they literally won't be able to, even if they wanted to copy it wholesale, trust me(complicated data issues). :P
Incidentally, where'd you get your venue data? I always thought venue seating maps should be publicly available, like open street data.
It took TM/LN an absolutely ridiculous amount of time to build their own half-assed interactive seating charts, and yours beats all the big guys. Don't worry about them shamelessly copying your version—they literally won't be able to, even if they wanted to copy it wholesale, trust me(complicated data issues). :P
Incidentally, where'd you get your venue data? I always thought venue seating maps should be publicly available, like open street data.
Thanks so much, that's awesome to hear.
Collecting the venue data was definitely a bit of a challenge. We used a combination of publicly available seating charts, google earth (believe it or not) and our own transaction data. It's easy enough to get a rough idea of the section sizes/layout. Getting row counts and names was a bit tougher, and our transaction data was a big help there.
Collecting the venue data was definitely a bit of a challenge. We used a combination of publicly available seating charts, google earth (believe it or not) and our own transaction data. It's easy enough to get a rough idea of the section sizes/layout. Getting row counts and names was a bit tougher, and our transaction data was a big help there.
Very pretty, fun to play with.
The rollovers are getting chopped off for most of the right side of the map -- they run off the right edge of the page. Can they be pulled in?
At least initially, I was leery of clicking -- but it turned out to stay on the same page, and doesn't have the same problem as the rollovers.
Nice job.
The rollovers are getting chopped off for most of the right side of the map -- they run off the right edge of the page. Can they be pulled in?
At least initially, I was leery of clicking -- but it turned out to stay on the same page, and doesn't have the same problem as the rollovers.
Nice job.
This is an incredible app. Seriously. Well done.
Two UI suggestions:
- mouseover the section should display the popup, not just mouseover on the dot
- after a click on the dot, clicking anywhere else should close the popup
In addition, it wasn't immediately clear to me that zooming in would show more detail.
Very cool, great job.
- mouseover the section should display the popup, not just mouseover on the dot
- after a click on the dot, clicking anywhere else should close the popup
In addition, it wasn't immediately clear to me that zooming in would show more detail.
Very cool, great job.
Thanks for the suggestions.
Mouseover on the whole section is definitely nicer but unfortunately it caused some performance problems in IE (rendering a ton of paths is slow). Hopefully we can figure out a more performant way of doing that.
One disadvantage of closing the popup on any click is that you might want to drag the map with the popup open, though it would be nice to not have to click the 'x'. Certainly something to consider.
Mouseover on the whole section is definitely nicer but unfortunately it caused some performance problems in IE (rendering a ton of paths is slow). Hopefully we can figure out a more performant way of doing that.
One disadvantage of closing the popup on any click is that you might want to drag the map with the popup open, though it would be nice to not have to click the 'x'. Certainly something to consider.
close it if the click is _not_ a drag?
How did you learn Raphael? The documentation seems a little thin but I'd love to use it to build some graphs.
Typically when working in Raphael, I'll just design whatever I need in Inkscape first, then export to SVG. From there just dump the raw SVG data into Raphael and you're good to go.
It's a rather thing wrapper around SVG (I don't mean any disrespect with that statement), so learning SVG is a good start.
g.raphaeljs.com
The bad deal/great deal scale made me wonder what that calculation is based on. Is there an explanation somewhere?
We built a model that takes every seat in a stadium and assigns a fitted price to it ("fitted" in the econometric sense, meaning what the price should be for an average game). That's based on long-term historical transaction prices for each section and scaling factors for things like the row, number of tickets, angle to field, and some other inputs.
Then, for each ticket we compare the actual price to the fitted price and look at the deviation as a percentage of the fitted price, i.e. (acutal price - fitted price)/fitted price. The tickets with the biggest deviations are ranked as the best deals.
We certainly need to add an explanation of this to the site; thanks for the suggestion.
Then, for each ticket we compare the actual price to the fitted price and look at the deviation as a percentage of the fitted price, i.e. (acutal price - fitted price)/fitted price. The tickets with the biggest deviations are ranked as the best deals.
We certainly need to add an explanation of this to the site; thanks for the suggestion.
First off, amazing stuff.
I came to this thread to find this explanation. Thanks for writing it out. In case you're wondering, the first place I looked for the description was on the legend in the lower right, I expected something to be clickable that would tell me what a "deal" meant. You might want to place the explanation down there. Even a "title" attribute would be a quick win.
I came to this thread to find this explanation. Thanks for writing it out. In case you're wondering, the first place I looked for the description was on the legend in the lower right, I expected something to be clickable that would tell me what a "deal" meant. You might want to place the explanation down there. Even a "title" attribute would be a quick win.
Do you account for seats behind pillars etc? How about asking people to enter their height and then discounting seats behind tall people? :-P
Wheres the hand icon that lets you know you can drag the map for a better view? The tags at the end were cut off and it took me a second to realize I could drag the map.
Not loading for me - Chrome, OSX.
Not sure if original link is direct to seating - but if it is, it does not render on my HTC desire with Android 2.2 and mobile safari. I use Raphael on one of my websites and have similar problem there.
Doesn't work on my Droid with 2.2 either. I loaded it twice, over twelve hours apart, from different locations. Just shows a gray rectangle where the tickets should be (after showing the loading animated gif for several painful seconds) and a white area where the stadium should be. Works fine on Firefox. I think it is important to support mobile - at work, one may rather not have their employer know that they are spending time looking for tickets. Hopefully it is possible to give a good experience. The chrome takes up most of the display in landscape mode, though when I rotate to portrait, there is much more space.
One other thing: is there any way to keep the dots from displaying until the map is loaded? It is jarring for me to see them floating out in white space. Yet when the map is cached, the map displays before the dots.
One other thing: is there any way to keep the dots from displaying until the map is loaded? It is jarring for me to see them floating out in white space. Yet when the map is cached, the map displays before the dots.
Not loading for me as well - Safari 5.0.2, OS X
It didn't load for me either. It seems to be just that game though because this one worked for me. http://seatgeek.com/event/show/457428/green-bay-packers-at-p...
Seems to be a caching bug, we've redeployed and all is no longer lost :) Please try again, we definitely appreciate finding edge-cases like these.
Also, I agree that it needs to be made more obvious that the "dots" appear in rows as you zoom in. Also, making the zoom work with the scroll wheel on a mouse would be key.
Good point thanks. Have heard this from a few different folks now. We need to make it more obvious that people should zoom in. Will push a fix soon.
1. Great job! The one thing I found missing is zooming in and out with the mouse wheel.
2. I'm amazed how ridiculously better this is than the flash version :)
3. Thanks for letting me know about Raphaël - it looks like a very cool tool. I'll definitely toy with it now :)
2. I'm amazed how ridiculously better this is than the flash version :)
3. Thanks for letting me know about Raphaël - it looks like a very cool tool. I'll definitely toy with it now :)
I was looking for the zooming too. At least allow me to scroll up and down the map until that is implemented.
You can zoom using the arrow buttons on the top-right of the maps. We definitely have on double-click and mous wheel zooming on the pipeline.
Awesome job guys
I was initially shocked when I zoomed in on one of the dots and immediately saw "Bad Deal" ... I thought WTF is this guy trying to lose customers?
But then I thought of how I felt as a customer! And it was good.
It's really a fantastic looking engine really nice. I'm interested in how you're going to use it... a "craigslist" for tickets? Relicense to ticketmaster et. al. ?
Something else?
Whatever - you've built something really cool, now you can figure out how to monetize it.
But then I thought of how I felt as a customer! And it was good.
It's really a fantastic looking engine really nice. I'm interested in how you're going to use it... a "craigslist" for tickets? Relicense to ticketmaster et. al. ?
Something else?
Whatever - you've built something really cool, now you can figure out how to monetize it.
SeatGeek is already an affiliate to the larger ticket selling sites (StubHub et al). This replaces/upgrades their flash version.
This is really cool. I didn't realize all these ticket brokers had affiliate setups and such good data feeds. I guess those hefty fees allow for it.
It's like HipMunk for stadium seats! (Or is HipMunk the SeatGeek of air travel?)
How many more startups are possible on the theme of creating radically more interactive and usefully-laid-out interfaces to other sites' transactions?
How many more startups are possible on the theme of creating radically more interactive and usefully-laid-out interfaces to other sites' transactions?
As a Skins season ticket holder and now marketing dude at hipmunk, I'm doubleplus thrilled about this great site. Well done, Seat Geek. Such a universal problem across every single ticket site -- solved!
Please please please do this for the UK market!
And maybe NCAA?
Ditto on NCAA. There's many more stadiums, and college ticket trading is huge business. I guess concert venues could work as well. Pretty much anything with seats and tickets.
We currently index events and tickets for Concert, Theater, Professional Sports, and certain collegiate sporting events, as well as things like Nascar and Tennis.
Where was this when I was doing my wedding. Cool stuff
Outstanding! I'm going to use the hell out of this for any sports tickets I buy from now on. Well done!
This is incredibly impressive Jack, Russ and team. Excellent job!
Who ended up working on the design? It's very sharp and clean inside the application.
Who ended up working on the design? It's very sharp and clean inside the application.
This is really cool. It comes at the right time as I'm researching some NFL tickets.
One thing I really, really wish I could do is sort or filter by row # like I can with stubhub. When I go to something expensive like an NFL game, I really don't mind getting an ok or even bad deal if I know I'm getting a great view. It's going to be expensive anyway.
Otherwise, good work. Have you guys seen sites like www.seatdata.com that show photos from sections? Seatdata is rough to use, but sort of indispensable if you are traveling somewhere you've never been to see your team. Is it even legal to use photos like that?
One thing I really, really wish I could do is sort or filter by row # like I can with stubhub. When I go to something expensive like an NFL game, I really don't mind getting an ok or even bad deal if I know I'm getting a great view. It's going to be expensive anyway.
Otherwise, good work. Have you guys seen sites like www.seatdata.com that show photos from sections? Seatdata is rough to use, but sort of indispensable if you are traveling somewhere you've never been to see your team. Is it even legal to use photos like that?
Wow. Great work guys. I am impressed with the data collection, but even more impressed with the attention to detail given to the interface. I love how big circles represent better deals.
Very cool, very usable.
Where you could improve: seems rather slow to load on Safari/Mac. Also bothers me that the mouse-over for sections near 333 is off-screen at 1280x960. Could you have it show up on the other side of the pin, just like it does when I click?
Where you could improve: seems rather slow to load on Safari/Mac. Also bothers me that the mouse-over for sections near 333 is off-screen at 1280x960. Could you have it show up on the other side of the pin, just like it does when I click?
[deleted](1)
This is great. One small suggestion: when you have data for where seats are and the user clicks to zoom into the section, show empty circles for seats that are already purchased. Showing a couple random colored circles inside the zoom lens is pretty confusing. How far away from the end of the row is the seat? Or if you don't know where the end of the row is, just to be able to count how many seats are to either side of me would be helpful.
[deleted](1)
looks great! really cool. no ncaaf?
agree, college football would be great.
Also, it might just be my eyes, but the green highlight on the chart when you are selecting a ticket on the left seems hard to see. Maybe make the outline a bit thicker, or change the gray background to green?
Also, it might just be my eyes, but the green highlight on the chart when you are selecting a ticket on the left seems hard to see. Maybe make the outline a bit thicker, or change the gray background to green?
First: completely, totally awesome. Stubhub was the only interface that came close to this, and this is way more powerful than that.
One suggestion: I wanted to check out the 'price forecast' feature, but had to create a site-specific account, where I immediately stopped. Is Twitter OAuth/FBConnect or OpenID on the horizon? It really lowers the barrier to getting an account created.
One suggestion: I wanted to check out the 'price forecast' feature, but had to create a site-specific account, where I immediately stopped. Is Twitter OAuth/FBConnect or OpenID on the horizon? It really lowers the barrier to getting an account created.
Thanks, yeah we've had FBConnect for a while but temporarily deactivated it last week because it started to act up. Should be back live soon.
One thing I've always wanted was to be able to 'see' from the seat view, so I have a better idea of what I'm buying. This is even more important for either odd shaped venues (Fenway) or buying those ever-tricky, "Limited view" seats that might be great, or horrid.
A "Seat-View" (like "Google Street View") would change ticket buying forever I think. Main difficulty is in obtaining the photos, but not impossible.
A "Seat-View" (like "Google Street View") would change ticket buying forever I think. Main difficulty is in obtaining the photos, but not impossible.
Pay for it.
Seriously -- build an iPhone app that takes pics from seats. Pay people a buck per pick.
Seriously -- build an iPhone app that takes pics from seats. Pay people a buck per pick.
I found a site that does this this summer when buying Sounders tickets. It has one panoramic seat view per section rather than per seat, but was fairly representative. I wish I could find it again....
Barça does this for most sections.
link: https://entrades.fcbarcelona.cat/web/en/entrades.html
Seatdata.com has these photos for most major venues and licenses them to ticket sites. We need to explore partnering with them.
1) Bug: occasionally, when I mouse over a section, the box that says "5 listings for $61" goes off the edge of the screen for me. [Windows Vista, FireFox 4 beta 4]
2) As a fan of a particular team, I would love to be able to navigate between that team's games without going back to a menu. Maybe have little arrows in the title area next to the team name that say "next home game" and "previous home game".
3) Similarly, on the team list, a checkbox for "home games only" would be nice. I'm not likely to go to away games for my hometown team, but I am likely to want to look through several home games.
2) As a fan of a particular team, I would love to be able to navigate between that team's games without going back to a menu. Maybe have little arrows in the title area next to the team name that say "next home game" and "previous home game".
3) Similarly, on the team list, a checkbox for "home games only" would be nice. I'm not likely to go to away games for my hometown team, but I am likely to want to look through several home games.
Thanks for the bug report; we'll fix that shortly. And will also consider ways we can add more navigation options while still keeping the UI as sparse as possible...maybe we add those filters but hide them by default?
Zooming interface works really well. For example, I like that when zoomed out tickets of a section are grouped together. But performing is a bit slow with a cold client-side cache.
Any you particular reason you chose SVG over other alternatives (eg. tiled bitmaps)?
Any you particular reason you chose SVG over other alternatives (eg. tiled bitmaps)?
Thanks, in regards to the slowness, what browser were you using?
The stadium itself is actually tiled bitmaps, we're using Raphael/svg for the section/row highlights. It would have been great to use vector graphics the whole way, for one it would have given us continuous zooming instead of the predefined levels we're doing now, but the performance just isn't there yet in IE.
The stadium itself is actually tiled bitmaps, we're using Raphael/svg for the section/row highlights. It would have been great to use vector graphics the whole way, for one it would have given us continuous zooming instead of the predefined levels we're doing now, but the performance just isn't there yet in IE.
Well it's brilliantly done.
Would like to include it/link it with other stuff at
http://www.irunmywebsite.com/raphael/raphaelsource.php
Bug (?): In Opera, my mouse gesture to go back (right click + left) was captured by the canvas and dragged the stadium.
Awesome job guys! A couple notes, from somebody who's done the interactive seating maps stuff before...
First off, this is essentially a direct clone of Fansnap.com's UI; I'd be surprised if SeatGeek didn't get heat over it. And since Fansnap has taken something like 10 times the funding Seatgeak has, it's not a move I would have personally made. But it sure is ballsy!
Secondly, I created interactive seating maps for TicketStumbler in one day using image maps and JS instead of any fancy (read: quality) canvas/SVG stuff. Turns out that was good enough to get StubHub to ban us from their API without so much as a notice. The ticketing affiliate industry is as shady and predatory as they come; if your product is similar to or better than a "partner" site's, don't think blackmail is beyond them or even outside the norm. All of which is to say, in this industry it pays to spend as little time as possible on features that you may be forced to disable or dumb down. Today, TS' maps are either disabled entirely or reduced in utility, literally to avoid being as good as StubHub's.
Although, with StubHub quickly making themselves irrelevant in the affiliate space by reducing commissions to near-zero, maybe it won't be such a huge deal this time around. Their affiliate manager would contact us the same day we released something StubHub didn't like; no other site has been quite that bad.
All that being said, I really hope Seatgeek does well. It would be amazing to have one honest, successful startup in this space that isn't run by a suit factory.
First off, this is essentially a direct clone of Fansnap.com's UI; I'd be surprised if SeatGeek didn't get heat over it. And since Fansnap has taken something like 10 times the funding Seatgeak has, it's not a move I would have personally made. But it sure is ballsy!
Secondly, I created interactive seating maps for TicketStumbler in one day using image maps and JS instead of any fancy (read: quality) canvas/SVG stuff. Turns out that was good enough to get StubHub to ban us from their API without so much as a notice. The ticketing affiliate industry is as shady and predatory as they come; if your product is similar to or better than a "partner" site's, don't think blackmail is beyond them or even outside the norm. All of which is to say, in this industry it pays to spend as little time as possible on features that you may be forced to disable or dumb down. Today, TS' maps are either disabled entirely or reduced in utility, literally to avoid being as good as StubHub's.
Although, with StubHub quickly making themselves irrelevant in the affiliate space by reducing commissions to near-zero, maybe it won't be such a huge deal this time around. Their affiliate manager would contact us the same day we released something StubHub didn't like; no other site has been quite that bad.
All that being said, I really hope Seatgeek does well. It would be amazing to have one honest, successful startup in this space that isn't run by a suit factory.
Yep a direct clone of fansnap.com, Impressive job but I can't help it but think yuk!
What an excellent app, great job!
Have you thought about adding a social angle, i.e. allowing users to make comments on or recommend specific seats? Perhaps another heatmap layer to display desirability?
Personal beef - Rogers Arena in Vancouver is "Seating Chart Pending" with no ETA... coming soon?
Have you thought about adding a social angle, i.e. allowing users to make comments on or recommend specific seats? Perhaps another heatmap layer to display desirability?
Personal beef - Rogers Arena in Vancouver is "Seating Chart Pending" with no ETA... coming soon?
A mobile site is critical for the day-of-event purchases outside the venue! Either that or a droid app would be great conveniences to an already stellar product! I like how you took the airline ticket farecast model and applied it to event tickets. This service is a job well done. I'm impressed.
Tell @DmitryBaranovsk!
The bi-directional filters on the bottom left cannot be altered in an iPad.
In this latter mode, the cheapest seats are black, the most expensive are red (this makes me think red==bad). Bright green (which to me signals "go!") is smack in the middle. And the cues based on circle size are also gone. I guess I initially assumed that red and green would be the two ends of the spectrum in pricing mode. I found the color coding scheme actually caused me to prefer the mid-priced seats because of a preference to avoid red and black. So, I would suggest a rethink of the coloring scheme in this mode.
It would also be nice if you could show the math on what makes a deal good or bad, or at least have some sort of blurb about what constitutes a "good deal".