PbNation Labs

One of my duties here at PbNation is to stay on top of what's going on in the web world, and trying to integrate some of the cool technologies I find here on the site.

Sometimes it doesn't pan out, but other times it results in stuff being born like the Field & Store section.

I figured I'd start a thread here in updates where I can post about some of the stuff I'm experimenting with. There's been a handful of little projects I've whipped up in my free time that are cool, but never really found their way into being a part of the site. I never really had anywhere to show them off, so I thought why not start a thread about it. I'm sure there's some techies out there that would appreciate some insight into what goes on behind the scenes, and you never know, maybe I'll get inspired to come up with something really awesome based on the feedback I get.

So, without further ado, here's a couple of things you guys might find cool.

Who is on PbNation?
As you know, we leverage Google Maps heavily in the field and store section, but I stumbled across a vBulletin plugin that DigitalPoint had written that I thought as cool. It was written for vBulletin 4, but we're still on vBulletin 3, so I backported it. We've used it in promotional materials so our advertisers could get some insight as to the sheer magnitude of PbNation and get an idea of where our users are from. In a nutshell, this page plots users who are currently browsing on the website on an interactive map.

It's anonymous, and not super accurate so the pins on the map aren't actually exact representations of where the users browsing are from, for privacy reasons. Nonetheless, it's cool to get an idea of how many people are browsing at one time and where they're from. It might slow your computer down a bit since it's plotting a lot of map points, so be patient if it takes a second to load.

What are people searching for?
I'd seen those tag clouds around on people's blogs a lot, and thought it might be cool to make a tag cloud based on what people are searching for on PbNation. A little bit of hacking and a jQuery plugin and we've got ourselves a search tag cloud. It varies the size and color of the search phrase based on the frequency of the search term. I didn't really go any further with the project because I found that the terms people are searching for are generally pretty varied, and therefore didn't produce very interesting data.

What states have the most paintball businesses?
I've always been a fan of maps, so when I stumbled upon d3.js, I thought I'd try my hand at doing a custom map visualizing something. One thing that had always bothered me was the old map we used to have on the field and store finder that was just a gif of the USA with an imagemap overlay to make each state clickable. The map itself was sort of ugly, and the coloring on it was pretty boring.

When I redid the field and store finder a few months ago to make it more interactive, I mothballed that page, but kept it around for the sake of web crawlers who had indexed it pretty heavily. So I got to thinking, and this is what I came up with. I took a Creative Commons licensed Scalable Vector Graphic of the United States, and came up with a method for creating a heat map that plotted where in the US the fields and stores in our database were.

Basically, a SVG is just an XML file that contains information on how to render a number of geometric shapes, lines or paths to create a vector image. So what I wrote some code that looked up the number of fields and stores for each US state, and then changed the background color of that state in the XML to reflect the data. The image you see on that page isn't dynamically generated, but is regenerated on a daily basis. The data is relatively static, so I didn't see the need to make it any more dynamic.

Anyway, that's all I have to share for now. Hopefully some of you will find this look behind the scenes to be interesting! Feel free to chime in with any questions you might have, or if you've found any cool technologies out there that we might be able to use here on PbNation.

Wow, didn't think there would be that many people on the East coast compared to everywhere else. I had also thought about asking for some kind of "what are other people searching for feature", but the idea I had was more "here's the last 20 searches" than having the most frequent over the last hour. Glad to see you figured the SVG issue out as well.

__________________If you want to set off and go develop some grand new thing, you don't need millions of dollars of capitalization. You need enough pizza and Diet Coke to stick in your refrigerator, a cheap PC to work on, and the dedication to go through with it. We slept on floors. We waded across rivers. -John Carmack

Yeah, I managed to figure out how to embed Javascript in the SVG, so I didn't need to do an imagemap at all. The only real downside is that Safari doesn't honor the transparent background of the map when using an <object> tag to embed it.

I'm actually surprised embedding js in the svg actually worked. For some reason, I wouldn't have thought it would.

__________________If you want to set off and go develop some grand new thing, you don't need millions of dollars of capitalization. You need enough pizza and Diet Coke to stick in your refrigerator, a cheap PC to work on, and the dedication to go through with it. We slept on floors. We waded across rivers. -John Carmack

__________________SAMBROWN: He's a baller, a ladies man and most of all a stand up guy. I'd let him date my sister if I had one. So I guess my mother will do.Auctionjunkie! : While most people consider ST to stand for Small Talk I feel it's more Septic Tank than anything else. It's where all the waste and refuge goes.

when i'm at home, it shows up about 20 miles from where i live. if i had to hazard a guess, it takes the street address of your ISP's local office and uses that. no more or less private than those images that automatically add your IP, browser, and OS.

when i'm at home, it shows up about 20 miles from where i live. if i had to hazard a guess, it takes the street address of your ISP's local office and uses that. no more or less private than those images that automatically add your IP, browser, and OS.

The geolocation service we use takes more into account than that, but as I said, it's not like we've implanted you with a homing beacon, it's based off of publicly available information.

For those of you who use Google Chrome, I've added Omnibox search support.

If you're asking yourself what that means, if you go to your address bar and type "pbnation.com" followed by a tab, you can now search the site directly from the address bar. I'm not sure if other browsers support this, but it uses the OpenSearch standard so I wouldn't be surprised.