Labeling meeting rooms with random countries

Introduction

Everybody wants their office to be a reflection of company culture.  The best office spaces in the world go to great lengths to make sure that all of the details of their space culminate in an experience that aligns with the company’s vision, mission, values, and brand.

If you’ve ever worked for a company that invests time and effort in office experience - or even attended a meeting at one of these offices - you might have noticed that these offices use thematic conference room naming.  Leah Fessler at Quartz compiled a list of conference room naming themes at leading tech companies. A few standouts:

• Twitter - Birds (Canary, Mallard), San Francisco monuments and venues (Golden Gate, Fort Point)
• LinkedIn - Bay Area neighborhoods (Alamo Square, Twin Peaks), coffee shops (Blue Bottle, Andytown), San Francisco bars (Dogpatch, Elixir)
• SpaceX - Famous astronauts (John Glenn, Neil Armstrong)

Super fun!  A classic example of a low-effort, high-value contribution to office experience, and a big shout-out to all of the stellar space planning teams at these companies who are assigning and managing these conference room names.

Anyone who has worked in space planning knows, however, that no good deed goes unpunished.  Everybody loves the new conference room names at HQ!  And they love them so much that the CEO now wants *all* of the conference rooms thematically named across the entire office portfolio of 200 locations.  A bit of back-of-the-napkin math tells you with an average of eight conference rooms per floor and two floors per location, you’re now on the hook for naming 1,200 conference rooms - all within the same clever thematic category!

We feel for you, space planners of the world.  So we took on this thought experiment, and came up with a solution that uses Archilogic’s Floor Plan SDK to automate conference room naming within a theme.  For the purposes of this thought experiment, we’ll assume that you have an Archilogic account and have generated an access token for the Floor Plan SDK. If you haven’t, you can sign up for free.  Once you have an account, you can generate an access token from your user profile.

Step 1 - Pick a theme

The theme needs to be creative while also broad enough to contain > 1,200 unique records (assuming you’re a growing company!).  A few ideas:

• Global cities ~ 10,000
• Flower species ~ 374,000
• Edible plants ~ 20,000

Contenders with an insufficient number of records (but nevertheless interesting):

• Named stars - 451
• Grey’s Anatomy episodes (as of September 15th, 2022) - 405 (eventually this will make it’s way to the viable theme category, because it doesn’t seem like they will ever stop filming new seasons of Grey’s Anatomy)

For our purposes, 374,000 is probably overkill, and plant names in Latin probably won’t roll off the tongue, so we’ll go with global cities.

Step 2 - Find a dataset

In 2020, the Organisation for Economic Co-operation and Development (OECD) released a meticulously researched list of every city in the world.  OECD defines a city as:

a contiguous geographic area with at least 50,000 inhabitants at an average population density of 1,500 people per square kilometer

They found that roughly 10,000 areas meet this definition, and made their data publicly available.  You can interact with and download the raw data here.

‍

Step 3 - Format and enrich the dataset

We did some basic ETL on the dataset, joining it with readily available country data in order to come up with a single, clean JSON file that includes:

• The city name
• The country the city is in
• The country’s flag emoji

If you’re interested in the raw country-level data we used, you can find it here.

Step 4 - Load an Archilogic office model and extract a list of conference rooms

First, create a new FloorPlanEngine instance.  We’ll also pass in a div that we want to use to visualize the floor plan later:

const container = document.getElementById("floorplan-div")
const floorPlan = new FloorPlanEngine(container);

Next, load the office’s Archilogic model by passing in the model’s ID and your publishable access token:

floorPlan.loadScene(demoSceneId, { publishableToken }).then(() => {})

Once the model has loaded, we can retrieve the spaces and assets in the space by accessing the resources property of the “floorPlan” object. Since we’re only looking for conference rooms, we can filter the collection of spaces by space program:

const conferenceRooms = floorPlan.resources.spaces.filter((space) => {
	return space.program === 'meet';
})

We also need to add an overlay layer that we can add HTML markers to later:

const layer = floorPlan.addLayer();

To keep things simple, we can create a clean new collection of spaces that only contain the minimum information required to manage conference room naming:

