Inequality Mapping

A while ago (maybe a week) I had a conversation with David about inequality and mapping the data to help make it more understandable. He shared the video above with with me on Sept. 29. That got me moving.

Initially, I played with the data in Google Earth. It’s pretty easy to generate circles1 with various radii2 I used this website to make the circles in only a few minutes. I played with it in Google Earth but ended up being unsatisfied with the options available in the new Google My Maps online interface.

So that led me down the path of messing more directly with the Google Maps API.3 As I wandered around looking for examples I found a javascript library on Github (JQuery Location Picker) that seemed to do most of what I wanted. It let you pick a location and drop a marker with a specific circle size.

My next goal was to figure out how to make a drop down list set the variable for the circle radius.

Now that’s not difficult for anyone with a clue regarding javascript programming or probably anyone with a general clue about programming. I usually have a pretty good idea how this ought to work conceptually but not much of a clue what to actually write. It took me a while but I eventually got there in this case.

The chunk of HTML below lets the user pick the radius variable. You’ll notice that the options display one thing but the value is set to another. You can see the whole chunk on GitHub and you can play with the real thing here.

 <select id="us2-radius">
	<option value="1.9">Middle 20%</option>
	<option value="3.13">Second 20%</option>
	<option value="5.05">Top 20%</option>
	<option value="9.28">Top 5%</option>
	<option value="568.15">Average CEO</option>
	<option value="6317.09">Hammergren</option>
</select>

You can see the us2-radius variable in both pieces. The default pieces are overwritten by the variables with “Input” appended (for example radius vs radiusInput).

<script>$('#us2').locationpicker({
	location: {latitude: 37.546562, longitude: -77.450477},	
	radius: 9.28,
	inputBinding: {
	latitudeInput: $('#us2-lat'),
	longitudeInput: $('#us2-lon'),
	radiusInput: $('#us2-radius'),
	locationNameInput: $('#us2-address'),
	fillColor: '#ff0000'
		},
	enableAutocomplete: true,
	enableReverseGeocode: true,
	});
</script>	

The downfall of this version was that I couldn’t figure out how to make it show multiple circles4 I wanted to change the color of the circle with each change of quintile group. I also wanted to be able to stack the circles. That led me to greater Internet wandering and I found this Stackoverflow answer. You can see the revised version on Github as well and play with the working version over here. I’ll probably make one more revision that ties in the address component of the first version and also drives the variables through a Google Spreadsheet.5

This was a bit of wandering and a lot of learning on my part but I know pieces of this will come back in interesting ways and it was fun. There are few things as fun as figuring things out and eventually being able to make what you want.


1 I know it’s tempting to draw it by hand but resist.

2 I’m pretty sure a lot of these odd plurals exist simply to function as traps so grammarians have something to feel good about. Thankfully, there is something that can warm the cockles of their cold, cold hearts.

3 For additional information see Kin Lane

4 I think I can now. Amazing how easy everything is when you understand it.

5 That will have to wait until I finish repairing my refrigerator through YouTube videos.

Comments on this post

  1. Molly B. Ransone said on October 6, 2014 at 2:52 am

    Yay! I’m so glad you figured out the different colored circles. It’s great seeing how this project has improved since you started. I think it communicates the (very depressing) point about income inequality so much better now. And since this is such an important thing for people to understand, thank you for making this. Great contribution!

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL