Enigma has a massive repository of unique U.S. company data. For our internal Hack Week 2019, our team decided to focus on companies in the San Francisco Bay Area since 2001.
Our Example Data
We used two distinct data sources to capture Company Footprints. One contained yearly snapshots of company properties at a different points in time, e.g., “headcount” or “revenue” from 2001 - 2017. The other was our company graph, which contains information from multiple public datasets. References to individual companies have been resolved into a single company entity, with event-based attributes connected to those companies merged accordingly.
Our first step was to link the companies in the annual temporal growth data source to the companies in our company graph. We mapped each of the company name and location pairs to their entity id in company graph, and queried the graph for the relevant events. We then parsed out all of the annual headcount, annual revenue, and events from both data sources, combined them and aggregated by company, location and year.
Initial UI Design
We had following design/UX questions while designing the map UI.
What attributes should we be able to filter by?
Within the filter for revenue, what factors of growth would be most interesting / realistic to cut by?
What are the benefits/end goals that users want to reach?
What would be the main user actions and flow?
To craft an expressive user experience, we highlighted the two distinct industries using a visual design based on blending colors. When viewed together, the map layers for each industry emphasize the interrelatedness of these businesses over the last two decades.
We included a playable timeline, which allows the user to watch the changes unfold on the map, with data displayed on a yearly basis. We also developed a simple interface for filtering businesses by headcount and revenue to give users more control over the information (which is pretty dense). This offers a way to further declutter the map beyond just turning the map layers on and off.
The front-end tech
The front-end itself is a simple JavaScript application that leverages just two libraries (Mapbox GL JS and Lodash), and the static portions of the front-end were created with HTML and CSS. Mapbox takes care of the interactive map, and provides the impetus for updating the custom HTML map overlays whenever the map instance fires an event (e.g. click, drag, zoom). Upon page load, two map layers are created for markers and marker labels, respectively. These layers are reused throughout the animation. As the animation plays, new data in the form of static GeoJSON files is loaded into each layer.
