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
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.