Akshay Patil

• San Francisco (red)
• Daly City (light green)
• Brisbane (dark green)
• South San Francisco (light blue)
• Pacifica (magenta)
• San Bruno (dark blue)
• Millbrae (orange)

Ever noticed that there are a lot of seafood restaurants near bodies of water? I'm not about to blow your mind or anything, but here's a fun look at the location of seafood restaurants as compared to the location of barbecue restaurants in the United States

Seafood restaurants (blue)  vs.  Barbecue restaurants (red)
 

Close ups of the East Coast

 

Massachusetts detail



Last week, Matt Healy, author of many of foursquare's fine data visualizations, gave a talk about some of the tools he uses when attacking a data viz project. One of the tools he talked about, TileMill, seemed pretty straightforward so I hit up our internal Hive instance and spit out some data about where restaurants of various categories are located. I'm still digging through the data, but this is the most interesting comparison I've rendered so far.

The save-to-foursquare bookmarklet we announced today lets users save places they read about on the web to their foursquare to-do list (or other lists) with the simple press of a button. Under the hood, this bookmarklet uses microformats magic to understand what location is being discussed on the webpage the user is viewing.

We look for a number of microformats, the foremost of which is hCard. There are numerous explanations about hCard microformats targeted at developers/SEO online, but few explanations for your average human that explain what hCard is and why it matters.

What is hCard?

hCard is a simple way to explicitly flag data on a webpage about the people, companies, or locations discussed on the page. A webpage creates an hCard object by labeling the parts of the page containing certain types of information: a name, address, birthday, etc. that might be of interest. This hCard labeling is invisible to humans and only visible to computers scanning the page, making it easier for computers to understand what you're already telling your human viewers.

How to add hCard to your site

Consider this restaurant review on LA Weekly’s website. LA Weekly already lists the restaurant’s location information on the page. Here’s the relevant HTML:

  <h4>
    <a href="http://www.voiceplaces.com/sotto-los-angeles-3074448-l/">Sotto</a>
  </h4>
  <p>
    9575 W. Pico Blvd.
    <br/>
    L.A., CA 90035
    <p>
      Category: <a href='/restaurants/search/'> Restaurant</a> >
      <a href="/restaurants/search/cuisine:Italian/">Italian</a>
    </p>
    <p>
      Region: <a href='/restaurants/search/region:124042/'>Melrose/ Beverly/ Fairfax</a>
    </p>
  </p>

Adding hCard is as simple as inserting the markup below:

<div class='locInfo'>
  <h4>
   <a class=”fn” href="http://www.voiceplaces.com/sotto-los-angeles-3074448-l/">Sotto</a>
  </h4>
  <p class=”adr”>
    <span class=”street-adrress”>9575 W. Pico Blvd.</span>
    <br/>
    <span class=”locality”>L.A.</span>, <span class=”region”>CA</span> <span class=”postal-code”>90035</span>
   <p>
     Category: <a href='/restaurants/search/'> Restaurant</a> >
     <a href="/restaurants/search/cuisine:Italian/">Italian</a>
   </p>
   <p>
     Region: <a href='/restaurants/search/region:124042/'>Melrose/ Beverly/ Fairfax</a>
   </p>
 </p>
</div>

What are the other benefits of using hCard?

Besides generating brand impressions and traffic via ‘Save to foursquare,’ supporting hCard affects how search engines treat your web site.

Search engines use hCard to improve results found on a website. For example, when searching Google for “Torrisi Italian Specialties”, a restaurant in NYC, the sites who have embedded hCard data about the restaurant have some of this information displayed directly in their search result. Compare the New York Times result, which does not use hCard



with the result from New York Magazine, which uses hCard to describe the store and the content it has about the store.



Want to learn more? Check out these pages that explain various aspects and benefits of hCard:

• http://clagnut.com/blog/2244/
• http://schema.org/
• http://microformats.org/wiki/hcard
• http://www.google.com/support/webmasters/bin/answer.py?answer=99170