Bertin’s Hotel

View full screen.

Jacques Bertin, one of the founding researchers of information visualization, used this small multiples bar chart to reveal seasonal patterns in guests staying at a hotel. Twenty metrics for twelve months are shown, repeated to assist the identification of annual cycles. Black bars emphasize values above the mean, allowing the eye to resolve groups; these were then hypothesized as “active and slow periods”, “discovery factors”, and “recovery factors”.

Next: Streamgraphs

Source

<html>
  <head>
    <title>Hotel Stays</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>

    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="hotel.js"></script>
    <style type="text/css">

#fig {
  width: 520px;
  height: 520px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

/* Sizing and spacing parameters. */
var h = 20, ch = 24, cw = 11;

/* Bertin's order, grouping metrics by seasonal pattern. */
var order = [18,17,19,7,10,3,11,12,15,13,0,1,6,8,9,16,5,2,4,14];

/* Compute the mean per metric. */
var type = pv.nest(hotel).key(function(d) d.type),
    means = type.rollup(function(values) pv.mean(values, function(d) d.count));

/* The root panel. */
var vis = new pv.Panel()
    .width(520)
    .height(520);

/* A panel per series, with a bar chart and label. */
vis.add(pv.Panel)
    .data(pv.permute(type.entries(), order))
    .top(function() ch * (this.index + 1))
    .height(h)
  .add(pv.Label)
    .font("13px Georgia")
    .left(cw * 24 + 8)
    .bottom(0)
    .text(function(x, d) d.key)
  .add(pv.Bar)
    .def("y", function(d) pv.Scale.linear(0, pv.max(d.values, function(d) d.count)))
    .data(function(d) pv.repeat(d.values))
    .left(function() cw * this.index)
    .bottom(0)
    .width(cw)
    .height(function(d) this.y()(d.count) * h)
    .strokeStyle("#000")
    .lineWidth(1)
    .antialias(false)
    .fillStyle(function(d) d.count > means[d.type] ? "#000" : null);

/* Month labels. */
vis.add(pv.Label)
    .data(pv.repeat("JFMAMJJASOND".split("")))
    .top(function() ((this.index % 6) > 2) ? 16 : 14)
    .left(function() cw * (this.index + .5))
    .textAlign("center")
    .font("bold 15px Arial");

vis.render();

    </script>
  </div></div></body>
</html>

Data