let conferenceRoomData = conferenceRooms.map((room) => {
  return { id: room.id, center: room.center, node: room.node }
})

Now we have a simple array of objects, each object of which contains a room id and a coordinate array for the location of the room’s center point on the floor plan.

Step 5 - Randomly assign cities from our city dataset to the extracted conference rooms

With our simple array of space objects ready to go, we can now assign a random city to each space.

We can load the city data from the JSON data we compiled before:

import { cities } from './cities.json'

There are a lot of ways to select a random number of items from a large dataset; here’s the method we’ll go with (this is a modified version of the solution found here) :

let len = cities.length,
	taken = new Array(len),
	n = conferenceRoomData.length,
	randomCities = new Array(n)

while (n--) {
  const x = Math.floor(Math.random() * len)
  randomCities[n] = cities[x in taken ? taken[x] : x]
  taken[x] = --len in taken ? taken[len] : len
}

We can now match the randomly selected cities with the items in the conference room list, and merge their properties:

conferenceRoomData.forEach((room, index) => {
  room.countryFlag = randomCities[index].countryFlag
  room.city = randomCities[index].name
});

You now have an array of conference room entities with the following data:

conferenceRoomData.forEach((room, index) => {
  room.countryFlag = randomCities[index].countryFlag
  room.city = randomCities[index].name
});

Step 6 - Visualize the conference room labels

We can now put everything together and demonstrate our automated conference room labeling visually on the office’s floor plan:

conferenceRoomData.forEach((room) => {
  // Create HTML elements that we can use as room labels
	  let el = document.createElement('div');
	  let label = document.createElement('span');
	  el.className = 'space-label';

  // Highlight each conference room so they're easily distinguishable from other spaces
	  room.node.setHighlight({ fill: [158, 228, 255] });

  // Create a room label with a country flag and a city name
	  label.innerHTML =
	    '<div class="country-flag">' +
	    room.countryFlag +
	    '</div><div class="city-name">' +
	    room.city +
	    '</div>';

  // Add the label to the HTML element
	  el.appendChild(label);

  // Add the HTML elements to the floor plan as markers
	  let marker = floorPlan.addHtmlMarker({
	    el,
	    pos: room.center,
	    offset: [0, 0],
	  });
});

That’s it!  When you load the app, conference rooms will be labeled with random city names and their corresponding country flags.  Each time you refresh the app, you’ll see a new set of randomly assigned conference rooms names.
Check out a working example in StackBlitz!

Benefits of this approach

• You don’t have to do the whole process manually
• You can run the automation any time you onboard (or off-board) a new space
• You don’t have to use CAD, CAFM, IWMS, or BIM - which means you don’t have to deploy expensive resources who understand complex, professional technology just to perform a rudimentary task.
• You can learn from the data! Instead of having a shared folder full of outdated, duplicated floor plans, you have a spatial database that you can leverage to perform complex analyses.

Ideas for the future

• Persist the data so that you don’t lose it
  This could be done either by storing the data in your own database, or using our Space API to post the data as custom fields attached to the representation of the spaces in Archilogic. The `conferenceRoomData` variable contains all of the information you need to store and integrate the conference room name data.
• Name conference rooms across a full portfolio of offices
  You can use the Space API to load all of the individual floor plan IDs in your portfolio, and load them as options into a dropdown menu.  Changing the value of the select box can control which floor plan loads and subsequently receives new conference room labels.  
• Check to ensure that all names are globally unique
  If the cities data is stored in a database, you can track which cities have already been used.  Exposing the cities data via API could control which cities are then randomly selected for assignment.  
• Build an interface that allows you to load custom datasets (like Grey’s Anatomy episodes)
  Similar to the interface that could be built to switch floor plans using a dropdown menu, you could load multiple datasets at once and let the user pick which dataset to use for conference room naming.    
• Map utilization data to the conference room entities to see if conference room names affect room utilization    
  Using the conference room unique identifier, we could integrate Archilogic’s representation of rooms with a system that manages an access control or occupancy sensor system, and bring all of the data together in an analysis platform to see if a certain conference room name or name category outperforms others.

‍