A Venn diagram demonstrating the dining options in one of the new cafeterias


Back in the early 2000s, a new building opened on the Microsoft main campus, and the food services department tried an experiment: Instead of creating a standard cafeteria, they decided to make the cafeteria in the new building a specialty cafeteria. This new cafeteria was more like a deli, specializing in offerings like antipasto, rotisserie chicken, and grilled panini sandwiches.

The idea was that the building would generate cross-building foot traffic with the building next door. The food services department figured that people would typically go to the cafeteria in the old building next door, but if they had a hankering for something offered by the specialty cafeteria, they could walk over to the new cafeteria.

It was an interesting idea, but it didn't work out well in practice because people are lazy and always go to the nearest cafeteria. This meant that the people who worked in the new building wandered into their cafeteria and saw the same specialty offerings every day. And nobody from the other cafeteria ever came to visit the specialty cafeteria.

One of my colleagues explained the dining options in the new cafeteria with a Venn diagram:

Rotisserie
chicken
Panini
sandwiches
Chicken
panini
sandwiches

After a few months, the food services department realized that their plan wasn't working out too well, and they converted the new cafeteria into a more traditional cafeteria.

Comments (27)
  1. Kevin says:

    How to fix the Venn diagram in Firefox:

    1. Right click a circle and choose "inspect element."

    2. In the sidebar on the right of the inspector, choose the "rules" tab.

    3. Add a "top: -70px" rule to the element inline rules.

    4. Repeat with the other circle.

  2. alegr1 says:

    They the guy who had that great idea was promoted to MS marketing boss. I'm just guessing, because there were a lot of similar great ideas in MS products.

  3. Dan Bugglin says:

    Not working in Chrome either, but more than an offset adjustment seems to be needed. The font is too small in Chrome.

    A top of -240px and a font-size of 34em (maybe em will work better than pixels?) seems to work.

  4. Raphael says:

    Thanks, Kevin. (Doesn't look overly pretty in IE either. Or Chrome.)

  5. Tom says:

    I went top: -260px and font-size: 560px for chrome

  6. Adam Rosenfield says:

    Interesting choice of U+25EF LARGE CIRCLE, rather than inline SVG.

    [If I had written the article today, I probably would have used SVG. But I wrote it back when I cared about browsers that didn't support SVG. -Raymond]
  7. Simon Koch says:

    "U+25EF LARGE CIRCLE"

    Yup, those are some large circles.

  8. Alex says:

    Everyone's talking about fixing the diagram on their broweser and here I am just cutting the Gordian Knot by checking it in IE (Where admittedly it isn't perfect, but it can be understood)

  9. Kirby FC says:

    Raymond demonstrates his absolute Kung-fu mastery of HTML by creating a page that no browser can render properly.

  10. Sven2 says:

    The circles are way off in Vivaldi, too. Maybe they work in old versions of Opera?

  11. PastorGL says:

    > Alex

    > am just cutting the Gordian Knot by checking it in IE

    Two cups of tea for this gentleman.

  12. For next time, Raymond says:

    http://www.terrenceryan.com/.../venn-diagram-entirely-in-css

    Here is a working sample. I had to tweak the above a bit.

    dl.dropboxusercontent.com/.../index.html

  13. T Man says:

    It looks better in IE compatibility mode.

  14. I feel like Dodgson Diagrams lend themselves a little more easily to HTML.

    hom.wikidot.com/the-logic-diagrams-of-lewis-carroll

    Or you could just, y'know, use an image.

  15. Derlin says:

    My college cafeterias tried this tactic, but with less uniqueness, and it generally worked out well.  The majority of the items  were common, but on certain days there would be a specialty.  The main thing I recall is that one cafeteria offered breakfast on Sundays, while the other only offered brunch.  Even then, most people chose a cafeteria based on which one was open and which one they preferred sitting in.

  16. Joshua says:

    > Or you could just, y'know, use an image.

    He won't. Besides, now the non-image images are part of the expected culture here. It's really great.

    I've got a nice set of accessibility problems yet I can enjoy this site to its full potential anyway, because these pseudo-images work just fine.

    [Back in the old days, I used images. And then the images broke when the blog team migrated content and didn't migrate the images. That's why there is a blank space on this page where an image used to be. I learned my lesson. No images. -Raymond]
  17. Steve D says:

    <Also tries to drag thread back on topic>

    Sad to see the idea didn't work.  Perhaps the season played a part?  Where I work there are many that make the effort to go offsite for lunch and enjoy a variety of different options.  The option of adding a bit of a stroll with lunch is also attractive when the weather is fine.

    </drag>

  18. cheong00 says:

    @For next time, Raymond: Yeah, but by the time one care about browsers that won't render SVG, IE doesn't support rounded corner yet too.

  19. cheong00 says:

    [I learned my lesson. No images.]

    Btw, Data URI rocks since IE8. http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser

    Just some suggestion...

    [Internet Explorer 8 had very low market share in 2003. Just saying. -Raymond]
  20. Engywuck says:

    @Alex: in standard IE11 on my Win7 the circles and the Chicken panini sandwiches disagree (circle blots out the text).

    boack on topic: this could have worked, but of course depends heavily on how far the buildings are apart, the weather (or if there is some other way to get there in bad/cold weather), the "marketing" for the new cafeteria etc. Another problem is of course that some people like to go to the cafeteria together, but when one of the group wants some "standard" food and the others like the specials the group has to split up. Again a function of the distance between the cafeterias (i.e. could one buy from one of them and still be able to eat with the others of the group). The general idea that this would increase "mix-and-mingle" between buildings was not too bad, though.

  21. DWalker says:

    Raymond, I appreciate your cool diagrams and such that are implemented without images.  

    Still, this: "And then the images broke when the blog team migrated content and didn't migrate the images."  Because, you know, there is no possible way to train the blog team in a large and sophisticated company that they should migrate content AND images.  :-)

    [The blog team was much smaller back then. It was gotdotnet.com, remember? -Raymond]
  22. Boris says:

    Given the expected audience, the simplest bugfix would be to replace the Venn diagram with set notation.

    A = {Rotisserie chicken, …}

    B = {Panini sandwiches, …}

    A ∩ B = {Chicken panini sandwiches, …}

    [But that wouldn't be as funny. -Raymond]
  23. cheong00 says:

    [Internet Explorer 8 had very low market share in 2003. Just saying. -Raymond]

    Actually by that time even IE7 didn't exist yet. I recall reading Justin Rogers moving back to IE team to resume IE development some time after start reading your blog. My suggestion is for your future articles.

  24. Boris says:

    cheong00: you missed Raymond's brand of humor in the comment about the low (= 0) market share?

  25. Boris says:

    [But that wouldn't be as funny. -Raymond]

    OK, let's make it funny.

    "One of my colleagues explained the dining options in the new cafeteria with a Venn diagram, which I've converted to set notation just in case [hyperlink 'just in case' to your blog post with the missing image]".

  26. 640k says:

    Your venn diagram only works in the non standard "browser". Make it work in standard html.

    [If I had written the article today, I probably would have used SVG. But I wrote it back when I cared about browsers that didn't support SVG. -Raymond]

    Real browsers did. Your non standard browser did only support non standard VML back then.

    [Back in the old days, I used images. And then the images broke when the blog team migrated content and didn't migrate the images. That's why there is a blank space on this page where an image used to be. I learned my lesson. No images. -Raymond]

    As I remember, you didn't want to migrate the images, even when you were told how to do it. Pure laziness.

    [Where did I say that I cared only about standard browsers? And I don't recall declining to migrate the images manually. There were only a few of them. As I recall, what happened was simply that the old hosting service quietly died, leaving lots of links broken. -Raymond]
  27. Mark says:

    My previous attempt to comment here got swallowed, so I'm just going to dump this working link to the image: web.archive.org/.../0409.spam.png

Comments are closed.

Skip to main content