var hotel = [
  {"type":"1. % CLIENTELE FEMALE","month":"Jan","count":26},
  {"type":"1. % CLIENTELE FEMALE","month":"Feb","count":21},
  {"type":"1. % CLIENTELE FEMALE","month":"Mar","count":26},
  {"type":"1. % CLIENTELE FEMALE","month":"Apr","count":28},
  {"type":"1. % CLIENTELE FEMALE","month":"May","count":20},
  {"type":"1. % CLIENTELE FEMALE","month":"Jun","count":20},
  {"type":"1. % CLIENTELE FEMALE","month":"Jul","count":20},
  {"type":"1. % CLIENTELE FEMALE","month":"Aug","count":20},
  {"type":"1. % CLIENTELE FEMALE","month":"Sep","count":20},
  {"type":"1. % CLIENTELE FEMALE","month":"Oct","count":40},
  {"type":"1. % CLIENTELE FEMALE","month":"Nov","count":15},
  {"type":"1. % CLIENTELE FEMALE","month":"Dec","count":40},
  {"type":"2. % CLIENTELE LOCAL","month":"Jan","count":69},
  {"type":"2. % CLIENTELE LOCAL","month":"Feb","count":70},
  {"type":"2. % CLIENTELE LOCAL","month":"Mar","count":77},
  {"type":"2. % CLIENTELE LOCAL","month":"Apr","count":71},
  {"type":"2. % CLIENTELE LOCAL","month":"May","count":37},
  {"type":"2. % CLIENTELE LOCAL","month":"Jun","count":36},
  {"type":"2. % CLIENTELE LOCAL","month":"Jul","count":39},
  {"type":"2. % CLIENTELE LOCAL","month":"Aug","count":39},
  {"type":"2. % CLIENTELE LOCAL","month":"Sep","count":55},
  {"type":"2. % CLIENTELE LOCAL","month":"Oct","count":60},
  {"type":"2. % CLIENTELE LOCAL","month":"Nov","count":68},
  {"type":"2. % CLIENTELE LOCAL","month":"Dec","count":72},
  {"type":"3. % CLIENTELE USA","month":"Jan","count":7},
  {"type":"3. % CLIENTELE USA","month":"Feb","count":6},
  {"type":"3. % CLIENTELE USA","month":"Mar","count":3},
  {"type":"3. % CLIENTELE USA","month":"Apr","count":6},
  {"type":"3. % CLIENTELE USA","month":"May","count":23},
  {"type":"3. % CLIENTELE USA","month":"Jun","count":14},
  {"type":"3. % CLIENTELE USA","month":"Jul","count":19},
  {"type":"3. % CLIENTELE USA","month":"Aug","count":14},
  {"type":"3. % CLIENTELE USA","month":"Sep","count":9},
  {"type":"3. % CLIENTELE USA","month":"Oct","count":6},
  {"type":"3. % CLIENTELE USA","month":"Nov","count":8},
  {"type":"3. % CLIENTELE USA","month":"Dec","count":8},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Jan","count":0},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Feb","count":0},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Mar","count":0},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Apr","count":0},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"May","count":8},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Jun","count":6},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Jul","count":6},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Aug","count":4},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Sep","count":2},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Oct","count":12},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Nov","count":0},
  {"type":"4. % CLIENTELE SOUTH-AMERICA","month":"Dec","count":0},
  {"type":"5. % CLIENTELE EUROPE","month":"Jan","count":20},
  {"type":"5. % CLIENTELE EUROPE","month":"Feb","count":15},
  {"type":"5. % CLIENTELE EUROPE","month":"Mar","count":14},
  {"type":"5. % CLIENTELE EUROPE","month":"Apr","count":15},
  {"type":"5. % CLIENTELE EUROPE","month":"May","count":23},
  {"type":"5. % CLIENTELE EUROPE","month":"Jun","count":27},
  {"type":"5. % CLIENTELE EUROPE","month":"Jul","count":22},
  {"type":"5. % CLIENTELE EUROPE","month":"Aug","count":30},
  {"type":"5. % CLIENTELE EUROPE","month":"Sep","count":27},
  {"type":"5. % CLIENTELE EUROPE","month":"Oct","count":19},
  {"type":"5. % CLIENTELE EUROPE","month":"Nov","count":19},
  {"type":"5. % CLIENTELE EUROPE","month":"Dec","count":17},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Jan","count":1},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Feb","count":0},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Mar","count":0},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Apr","count":8},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"May","count":6},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Jun","count":4},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Jul","count":6},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Aug","count":4},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Sep","count":2},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Oct","count":1},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Nov","count":0},
  {"type":"6. % CLIENTELE M.EAST, AFRICA","month":"Dec","count":1},
  {"type":"7. % CLIENTELE ASIA","month":"Jan","count":3},
  {"type":"7. % CLIENTELE ASIA","month":"Feb","count":10},
  {"type":"7. % CLIENTELE ASIA","month":"Mar","count":6},
  {"type":"7. % CLIENTELE ASIA","month":"Apr","count":0},
  {"type":"7. % CLIENTELE ASIA","month":"May","count":3},
  {"type":"7. % CLIENTELE ASIA","month":"Jun","count":13},
  {"type":"7. % CLIENTELE ASIA","month":"Jul","count":8},
  {"type":"7. % CLIENTELE ASIA","month":"Aug","count":9},
  {"type":"7. % CLIENTELE ASIA","month":"Sep","count":5},
  {"type":"7. % CLIENTELE ASIA","month":"Oct","count":2},
  {"type":"7. % CLIENTELE ASIA","month":"Nov","count":5},
  {"type":"7. % CLIENTELE ASIA","month":"Dec","count":2},
  {"type":"8. % BUSINESSMEN","month":"Jan","count":78},
  {"type":"8. % BUSINESSMEN","month":"Feb","count":80},
  {"type":"8. % BUSINESSMEN","month":"Mar","count":85},
  {"type":"8. % BUSINESSMEN","month":"Apr","count":86},
  {"type":"8. % BUSINESSMEN","month":"May","count":85},
  {"type":"8. % BUSINESSMEN","month":"Jun","count":87},
  {"type":"8. % BUSINESSMEN","month":"Jul","count":70},
  {"type":"8. % BUSINESSMEN","month":"Aug","count":76},
  {"type":"8. % BUSINESSMEN","month":"Sep","count":87},
  {"type":"8. % BUSINESSMEN","month":"Oct","count":85},
  {"type":"8. % BUSINESSMEN","month":"Nov","count":87},
  {"type":"8. % BUSINESSMEN","month":"Dec","count":80},
  {"type":"9. % TOURISTS","month":"Jan","count":22},
  {"type":"9. % TOURISTS","month":"Feb","count":20},
  {"type":"9. % TOURISTS","month":"Mar","count":15},
  {"type":"9. % TOURISTS","month":"Apr","count":14},
  {"type":"9. % TOURISTS","month":"May","count":15},
  {"type":"9. % TOURISTS","month":"Jun","count":13},
  {"type":"9. % TOURISTS","month":"Jul","count":30},
  {"type":"9. % TOURISTS","month":"Aug","count":24},
  {"type":"9. % TOURISTS","month":"Sep","count":13},
  {"type":"9. % TOURISTS","month":"Oct","count":15},
  {"type":"9. % TOURISTS","month":"Nov","count":13},
  {"type":"9. % TOURISTS","month":"Dec","count":20},
  {"type":"10. % DIRECT RESERVATIONS","month":"Jan","count":70},
  {"type":"10. % DIRECT RESERVATIONS","month":"Feb","count":70},
  {"type":"10. % DIRECT RESERVATIONS","month":"Mar","count":75},
  {"type":"10. % DIRECT RESERVATIONS","month":"Apr","count":74},
  {"type":"10. % DIRECT RESERVATIONS","month":"May","count":69},
  {"type":"10. % DIRECT RESERVATIONS","month":"Jun","count":68},
  {"type":"10. % DIRECT RESERVATIONS","month":"Jul","count":74},
  {"type":"10. % DIRECT RESERVATIONS","month":"Aug","count":75},
  {"type":"10. % DIRECT RESERVATIONS","month":"Sep","count":68},
  {"type":"10. % DIRECT RESERVATIONS","month":"Oct","count":68},
  {"type":"10. % DIRECT RESERVATIONS","month":"Nov","count":64},
  {"type":"10. % DIRECT RESERVATIONS","month":"Dec","count":75},
  {"type":"11. % AGENCY RESERVATIONS","month":"Jan","count":20},
  {"type":"11. % AGENCY RESERVATIONS","month":"Feb","count":18},
  {"type":"11. % AGENCY RESERVATIONS","month":"Mar","count":19},
  {"type":"11. % AGENCY RESERVATIONS","month":"Apr","count":17},
  {"type":"11. % AGENCY RESERVATIONS","month":"May","count":27},
  {"type":"11. % AGENCY RESERVATIONS","month":"Jun","count":27},
  {"type":"11. % AGENCY RESERVATIONS","month":"Jul","count":19},
  {"type":"11. % AGENCY RESERVATIONS","month":"Aug","count":19},
  {"type":"11. % AGENCY RESERVATIONS","month":"Sep","count":26},
  {"type":"11. % AGENCY RESERVATIONS","month":"Oct","count":27},
  {"type":"11. % AGENCY RESERVATIONS","month":"Nov","count":21},
  {"type":"11. % AGENCY RESERVATIONS","month":"Dec","count":15},
  {"type":"12. % AIR CREWS","month":"Jan","count":10},
  {"type":"12. % AIR CREWS","month":"Feb","count":12},
  {"type":"12. % AIR CREWS","month":"Mar","count":6},
  {"type":"12. % AIR CREWS","month":"Apr","count":9},
  {"type":"12. % AIR CREWS","month":"May","count":4},
  {"type":"12. % AIR CREWS","month":"Jun","count":5},
  {"type":"12. % AIR CREWS","month":"Jul","count":7},
  {"type":"12. % AIR CREWS","month":"Aug","count":6},
  {"type":"12. % AIR CREWS","month":"Sep","count":6},
  {"type":"12. % AIR CREWS","month":"Oct","count":5},
  {"type":"12. % AIR CREWS","month":"Nov","count":15},
  {"type":"12. % AIR CREWS","month":"Dec","count":10},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Jan","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Feb","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Mar","count":4},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Apr","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"May","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Jun","count":1},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Jul","count":1},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Aug","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Sep","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Oct","count":4},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Nov","count":2},
  {"type":"13. % CLIENTS UNDER 20 YEARS","month":"Dec","count":5},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Jan","count":25},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Feb","count":27},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Mar","count":37},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Apr","count":35},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"May","count":25},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Jun","count":25},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Jul","count":27},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Aug","count":28},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Sep","count":24},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Oct","count":30},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Nov","count":24},
  {"type":"14. % CLIENTS 20-35 YEARS","month":"Dec","count":30},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Jan","count":48},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Feb","count":49},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Mar","count":42},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Apr","count":48},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"May","count":54},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Jun","count":55},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Jul","count":53},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Aug","count":51},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Sep","count":55},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Oct","count":46},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Nov","count":55},
  {"type":"15. % CLIENTS 35-55 YEARS","month":"Dec","count":43},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Jan","count":25},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Feb","count":22},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Mar","count":17},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Apr","count":15},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"May","count":19},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Jun","count":19},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Jul","count":19},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Aug","count":19},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Sep","count":19},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Oct","count":20},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Nov","count":19},
  {"type":"16. % CLIENTS MORE THAN 55 YEARS","month":"Dec","count":22},
  {"type":"17. PRICE OF ROOMS","month":"Jan","count":163},
  {"type":"17. PRICE OF ROOMS","month":"Feb","count":167},
  {"type":"17. PRICE OF ROOMS","month":"Mar","count":166},
  {"type":"17. PRICE OF ROOMS","month":"Apr","count":174},
  {"type":"17. PRICE OF ROOMS","month":"May","count":152},
  {"type":"17. PRICE OF ROOMS","month":"Jun","count":155},
  {"type":"17. PRICE OF ROOMS","month":"Jul","count":145},
  {"type":"17. PRICE OF ROOMS","month":"Aug","count":170},
  {"type":"17. PRICE OF ROOMS","month":"Sep","count":157},
  {"type":"17. PRICE OF ROOMS","month":"Oct","count":174},
  {"type":"17. PRICE OF ROOMS","month":"Nov","count":165},
  {"type":"17. PRICE OF ROOMS","month":"Dec","count":158},
  {"type":"18. LENGTH OF STAY","month":"Jan","count":1.65},
  {"type":"18. LENGTH OF STAY","month":"Feb","count":1.71},
  {"type":"18. LENGTH OF STAY","month":"Mar","count":1.65},
  {"type":"18. LENGTH OF STAY","month":"Apr","count":1.91},
  {"type":"18. LENGTH OF STAY","month":"May","count":1.9},
  {"type":"18. LENGTH OF STAY","month":"Jun","count":2},
  {"type":"18. LENGTH OF STAY","month":"Jul","count":1.54},
  {"type":"18. LENGTH OF STAY","month":"Aug","count":1.6},
  {"type":"18. LENGTH OF STAY","month":"Sep","count":1.73},
  {"type":"18. LENGTH OF STAY","month":"Oct","count":1.82},
  {"type":"18. LENGTH OF STAY","month":"Nov","count":1.66},
  {"type":"18. LENGTH OF STAY","month":"Dec","count":1.44},
  {"type":"19. % OCCUPANCY","month":"Jan","count":67},
  {"type":"19. % OCCUPANCY","month":"Feb","count":82},
  {"type":"19. % OCCUPANCY","month":"Mar","count":70},
  {"type":"19. % OCCUPANCY","month":"Apr","count":83},
  {"type":"19. % OCCUPANCY","month":"May","count":74},
  {"type":"19. % OCCUPANCY","month":"Jun","count":77},
  {"type":"19. % OCCUPANCY","month":"Jul","count":56},
  {"type":"19. % OCCUPANCY","month":"Aug","count":62},
  {"type":"19. % OCCUPANCY","month":"Sep","count":90},
  {"type":"19. % OCCUPANCY","month":"Oct","count":92},
  {"type":"19. % OCCUPANCY","month":"Nov","count":78},
  {"type":"19. % OCCUPANCY","month":"Dec","count":55},
  {"type":"20. CONVENTIONS","month":"Jan","count":0},
  {"type":"20. CONVENTIONS","month":"Feb","count":0},
  {"type":"20. CONVENTIONS","month":"Mar","count":0},
  {"type":"20. CONVENTIONS","month":"Apr","count":1},
  {"type":"20. CONVENTIONS","month":"May","count":1},
  {"type":"20. CONVENTIONS","month":"Jun","count":1},
  {"type":"20. CONVENTIONS","month":"Jul","count":0},
  {"type":"20. CONVENTIONS","month":"Aug","count":0},
  {"type":"20. CONVENTIONS","month":"Sep","count":1},
  {"type":"20. CONVENTIONS","month":"Oct","count":1},
  {"type":"20. CONVENTIONS","month":"Nov","count":1},
  {"type":"20. CONVENTIONS","month":"Dec","count":1}
];