Last month, the Chicago Metropolitan Agency for Planning (CMAP) unveiled the MetroPulse Jobs web portal (press release).  Azavea has been working closely with CMAP on a couple of projects, and MetroPulse Jobs represents just one facet of our partnership.

CMAP has assembled an excellent set of data on labor market statistics and future projections for Chicago.  This initial version of MetroPulse is focused on the Freight market sector.  CMAP has worked with its partners to gather and process the data, and now they are ready to share this with economic and workforce professionals. Their highest priority was to be able to demonstrate the connections between Industries, Occupations, and Training Programs.  We designed an application that allows inspection of these three components of the freight cluster, and allowed users to perform searches, view statistics, explore maps, and view relationships between these three components. This enables users to ask complex questions about the freight cluster, such as:

• Which industries employing welders show the most growth?
• Which community colleges’ Logistics and Supply Chain Management programs are WIA certified and how many people have completed this program over the last five years?
• Which freight related occupations in the DuPage Workforce Investment Area provide the highest wages and are growing the fastest?

Architecturally, there are two major parts to the application.  The first is a server-side API developed by CMAP that delivers data via JavaScript Object Notation (JSON).  The second component is a web application developed by Azavea that presents the results from the API in an attractive and interactive interface.

For the web application, the technology stack is pretty exciting.  Since we were building an application in front of a separate API, we relied on a suite of client side JavaScript libraries to provide a rich, interactive, and responsive experience.  The suite of JavaScript libraries that we used in MetroPulse Jobs includes:

• bootstrap: the bootstrap library is a general-purpose library turned out by twitter.  The starting point is bootstrap.css for scaffolding, and we add in a couple JavaScript extensions for standardizing behavior of widgets in the application.  This allows us to focus more on the application, and less about nitty-gritty fine tuning of the user interface.
• require.js: the require.js library allows us to write JavaScript code in a modular fashion.  This is quite important for the MetroPulse Jobs application, since all of the program behavior is controlled in JavaScript.  With modular JavaScript application code, we can selectively load portions that are relevant to the web page a user is viewing, and save on web transfer and page rendering times.
• mustache.js: the mustache.js library helps us collaborate well with web designers by enforcing a set of templates.  Any changes to page layout or improvements to the user interface can take place inside of template files, which any web designer can edit.  It allows our engineers to update the program code, without modifying or accidentally introducing bugs in the user interface.
• History.js: the History.js library provides a nice, cross-browser interface to a new feature in HTML5 called “pushState”.  This new feature enables JavaScript applications to change the state of a web page, without navigating to a new URL.  This feature allows web pages to change their appearance without loading an entirely new page, but just fetching the data that informs the page on how to change its appearance.
• leaflet: the leaflet library is an extremely lightweight JavaScript library that provides a basic level of mapping capabilities.  For this application, we aren’t doing any complex analysis on the mapping page, so we were able to use leaflet for basemaps, geographic boundaries, and simple gradient symbols.
• Highcharts: the Highcharts library is a fully functional charting library that provides attractive charts with interactive features and many different chart types.  This allows us to add more contextual information within the charts, making them easier to interpret and understand.

Using all of these components together has enabled our application to be fast, responsive, and adaptive.  It hasn’t all been easy, and there was certainly a learning curve.  But investing the time to learn these technologies has really paid off, as the application performs really well and the visualizations are fluid, easy to read, and quite compelling.

With more web applications moving their analytical capabilities into a distributed environment and processing information in the browser (desktop and mobile), libraries like require.js and mustache.js will become more important.  These tools are becoming an essential part of our web developers’ toolbox, not just because they work really well together, but because they provide a foundation for new types of user experiences.