Data Visualization—Using USStatesColorMap

For the past week and a half, my team has been working on an app that will help kids discover the many careers available in the US. Our goal is to take public data from the  Bureau of Labor Statistics and translate them into a readable format for mobile. In one feature, we wanted to create a map with the location quotient of a given occupation in every state from the BLS public API and show those values with a range of colors.

Location Quotient =

(Area occupational employment / Area total employment) / (U.S. occupational employment / U.S. total employment)

The result would be a map that looks something like this:

In the first iteration of this map, we decided on trying to recreate this BLS map.

Introducing USStatesColorMap

USStatesColorMap is an Objective-C CocoaPod that draws a United States color map using the Stately font, a symbol-based font where each state is a glyph within the font. It was created originally for CSS and HTML, but USStatesColorMap makes it easier to incorporate into iOS projects as well. So great!

Setting up USStatesColorMap

First add it to the Podfile and Install : pod ‘USStatesColorMap’

If your project is in Swift, create a Bridging Header File and add :#import

The method .setColorForAllStates will set a default color for all states. This can be overridden by using .performUpdates plus either the setColor:forState or setColor:forStateName methods. In Objective-C, the code looks like:

[self.statesColorMap setColor:color forStateByName:@"Alaska"];

In Swift:

self.usaColorMapView.setColor(UIColor.redColor(), forStateByName: "Alaska")

Issues

I ran into two issues using the CocoaPod. 1) In my Podfile, version “~1.0.1” did not work. By removing “~1.0.1” from the filename, the CocoaPod worked in my project. 2) The Stately font folder was not recognized originally by my project. After installing the pod, the file stately.tff had to be moved into the larger project in order for the compiler to find the reference and use it.

Switching Color with Location Quotient

For this particular implementation of a color map, I wanted the color of the state to be dependent on a location quotient value. The function will take in a dictionary of US states names and corresponding location quotients as Doubles. It switches on ranges of location quotients, the same ranges found on the BLS graphs (see above). Within the .performUpdates method,  for each set range, the setColor.forStateName will change the color of the state to be a different shade of red.

	func setLocationQuotientMap(dictionary: [String : Double]) {
	self.usaColorMapView.backgroundColor = UIColor.clearColor()
	self.usaColorMapView.setColorForAllStates(UIColor.flatGrayColor())
	self.usaColorMapView.performUpdates {
	for (state, locationQuotient) in dictionary {
	switch locationQuotient {
	case 0.20..<0.40 :
	self.usaColorMapView.setColor(UIColor.flatRedColor().lightenByPercentage(0.5), forStateByName: state)
	case 0.4..<0.8 :
	self.usaColorMapView.setColor(UIColor.flatRedColor().lightenByPercentage(0.25), forStateByName: state)
	case 0.8..<1.25 :
	self.usaColorMapView.setColor(UIColor.flatRedColor(), forStateByName: state)
	case 1.25..<2.50 :
	self.usaColorMapView.setColor(UIColor.flatRedColor().darkenByPercentage(0.25), forStateByName: state)
	case 2.50..<3.50 :
	self.usaColorMapView.setColor(UIColor.flatRedColor().darkenByPercentage(0.5), forStateByName: state)
	default:
	self.usaColorMapView.setColor(UIColor.flatGrayColor(), forStateByName: state)
	print("No location quotient for \(state)")
	}
	}
	}
	}

view raw

locationQuotientMap

hosted with ❤ by GitHub

Here is a sample set of data that passes through the function:

var dummyDictionaryLocationQuotient = ["District of Columbia" : 1.81,
"Colorado" : 1.55,
"Delaware" : 1.44,
"New York" : 1.27,
"Virginia" : 1.21,
"Maryland" : 1.18,
"South Dakota" : 1.18,
"Massachusetts" : 1.16,
"Texas" : 1.14,
"Minnesota" : 1.08,
"New Jersey" : 1.08,
"Pennsylvania" : 1.08,
"Florida" : 1.07,
"Nebraska" : 1.07,
"Vermont" : 1.07,
"Oklahoma" : 1.06,
"Rhode Island" : 1.06,
"California" : 1.05,
"Connecticut" : 1.05,
"Georgia" : 1.03,
"North Dakota" : 0.98,
"Washington" : 0.98,
"Kansas" : 0.95,
"Illinois" : 0.94,
"Missouri" : 0.94,
"New Mexico" : 0.9,
"Alabama" : 0.89,
"Hawaii" : 0.89,
"Utah" : 0.89,
"Arizona" : 0.87,
"Ohio" : 0.87,
"South Carolina" : 0.84,
"North Carolina" : 0.83,
"Wisconsin" : 0.82,
"Alaska" : 0.81,
"Maine" : 0.81,
"New Hampshire" : 0.79,
"Indiana" : 0.78,
"Montana" : 0.77,
"Oregon" : 0.76,
"Michigan" : 0.75,
"Wyoming" : 0.73,
"Iowa" : 0.71,
"Kentucky" : 0.71,
"Nevada" : 0.71,

When a dictionary of state names and Doubles is passed into the function, it looks like this:

More about the CocoaPod

More Occupational Employment Statistics from the Bureau of Labor Statistics