<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jon Bruner &#187; Jon Bruner</title>
	<atom:link href="http://jebruner.com/author/jonbruner/feed/" rel="self" type="application/rss+xml" />
	<link>http://jebruner.com</link>
	<description>Quantified</description>
	<lastBuildDate>Thu, 08 Dec 2011 00:11:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>How To Build an Interactive Map with Open-Source Tools</title>
		<link>http://jebruner.com/2011/11/how-to-build-an-interactive-map-with-open-source-tools/</link>
		<comments>http://jebruner.com/2011/11/how-to-build-an-interactive-map-with-open-source-tools/#comments</comments>
		<pubDate>Thu, 17 Nov 2011 19:35:10 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[Forbes]]></category>

		<guid isPermaLink="false">http://jebruner.com/?p=295</guid>
		<description><![CDATA[The new Forbes interactive migration map uses nothing but open-source tools. Here's how I built it, using JavaScript, Python and MySQL.]]></description>
			<content:encoded><![CDATA[<div id="attachment_322" class="wp-caption alignright" style="width: 310px"><a href="http://www.forbes.com/special-report/2011/migration.html"><img class="size-medium wp-image-322 " title="My interactive migration map for Forbes" src="http://jebruner.com/wp-content/uploads/2011/11/Screen-shot-2011-11-17-at-2.28.43-PM-300x232.png" alt="My interactive migration map for Forbes" width="300" height="232" /></a><p class="wp-caption-text">My interactive migration map for Forbes, showing inbound (blue) and outbound (red) migration to and from Maricopa County, Arizona</p></div>
<p>My <a href="http://www.forbes.com/special-report/2011/migration.html">latest interactive migration map</a> on Forbes.com improves on the previous version in a few ways: it&#8217;s got five years of data instead of one; a brand-new layout; and some much-requested features like a search tool and the ability to switch off the lines. But the upgrade that I&#8217;m most excited about is in the code: I built the map using nothing but open-source software, from Python and MySQL to handle the data right down to JavaScript to display the map. I&#8217;ve been steadily moving much of my data handling to Python and MySQL, but this is the first map I&#8217;ve made using JavaScript, and interactive JS maps are still rare elsewhere, too.</p>
<p>The previous map was built in Flash, and I used <a href="http://jebruner.com/2010/06/the-migration-map/">some other proprietary software </a>to handle the data and tweak the presentation. Moving to JavaScript for interactive applications saves money you&#8217;d otherwise spend on Flash licenses and it makes your work more widely available: this map functions on the iPad, for instance (albeit very slowly, since it&#8217;s computationally intensive and involves fairly large downloads). Here, in case it&#8217;s useful for anyone else who makes these sorts of things, is a rundown of how I built the map.<span id="more-295"></span></p>
<h3>Overview</h3>
<p>This year&#8217;s map is similar in basic function to last year&#8217;s. When you visit the page, JavaScript code renders a county map of the United States and prepares it for interaction. When you roll over a county, an event listener fires, displaying a callout with the name of the county and turning the county&#8217;s edges red. When you click on a county, your browser downloads a corresponding file that includes a list of other counties to which and from which people migrated, along with relevant stats (income per capita of migrants) and the figures that are shown above the map (year-by-year migration, population). Your browser fills out the stats at the top of the screen, draws a graph (or animates a change from the previous graph, if you&#8217;ve already clicked on a county), and loops over the counties in the file, filling them with some shade of red or blue to indicate net inward or outward migration.</p>
<p>My JavaScript code deals with two big datasets: one—the migration data—is downloaded and rendered on the fly every time you click on a county. The other consists of the contours of the map itself: the locations of the boundaries that define the 3,143 counties in the United States.</p>
<h3>The Map</h3>
<p>I started by building a generalized interactive map of U.S. counties, where each county listens for rollover and click events and the appearance of each county can be changed programmatically. This is the sort of interaction that Flash has been critical for in the past, but the rise of faster browsers that better comply with universal standards means we can make this sort of map with JavaScript.</p>
<p>You can build a map like this with HTML5 Canvas, or, more promisingly, publish the map as an SVG image and use a library like JQuery to manipulate the appearance of the counties with CSS. But neither of those techniques is compatible with Internet Explorer 7 or 8, which together still have significant (roughly 15%, in the case of this map) market share. To get around this browser compatibility issue, I used the excellent <a href="http://raphaeljs.com/">Raphaël JavaScript library</a> to draw counties and handle interactions with them. Raphael renders images as SVGs for users with modern browsers and as <a href="http://en.wikipedia.org/wiki/VML">VMLs</a> for Internet Explorer users, and it provides a useful set of functions for interacting with shapes once they&#8217;ve been drawn.</p>
<p>We want Raphael to create each county as a polygon (or group of polygons). For this, we need polygon definitions for each county, and we can find those in a very useful <a href="http://commons.wikimedia.org/wiki/File:USA_Counties_with_FIPS_and_names.svg">SVG file available on Wikimedia</a>. SVGs are vector graphics that work something like HTML; open this SVG county map in a text editor and you&#8217;ll see a list of nodes that look like this:</p>
<pre>&lt;path
 d="M 404.13498,227.558 L 407.75898,227.324 L 407.95298,228.019
    L 408.99798,231.791 L 409.07498,232.061 L 405.21798,232.503
    L 404.57198,232.58 L 404.13498,227.558"
 id="01111"
 label="Randolph, AL" /&gt;</pre>
<p>That definition draws and labels Randolph County, Alabama. The &#8220;d&#8221; attribute contains the county&#8217;s edges: start at x = 404, y = 227, then move to 407, 227, and so forth. We need to get these paths into Raphael so that we can draw them on the page. Fortunately, <a href="http://raphaeljs.com/reference.html#Paper.path">the path definition syntax for Raphael</a> looks very similar; we can convert the SVG&#8217;s paths to the slightly more compact Raphael format using regular expressions and scale linearly as needed to the width and height of our eventual map.</p>
<p>I extracted the path definition and county ID (a FIPS code—see below) from the SVG file with Python&#8217;s useful <a href="http://www.crummy.com/software/BeautifulSoup/">BeautifulSoup library</a> and stored them in a MySQL database . I then queried that database, along with another one that I&#8217;ve built to return properly-styled place names (i.e., &#8220;Randolph, AL&#8221; becomes &#8220;Randolph County (Roanoke), Ala.&#8221;), to create a single JSON file that contains a name, ID and path definition for each county. Here&#8217;s how Randolph County looks in that file (remember that I&#8217;ve increased the size of the map to fit my page, and have scaled the path linearly):</p>
<pre>["01111", "Randolph County (Roanoke), Ala.",
    "M727,410L734,409L734,410L736,417L736,418L729,419L728,419L727,410"]</pre>
<p>This JSON file is fairly large (mine is about 580KB), but it&#8217;s much smaller than the original SVG file (about 1.9MB). Now it becomes easy to download this definition file, loop over it, and draw the counties. In the map&#8217;s JavaScript, we write (after importing JQuery and Raphael):</p>
<pre>$(document).ready(function() {
    $.getJSON("/path/to/counties.json", function(data) {
        drawMap(data);
    })});

function drawMap() {
    map = Raphael(
        document.getElementById("map_div_id", mapWidth, mapHeight)
    );</pre>
<pre>    var pathCount = data.length;
    //Loop over all of the counties in the JSON file
    for (i = 0; i &lt; pathCount; i++) {
        //The county's polygon definition is available at data[i][2]
        var thisPath = map.path(data[i][2]);
        //and its ID is at data[i][0];
        thisPath.id = data[i][0];
        thisPath.name = data[i][1];
        //Give the paths whatever appearance you want
        thisPath.attr({stroke:"#FFFFFF", fill:"#CBCBCB",
            "stroke-width":"0.2"});
        //Add event listeners for rollovers
        thisPath.mouseover(function (e) {countyMouseOver(e)});
    }
}</pre>
<p>Now the event functions will look something like this. You just have to retrieve the event target&#8217;s Raphael node, and then you&#8217;ve got yourself a Raphael object that can take all of the Raphael methods. Avoid the temptation to operate directly on these targets with JQuery, because then you&#8217;ll lose Internet Explorer compatibility.</p>
<pre>function countyMouseOver(e) {
    //Retrieve the mouseover target as a Raphael object
    var raph = e.target.raphael;
    //Use this to display a callout or whatever
    var thisCountyName = raph.name;
    //Change the color of the county's edges to indicate selection
    raph.attr({stroke:"#FF0000", "stroke-width":"1"});
    //Get ready for a click
    thisPath.click(function (e) {countyClick(e)});
}</pre>
<p>There&#8217;s obviously a lot more than that going on in the migration map, but that&#8217;s the foundational structure of the map. It takes a moment for most browsers to render this, but there&#8217;s still room to load all of your data in this step if you&#8217;re doing something fairly simple with your map. If you need to show more data, you&#8217;ll have to make the map download it on the fly, as I do in the migration map.</p>
<h3>Adding More Data</h3>
<p>The migration map presents a little under 20 megabytes of data in total—that&#8217;s pairwise in- and out-migration totals for every county in the country for five years. We obviously can&#8217;t have users download all of this data at the outset, and that&#8217;d be overkill in any case because most users only look at a handful of counties in a single session. So I pre-compiled one JSON file for each county for each year (15,715 files altogether) and published them to Forbes.com. The map downloads and parses them as users click on counties. So the countyClick function looks something like this, specifying an individual county JSON file to download and initiating the process:</p>
<pre>function countyClick(e) {
    var thisID = e.target.raphael.id;
    //Compose the path to the JSON file for this county
    var url = 'path/to/json/files/' + thisID + '.json';
    $.getJSON(url, function(data) {renderData(data)});
}</pre>
<p>Then we do whatever we want with the data in the callback function renderData(data).</p>
<h3>The IRS Data</h3>
<p>A bit about the IRS data I used in the migration map, in case you&#8217;re interested.</p>
<p>This data comes in two files for each year, one for inbound moves by county and the other for outbound moves. Each file contains one line for each pair of counties in the country along with tax return stats for the people who moved between them: number of returns, number of exemptions, and total adjusted gross income, in thousands, for those returns. So in the <a href="http://www.irs.gov/pub/irs-soi/countyoutflow0809.csv">2009 outbound CSV file</a>, we see this line:</p>
<pre>"01","001","01","047","AL","Dallas County",42,94,972</pre>
<p>In dealing with these files it&#8217;s useful to know about <a href="http://www.census.gov/geo/www/ansi/countylookup.html">FIPS codes</a>, 5-digit unique identifiers for each county. The first two digits correspond to the state and the last three to the county. In the IRS files they&#8217;re broken apart. When concatenated, the two columns on the left give us the county code for Autauga County, Alabama (01001). The third and fourth columns give us the code for Dallas County, Alabama (01047), and the last three columns tell us that people who moved from Autauga County to Dallas County in 2009 filed a total of 42 income tax returns, on which they counted 94 exemptions, and that the total adjusted gross income on all of those returns was $972,000.</p>
<p>Note that only people who file income tax returns will be included in this data, so it leaves out some retirees, some young people, and some low-income people. Nevertheless, we can glean a lot of information from this single line of data that&#8217;s useful in comparing this migratory flow to other migratory flows around the country: for instance, that adjusted gross income per capita among people who pay income tax and moved from Autauga County to Dallas County in 2009 was $10,340. (Household AGI, if you want to make an additional leap to equate a tax return with a household, averaged $23,100.) The IRS only reports these figures for groups of 10 returns or more, in order to preserve the privacy of filers.</p>
<p>Since the IRS data comes in the form of two CSV files per year, it&#8217;s best to consolidate all of the data in one place—I uploaded it to a MySQL database that was easy to query when it came time to build the individual county files that underlie the map.</p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2011/11/how-to-build-an-interactive-map-with-open-source-tools/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Drawing Lines Between Billionaires and Politicians</title>
		<link>http://jebruner.com/2011/10/drawing-lines-between-billionaires-and-politicians/</link>
		<comments>http://jebruner.com/2011/10/drawing-lines-between-billionaires-and-politicians/#comments</comments>
		<pubDate>Wed, 05 Oct 2011 20:32:39 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[Forbes]]></category>
		<category><![CDATA[Infographics]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://jebruner.com/?p=275</guid>
		<description><![CDATA[I spent part of last summer building a system that parses Federal Election Commission records and, along with my colleagues Louie Torres and Dmitri Slavinsky, a system that helps our researchers link members of the Forbes 400 to political contribution records. We&#8217;ve made that data an important part of our Forbes 400 profiles (scroll down [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_276" class="wp-caption alignright" style="width: 310px"><a href="http://blogs-images.forbes.com/jonbruner/files/2011/09/400-donors-graphic-large.png"><img class="size-medium wp-image-276" title="400-donors-graphic-small" src="http://jebruner.com/wp-content/uploads/2011/10/400-donors-graphic-small-300x216.png" alt="" width="300" height="216" /></a><p class="wp-caption-text">My graphic for Forbes illustrating donations from billionaires to political action committees</p></div>
<p>I spent part of last summer building <a href="http://www.forbes.com/sites/jonbruner/2011/02/03/how-to-build-your-own-political-contribution-database/">a system that parses Federal Election Commission records</a> and, along with my colleagues Louie Torres and Dmitri Slavinsky, a system that helps our researchers link members of the Forbes 400 to political contribution records.</p>
<p>We&#8217;ve made that data an important part of our Forbes 400 profiles (scroll down on publisher gnome <a href="http://www.forbes.com/profile/sam-zell/">Sam Zell&#8217;s page</a>, for instance, to find a breakdown of his political contributions as well as direct links to original filings). I&#8217;ve also visualized it a couple of times: in an <a href="http://www.forbes.com/2010/10/28/billionaires-favorite-politicians-interactive-graphic-rich-donors.html">interactive graphic</a> last year and in a more focused <a href="http://www.forbes.com/sites/jonbruner/2011/09/27/billionaires-hedge-their-bets-on-politicians-infographic/">static graphic</a> this year. The smaller graphic, which shows every contribution by the ten biggest contributors, is more effective at illustrating the point I make in the accompanying article: that many of these contributors are not motivated by ideology but by lobbying power, as evinced by their donations to politicians in both parties (some even contribute to multiple candidates in the same race).</p>
<p>It was fairly easy to assemble the data for these graphics (and for the <a href="http://www.forbes.com/sites/jonbruner/2011/09/27/billionaires-hedge-their-bets-on-politicians-infographic/2/">companion pages</a> in the October 10, 2011 issue of the magazine). The hardest part of writing both graphics&#8211;whether in ActionScript for the interactive one or in Python/SVG for the static one&#8211;was developing the equation for finding the endpoints of a line drawn between the edges of two circles whose centerpoints and radii are known.<span id="more-275"></span></p>
<p>In case it&#8217;s useful, here&#8217;s the Python function I wrote that will take x and y centerpoints and radius for two circles and return the endpoints of the shortest line that connects their edges. If you&#8217;re using Python, be sure to send in your parameters as floats rather than ints; otherwise, you&#8217;ll end up with a big jumble of rounded numbers that won&#8217;t connect your circles very nicely at all. This is a casewise function, each case being an orientation of the circles relative to each other: circle 1 above and to the left of circle 2; circle 1 above and to the right of circle 2; etc.</p>
<pre>import math

#Where x1, y1, r1 are centerpoint x, centerpoint y, and radius of circle 1
#and x2, y2, r2 are centerpoint x, centerpoint y, and radius of circle 2
def getEndpoints(x1, y1, r1, x2, y2, r2):
    #Going through the orientation cases
    if (x1 &gt;= x2) &amp; (y1 &lt;= y2):
        theta1 = math.atan(abs(x1 - x2) / abs(y2 - y1))
        theta2 = (math.pi / 2) - theta1
    elif (x1 &lt; x2) &amp; (y1 &lt;= y2):
        theta1 = -1 * (math.atan(abs(x1 - x2) / abs(y2 - y1)))
        theta2 = (math.pi / 2) - theta1
    elif (x1 &gt;= x2) &amp; (y1 &gt; y2):
        theta1 = math.atan(abs(x1 - x2) / abs(y2 - y1))
        theta2 = -1 * ((math.pi / 2) - theta1)
    elif (x1 &lt; x2) &amp; (y1 &gt; y2):
        theta1 = -1 * (math.atan(abs(x1 - x2) / abs(y2 - y1)))
        theta2 = -1 * ((math.pi / 2) - theta1)

    #The x, y coordinates of one end of the line
    line_x1 = x1 - (r1 * math.sin(theta1))
    line_y1 = (r1 * math.sin(theta2)) + y1

    #The x, y coordinates of the other end of the line
    line_x2 = x2 - (r2 * math.sin(theta1 + math.pi))
    line_y2 = (r2 * math.sin(theta2 + math.pi) + y2)

    return {"x1":line_x1, "y1":line_y1, "x2":line_x2, "y2":line_y2}</pre>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2011/10/drawing-lines-between-billionaires-and-politicians/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>The Migration Map</title>
		<link>http://jebruner.com/2010/06/the-migration-map/</link>
		<comments>http://jebruner.com/2010/06/the-migration-map/#comments</comments>
		<pubDate>Thu, 17 Jun 2010 17:39:02 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[Forbes]]></category>
		<category><![CDATA[Infographics]]></category>
		<category><![CDATA[Interactive]]></category>
		<category><![CDATA[Map]]></category>

		<guid isPermaLink="false">http://jebruner.com/?p=257</guid>
		<description><![CDATA[A few days ago, I published an interactive map of American migration on Forbes.com. Since then, it's become more popular than I could have possibly imagined. It's been shared 5,000 times on Facebook and written about in The Economist, three different New York Times blogs, three different Atlantic blogs, and basically the entire "-ist" franchise (Gothamist, Chicagoist, DCist, and so on)--plus 1,700 other blogs and publications of various sorts. To say I'm grateful for the reception would be a profound understatement.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.forbes.com/2010/06/04/migration-moving-wealthy-interactive-counties-map.html"><img class="alignleft size-full wp-image-263" title="Migration to and from Los Angeles" src="http://jebruner.com/wp-content/uploads/2010/06/LA_map.png" alt="Migration to and from Los Angeles" width="312" height="211" /></a>A few days ago, I published <a href="http://www.forbes.com/2010/06/04/migration-moving-wealthy-interactive-counties-map.html">an interactive map of American migration</a> on Forbes.com. Since then, it&#8217;s become more popular than I could have possibly imagined. It&#8217;s been shared 5,000 times on Facebook and written about by <em><a href="http://economist.com/blogs/freeexchange/2010/06/migration">The Economist</a></em>, <a href="http://andrewsullivan.theatlantic.com/the_daily_dish/2010/06/voting-with-their-feet.html">three</a> <a href="http://www.theatlantic.com/business/archive/2010/06/this-is-what-a-mobile-nation-looks-like/58269/">different</a> <a href="http://www.theatlanticwire.com/opinions/view/opinion/debating-migration-why-are-people-moving-to-texas-4014"><em>Atlantic</em></a><em> </em>blogs, <a href="http://thecaucus.blogs.nytimes.com/2010/06/17/the-early-word-sliced-and-diced/">three</a> <a href="http://economix.blogs.nytimes.com/2010/06/16/what-were-reading-tipping/">different</a> <em><a href="http://cityroom.blogs.nytimes.com/2010/06/15/taking-orders-from-the-hive/">New York Times</a></em> blogs, and basically the entire &#8220;-ist&#8221; franchise (<a href="http://gothamist.com/2010/06/15/map_whos_moving_where.php">Gothamist</a>, <a href="http://chicagoist.com/2010/06/15/cook_countys_comings_and_goings.php">Chicagoist</a>, <a href="http://dcist.com/2010/06/from_this_forbes_data_visualization.php">DCist</a>, and so on)&#8211;plus 1,700 other blogs and publications of various sorts. It&#8217;s broken <em>Forbes</em>&#8216;s record for interactive content. To say I&#8217;m grateful for the reception would be a profound understatement.</p>
<p>Part of the reason that readers have enjoyed the map, I think, is that it confirms graphically what people have long known or suspected about regional trends based on either hard statistics or gut feelings: that the Pacific Northwest is being flooded with Californians, that Florida is suffering from brain drain, that Los Angeles no longer has the universal draw that it had during much of the 20th century, and that Detroit is in serious trouble and Dallas is doing rather well for itself.</p>
<p>At a higher level, the map confirms that the United States is a highly mobile country: one in which the lack of jobs in Detroit and the surfeit of them in Dallas draws massive numbers of people (806 of them, in fact, moved to the Dallas region from Wayne County; 167 went the other way). Commentators have offered theories of how taxes, costs of living, and quality of life create patterns on this map as well. Americans know what they like, and they&#8217;ll move to get it.</p>
<p>In skimming through the astonishing number of comments that people have posted (mostly to sites other than Forbes.com), I&#8217;ve come across a few persistent questions that I&#8217;ll answer here before explaining how the map works.<span id="more-257"></span></p>
<p><em>The lines obscure everything! Why not just use colored fills in the counties (i.e., a choropleth map or heat map) to illustrate net change?<br />
<span style="font-style: normal;">Because that would be visually boring. The lines create a narrative by forcing the reader to see relationships between counties, not just flat characteristics</span><span style="font-style: normal;">. Click on Miami: your eye immediately catches the big </span>swoosh</em> of people from the Northeast and then follows its outward counterpart to the West. The lines are dynamic and directional; they suggest movement, which is exactly what the map is meant to show.</p>
<p>The other problem with the heatmap approach is that it would result in lots of emptiness: Maricopa County, Ariz. (which contains Phoenix) has the most connections of any county: 834. That&#8217;s a lot of lines on this map, but it&#8217;s not many counties to color: just over a quarter of the 3,000 or so counties on the map. Rather than seeing an explosion of movement when you click on Maricopa County, you&#8217;d see a limp, mostly-blank map with a few counties colored in and nothing to suggest their relationship to Maricopa County. That issue becomes really acute when you get to the 2,700 counties with fewer than 100 connections.</p>
<p>So there you go, Snoozy McBoringstein.</p>
<p><em>Well, then, have the lines appear by default but give me a button that I can use to make them disappear.<br />
<span style="font-style: normal;">Okay, sure. I&#8217;ll try to satisfy these criticisms by way of more features in version 2 of the map, which I&#8217;ll probably publish this fall when the IRS&#8217;s 2009 data will be released. I thought of a lot of features that I&#8217;d like to include but couldn&#8217;t because this map already taxes most users&#8217; computers. That can be fixed through careful optimization, but I didn&#8217;t have time to do as much of that as I&#8217;d have liked because I published the map literally 20 minutes before leaving for a week in Hong Kong.</span></em></p>
<p><em>This map is incomplete/misleading because the IRS data doesn&#8217;t include immigrants.<br />
<span style="font-style: normal;">True, I suppose, but this is the very best migration data available and, in fact, its problems can be generalized beyond that complaint: the IRS migration stats don&#8217;t include anyone who didn&#8217;t file an income tax return (or count as an exemption on someone else&#8217;s return) in both 2007 and 2008. That means that there are some distortions when it comes to people entering the workforce (through immigration or by getting a first job) and people leaving it (i.e., retirees who file their last tax return the year that they move to Florida). It also probably leaves out some low-income earners who don&#8217;t file income tax returns at all.</span></em></p>
<h2><em><span style="font-style: normal;">How It Works</span></em></h2>
<p><em><span style="font-style: normal;">More than a few people (starting with <a href="http://twitter.com/TribData">@TribData</a>) have asked how I built the map. Here&#8217;s the broad outline: IRS Data + Python + county shapefile + MAPublisher + ActionScript 3.0 = interactive map with tons of data.</span></em></p>
<p><em><span style="font-style: normal;">I began with <a href="http://www.irs.gov/taxstats/article/0,,id=212695,00.html">data from the Internal Revenue Service</a> that reports migration stats for every county in the country: inward and outward tables that include number of returns filed, number of exemptions reported on those returns, and aggregate adjusted gross income for those returns. Using Python, I broke down the data and wrote 3,000 XML files (one for each county) plus a grand index file that contains county names and FIPS identifiers and uploaded all of those to our servers.</span></em></p>
<p>The map itself began with a county shapefile that I beautified with Avenza MAPublisher and imported to Flash using the process outlined on <a href="http://kelsocartography.com/blog/?p=2276">Kelso&#8217;s Corner</a>. The result is a Flash file in which each county area and outline is its own movie clip, named with FIPS identifiers.</p>
<p>My ActionScript code in the map draws all of these together: it downloads the index XML file, then cycles through all of the county movie clips and adds event listeners for rollovers and clicks to each one (this is what it&#8217;s doing as the loading bar creeps across the page).</p>
<p>When the user rolls over a county, the rollover event listener fires, retrieves the county name from the index, and displays it. When the user clicks a county, the click event listener fires, downloads the relevant individual XML file, and draws lines between the clicked-on county and each associated county.</p>
<p>JavaScript in the article page looks for a URL parameter called &#8220;preload&#8221; and passes its value along to the Flash file; this allows users to share links that pre-load a particular county.</p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2010/06/the-migration-map/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Tracking China</title>
		<link>http://jebruner.com/2010/04/tracking-china/</link>
		<comments>http://jebruner.com/2010/04/tracking-china/#comments</comments>
		<pubDate>Fri, 23 Apr 2010 16:10:25 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[Forbes]]></category>
		<category><![CDATA[China]]></category>
		<category><![CDATA[Infographics]]></category>
		<category><![CDATA[Interactive]]></category>
		<category><![CDATA[Map]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/?p=178</guid>
		<description><![CDATA[Forbes published my new China Tracker interactive map last night, and I've been pleased with the reception so far. It's the first map I've made that involves animation, and it's also the first map that I've built from scratch using nothing but ActionScript and Python. Here's how I did it.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.forbes.com/2010/04/20/oil-energy-minerals-business-global-2000-10-china-investment-tracker.html"><img class="alignleft size-full wp-image-182" title="Forbes China Tracker" src="http://www.jebruner.com/wp-content/uploads/2010/04/chinaPictureSmall.png" alt="" width="280" height="202" /></a><em>Forbes </em>published my new <a href="http://www.forbes.com/2010/04/20/oil-energy-minerals-business-global-2000-10-china-investment-tracker.html">map of Chinese overseas investments</a> last night, and I&#8217;ve been pleased with its reception so far. It&#8217;s the first map I&#8217;ve made that involves animation, and it&#8217;s also the first map that I&#8217;ve built from scratch using nothing but ActionScript and Python. That turned out to be tricky in a neat, hackerish sort of way.</p>
<p>In the past, I&#8217;ve made all of my interactive maps using Avenza&#8217;s excellent <a href="http://www.avenza.com/mapublisher">MAPublisher</a> software. MAPublisher handles geocoding and projections, which leaves me free to faff about with color schemes and callouts.</p>
<p>When you code your own map from scratch like this, though, you have to write something to geocode points and then project them (unless you&#8217;re partial to maps where Canada, Greenland and Russia seem to be taking over the world). There are less math-intensive solutions to this, like <a href="http://kelsocartography.com/blog/?p=2276">creating a map in Illustrator and then moving it to Flash</a> (recommended for choropleth maps), but I wanted maximum programmatic control over the map (and the thrill of coding my own solution).</p>
<p>Geocoding was fairly easy in this case; I just derived centroids for each country using ArcGIS and merged those coordinates into the dataset from Heritage&#8217;s <a href="http://www.heritage.org/research/reports/2010/02/china%20global%20investment%20tracker%202010">Derek Scissors</a> using Stata. The data for each country now included deal value, acquirer, target, target&#8217;s country, latitude, and longitude.</p>
<p>Now for the projection: simply sizing down the latitude and longitude coordinates linearly by enough to make them represent pixel locations would result in a so-called <a href="http://mathworld.wolfram.com/EquirectangularProjection.html">&#8216;unprojected&#8217; map</a> that&#8217;s a dishonest representation of shapes and relative sizes. Unprojected maps also tend to waste a great deal of space by making the highest and lowest latitudes enormous and the middle latitudes small&#8211;a general problem for Web layouts like ours, where maps can&#8217;t be more than 768 pixels wide, and for this map specifically, because a great deal of Chinese investment has taken place in parts of Africa and South Asia that are near the equator.<span id="more-178"></span></p>
<p>I went for the Winkel Tripel projection, currently the presentation of choice for National Geographic and one that strikes a reasonable balance between angular and spatial distortion. Wikipedia conveniently provides the transformation formulae, which include functions like arccosines that I hadn&#8217;t seen since college physics classes. With longitude as <em>λ</em>, latitude as <em>φ</em>, and standard parallel&#8211;the latitude above and below the equator at which the projection is entirely accurate&#8211;as <em>φ</em><sub><em>1</em>,</sub> we get mappings for the <em>x</em> and <em>y</em> coordinates thus:</p>
<img src='http://s.wordpress.com/latex.php?latex=x%20%3D%20%5Cfrac%7B1%7D%7B2%7D%5Cleft%5B%5Clambda%20%5Ccos%28%5Cphi_1%29%20%2B%20%5Cfrac%7B2%20%5Ccos%28%5Cphi%29%5Csin%5Cleft%28%5Cfrac%7B%5Clambda%7D%7B2%7D%5Cright%29%7D%7B%5Cmathrm%7Bsinc%7D%28%5Calpha%29%7D%5Cright%5D%20&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='x = \frac{1}{2}\left[\lambda \cos(\phi_1) + \frac{2 \cos(\phi)\sin\left(\frac{\lambda}{2}\right)}{\mathrm{sinc}(\alpha)}\right] ' title='x = \frac{1}{2}\left[\lambda \cos(\phi_1) + \frac{2 \cos(\phi)\sin\left(\frac{\lambda}{2}\right)}{\mathrm{sinc}(\alpha)}\right] ' class='latex' />
<img src='http://s.wordpress.com/latex.php?latex=y%20%3D%20%5Cfrac%7B1%7D%7B2%7D%5Cleft%5B%5Cphi%20%2B%20%5Cfrac%7B%5Csin%28%5Cphi%29%7D%7B%5Cmathrm%7Bsinc%7D%28%5Calpha%29%7D%5Cright%5D%20&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='y = \frac{1}{2}\left[\phi + \frac{\sin(\phi)}{\mathrm{sinc}(\alpha)}\right] ' title='y = \frac{1}{2}\left[\phi + \frac{\sin(\phi)}{\mathrm{sinc}(\alpha)}\right] ' class='latex' />
<p>where</p>
<img src='http://s.wordpress.com/latex.php?latex=%5Calpha%20%3D%20%5Carccos%20%5Cleft%5B%5Ccos%28%5Cphi%29%20%5Ccos%20%5Cleft%28%20%5Cfrac%7B%5Clambda%7D%7B2%7D%20%5Cright%29%5Cright%5D&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='\alpha = \arccos \left[\cos(\phi) \cos \left( \frac{\lambda}{2} \right)\right]' title='\alpha = \arccos \left[\cos(\phi) \cos \left( \frac{\lambda}{2} \right)\right]' class='latex' />
<p>It would be easy to code these equations into ActionScript and have each user&#8217;s Flash player map the investment dots on the fly. But Flash files with more than 200 event listeners (counting rollover and click listeners on the dots and bar graph and click listeners on the legend and buttons) already strain some feebler computers. Preprocessing the mapping seemed like the way to go, so I did the projection transformation in Python as I built the XML files that underlie the map (one file that includes every investment, its magnitude for sizing, its x/y coordinates for location, and details for the callouts; and another file that includes monthly data for the bar graph).</p>
<p>With the XML files built in Python, ActionScript just had to handle some simple placement and sizing tasks: creating a circular movie clip for each investment, coloring it appropriately, and adding it as a child to the stage. The script adds all of the circles to the stage when the map loads, during the time that the background displays a big &#8220;Loading&#8230;&#8221; notice; as the animation plays, the circle movie clips are set to visible and a little popping animation is applied along with a small sound effect. While the Flash file is open in the viewer&#8217;s browser, the circles and spark bars are stored in arrays for easy access with the .indexOf() method.</p>
<p>The combination of sound effects and spark bars might seem redundant, but they illustrate two different dimensions of these investments: the spark bars show dollar volume, which might be high even in months when there&#8217;s just one investment. The monthly number of investments is the other dimension: the visual animation is meant to call the viewer&#8217;s attention to each newly-appearing circle, but it&#8217;s difficult to keep track of every new dot on the map every month. The sound effects reinforce the visual animation by giving an overall feel for the number of dots added each month (the popping sound plays once for every new investment in each month).</p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2010/04/tracking-china/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Terminal Dysfunction</title>
		<link>http://jebruner.com/2010/03/terminal-dysfunction/</link>
		<comments>http://jebruner.com/2010/03/terminal-dysfunction/#comments</comments>
		<pubDate>Sun, 07 Mar 2010 10:51:49 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[New York]]></category>
		<category><![CDATA[Architecture]]></category>
		<category><![CDATA[Transportation]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/2010/03/terminal-dysfunction/</guid>
		<description><![CDATA[Of JFK Airport's many faults, which include Odyssian distance from Manhattan and staggering flight delays, none is quite as aggravating as the condition of Delta's terminal complex. 

Terminal 3, which opened in the 1960s as the Pan Am Worldport and managed to escape the following five decades with only minimal improvement, is now festooned with kite-like leak catchers that divert rainwater from the terminal's crumbling ceiling.]]></description>
			<content:encoded><![CDATA[<p>Of JFK Airport&#8217;s many faults, which include Odyssian distance from Manhattan and staggering <a href="http://www.nytimes.com/gwire/2009/05/13/13greenwire-dot-scraps-auction-plan-for-nyc-airports-19116.html">politician-induced flight delays</a>, none is quite as aggravating as the condition of Delta&#8217;s terminal complex. </p>
<p>Terminal 3, which opened in the 1960s as the Pan Am Worldport and managed to escape the following five decades with only minimal improvement, is now festooned with kite-like leak catchers and a complicated system (series?) of rubber tubes that divert rainwater from the terminal&#8217;s crumbling ceiling (a couple of them are shown in the photo below).</p>
<p>Terminal 2, which is connected to Delta&#8217;s other building by a sequence of broken moving walkways, has likewise avoided any major upgrades since it was built for some other long-defunct carrier in the middle of the last century (Eastern Airlines? I&#8217;m writing this on my phone from a worn seat in a threadbarely-carpeted waiting area, so research is difficult).</p>
<p>Over the last decade, JFK has gone through an impressive modernization process; the pleasant-enough Airtrain whisks me to the airport from the thrillingly-rebuilt Jamaica Station in less time than it takes a bored TSA agent to find a rogue yogurt container. The airport&#8217;s other terminals have been rebuilt: first the terminals that serve a motley assortment of foreign airlines, then American&#8217;s complex, and then JetBlue&#8217;s. If LOT Polish Airlines gets to use a terminal that&#8217;s not an embarrassment to New York City, why can&#8217;t one of the airport&#8217;s hub carriers (and now the largest airline in the world) have one that&#8217;s somewhere above Soviet bloc standards?</p>
<p><a href="http://www.jebruner.com/wp-content/uploads/2010/03/p_1600_1200_187F759E-57F4-49EB-BFDD-F7D86BA6DEC4.jpeg"><img src="http://www.jebruner.com/wp-content/uploads/2010/03/p_1600_1200_187F759E-57F4-49EB-BFDD-F7D86BA6DEC4.jpeg" alt="" class="alignnone size-full" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2010/03/terminal-dysfunction/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Paterson&#8217;s Woes, Seen through Google</title>
		<link>http://jebruner.com/2010/02/patersons-woes-seen-through-google/</link>
		<comments>http://jebruner.com/2010/02/patersons-woes-seen-through-google/#comments</comments>
		<pubDate>Thu, 25 Feb 2010 22:23:16 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[New York]]></category>
		<category><![CDATA[Election]]></category>
		<category><![CDATA[Governor]]></category>
		<category><![CDATA[New York State]]></category>
		<category><![CDATA[Paterson]]></category>
		<category><![CDATA[Politics]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/?p=156</guid>
		<description><![CDATA[Nowhere is David Paterson's impossible election situation better illustrated than in the Google results for his name. Add search engine optimization to the long list of things that New York State's elected officials can't seem to get right.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.jebruner.com/wp-content/uploads/2010/02/paterson.png"><img class="alignleft size-medium wp-image-157" title="paterson google results" src="http://www.jebruner.com/wp-content/uploads/2010/02/paterson-231x300.png" alt="Google results page for David Paterson" width="231" height="300" /></a>Nowhere is David Paterson&#8217;s impossible election situation better illustrated than in the Google results for his name <em>(left)</em>. His campaign&#8217;s site is the seventh hit for &#8220;David Paterson,&#8221; well below several negative pages. Add search engine optimization to the long list of things that New York State&#8217;s elected officials can&#8217;t seem to get right.</p>
<p>At the top of his results page are two news articles detailing his latest scandal (in which he apparently contacted a woman who lodged a domestic abuse complaint against his aide).</p>
<p>Below those news headlines are Paterson&#8217;s Wikipedia article, the last section of which documents his moribund gubernatorial campaign, and his state government website. Then come two headlines from the Huffington Post, one questioning whether Paterson will resign and another announcing the resignation of the aide involved in the domestic dispute.</p>
<p>Finally, right before Paterson&#8217;s campaign website comes a Business Insider article about the rumors that circulated in Albany over the New York Times&#8217;s investigation into the governor&#8217;s aides.</p>
<p>Things do not look good for David Paterson.</p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2010/02/patersons-woes-seen-through-google/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>America&#8217;s Worst Traffic, And What To Do About It</title>
		<link>http://jebruner.com/2010/02/americas-worst-traffic-and-what-to-do-about-it/</link>
		<comments>http://jebruner.com/2010/02/americas-worst-traffic-and-what-to-do-about-it/#comments</comments>
		<pubDate>Thu, 25 Feb 2010 20:16:41 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[Forbes]]></category>
		<category><![CDATA[Interactive]]></category>
		<category><![CDATA[New York]]></category>
		<category><![CDATA[Transit]]></category>
		<category><![CDATA[Transportation]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/?p=148</guid>
		<description><![CDATA[After a couple of years of declining traffic congestion (due first to rising gas prices and then to rising unemployment), traffic congestion seems to be coming back. Growth in economic activity and stimulus-related road construction projects are bringing more people onto the roads and then slowing them down. This brought out a minor tiff between two commenters on the article I wrote for Forbes on the subject.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.jebruner.com/wp-content/uploads/2010/02/nyc.jpg"><img class="alignleft size-medium wp-image-149" title="New York traffic map" src="http://www.jebruner.com/wp-content/uploads/2010/02/nyc-300x280.jpg" alt="New York traffic map" width="300" height="280" /></a>We&#8217;ve just published <a href="http://www.forbes.com/2010/02/22/traffic-intersections-congestion-lifestyle-vehicles-traffic-jams-map.html">a neat set of maps on Forbes.com</a> that highlight America&#8217;s worst traffic chokepoints. The situation in New York, illustrated at left, should be familiar to anyone unfortunate enough to own a car in the area. The Cross Bronx Expressway, one of the great urban planning disasters of the late 20th century (and the subject of some really excellent exposition in <em><a href="http://www.amazon.com/gp/product/0394720245?ie=UTF8&amp;tag=thetech-20&amp;linkCode=xm2&amp;camp=1789&amp;creativeASIN=0394720245">The Power Broker</a></em><a href="http://www.amazon.com/gp/product/0394720245?ie=UTF8&amp;tag=thetech-20&amp;linkCode=xm2&amp;camp=1789&amp;creativeASIN=0394720245"> by Robert Caro</a>), has the worst single traffic tie-up in the country, as well as several others among the top 10.</p>
<p>The data that the maps are based on come from my friends at Inrix, a clever company based just outside of Seattle that measures traffic congestion using data from GPS tracking systems in commercial fleets. <a href="http://www.forbes.com/2008/10/10/gps-inrix-navigation-tech-personal-cz_jb_1010inrix.html">I&#8217;ve written about them before</a>, and used their data in December 2008 to form the <em>Forbes </em>&#8220;<a href="http://www.forbes.com/2008/12/23/recession-recovery-rebound-business-cz_jb_1223index.html">Chirp Index</a>,&#8221; a group of leading indicators with which we (fairly accurately) predicted that the recession would bottom out late in the summer of 2009.</p>
<p>After a couple of years of declining traffic congestion (due first to rising gas prices and then to rising unemployment), traffic congestion seems to be coming back. Growth in economic activity and stimulus-related road construction projects are <a href="http://www.forbes.com/2010/02/22/traffic-intersections-congestion-lifestyle-vehicles-traffic-jams.html">bringing more people onto the roads and then slowing them down</a>.</p>
<p>A minor tiff erupted in the comments section of my article; one commenter suggested that traffic congestion wouldn&#8217;t come back if only we invested more in public transportation. The next commenter wrote that public transportation hasn&#8217;t been proven to have any meaningful impact on traffic congestion.</p>
<p>Both commenters make legitimate, though incomplete, points. Public transit advocates tend not to talk of payoffs from transit investment in terms of immediate relief from congestion; after all, much of the housing and commercial space that&#8217;s been built in this country over the last 50 years is fundamentally incompatible with efficient transit schemes. The office-park worker who lives on a cul-de-sac will likely never be able to use even the most ambitious new transit system to commute&#8211;at least not as long as he lives in a housing tract and works in an office park.</p>
<p>That&#8217;s why transit advocates concede that new rail lines won&#8217;t immediately cut traffic on adjacent arterial roads. Rather, they say, transit systems encourage the kind of development that is compatible with transit use: walkable neighborhoods with a combination of townhouses, apartment high-rises, offices and shopping that are based around transit stations.</p>
<p>This kind of development is popular in places like Northern Virginia, where a well-run rail system links outlying areas to a massive job center in Washington, D.C. It takes much more patience to introduce these kinds of transit-oriented neighborhoods to cities with comparatively weak central business districts, like Phoenix, Los Angeles, and Atlanta, since people who live in them but don&#8217;t work in them may still have to drive to otherwise-inaccessible office parks.</p>
<p>So new transit networks in car-oriented areas constitute major investments in reorienting urban development over a period of decades, not a quick attempt to remove a few cars from highways. Traffic will come back this year&#8211;there&#8217;s no way around that&#8211;but sound investments now could mean that it will bring fewer headaches fifty years from now.</p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2010/02/americas-worst-traffic-and-what-to-do-about-it/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing the New, Embeddable, Forbes Super Bowl Ad Viewer</title>
		<link>http://jebruner.com/2010/02/introducing-the-new-embeddable-forbes-super-bowl-ad-viewer-2/</link>
		<comments>http://jebruner.com/2010/02/introducing-the-new-embeddable-forbes-super-bowl-ad-viewer-2/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 16:41:42 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[Forbes]]></category>
		<category><![CDATA[Embeddable]]></category>
		<category><![CDATA[Interactive]]></category>
		<category><![CDATA[Super Bowl]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/testpress/?p=112</guid>
		<description><![CDATA[Laurie Burkitt and I have put together a nifty Super Bowl ad viewer for Forbes. You can embed this viewer (for free!) in an article or blog post to display this year’s Super Bowl ads alongside your own content. No need to go through the colossal hassle of finding, compiling, and encoding the ads. We’ve done it for you because we at Forbes love you.]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-58" title="Forbes Super Bowl embeddable ad viewer" src="http://www.jebruner.com/wp-content/uploads/2010/01/Picture-61-284x300.png" alt="Introducing the Forbes Super Bowl embeddable ad viewer: now more embeddable than ever!" width="284" height="300" />Laurie Burkitt and I have put together a nifty Super Bowl ad viewer for <em>Forbes</em>. You can embed this viewer (for free!) in an article or blog post to display this year’s Super Bowl ads alongside your own content. No need to go through the colossal hassle of finding, compiling, and encoding the ads. We’ve done it for you because we at <em>Forbes </em>love you.</p>
<p>Here’s how it works: copy and paste the code below into the HTML of your web site wherever you want it to appear. Because we’re bound by an embargo and are not allowed to release this year’s ads until the end of this year’s Super Bowl game, the viewer will contain ads from last year at first. Embed it anyway. In an unprecedented feat of Internet magic, the viewer that you put in your own blog will automatically replenish itself with fresh, fresh 2010 ads after the big game on February 7. Again, we make it easy for you.</p>
<p>When we switch in the new ads on the 7th, we’ll also remotely activate a voting feature in the viewer that will let readers pick the best and worst ads. Expect to generate some good discussion in your comments section.</p>
<p>Here’s the viewer. Scroll down to copy and paste the code.<br />
<script src="http://images.forbes.com/scripts/swfobject.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
swfobject.embedSWF("http://images.forbes.com/jb/superbowl/viewer.swf",
"myAlternativeContent", "568", "600", "9.0.0", "expressInstall.swf", {},
{allowscriptaccess:"always", allownetworking:"external"},{});
// ]]&gt;</script></p>
<div id="myAlternativeContent">You must have Adobe Flash Player 9 or higher installed to view this content<br />
<a href="http://www.adobe.com/go/getflashplayer" target="_top"><br />
Click here to get Flash Player.<br />
</a></div>
<p>And here&#8217;s the code:</p>
<pre>&lt;script type="text/javascript" src="http://images.forbes.com/scripts/swfobject.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
swfobject.embedSWF("http://images.forbes.com/jb/superbowl/viewer.swf",
"myAlternativeContent", "568", "600", "9.0.0", "expressInstall.swf", {},
{allowscriptaccess:"always", allownetworking:"external"},{});&lt;/script&gt;
&lt;div id="myAlternativeContent"&gt;You must have Adobe Flash Player 9
or higher installed to view this content
&lt;a href="http://www.adobe.com/go/getflashplayer" target="_top"&gt;
&lt;img border="0" alt="Get Adobe Flash player" align="left"
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/&gt;
&lt;/a&gt;&lt;/div&gt;</pre>
<p>Visit Forbes.com for more details on our <a href="http://www.forbes.com/2010/02/01/embed-super-bowl-commercials-ads-2010.html">embeddable Super Bowl ad viewer</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2010/02/introducing-the-new-embeddable-forbes-super-bowl-ad-viewer-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New Jersey 7: George Washington Bridge</title>
		<link>http://jebruner.com/2007/06/new-jersey-7-george-washington-bridge/</link>
		<comments>http://jebruner.com/2007/06/new-jersey-7-george-washington-bridge/#comments</comments>
		<pubDate>Tue, 26 Jun 2007 19:35:05 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[New York]]></category>
		<category><![CDATA[Bridges]]></category>
		<category><![CDATA[New Jersey]]></category>
		<category><![CDATA[Transit]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/testpress/?p=43</guid>
		<description><![CDATA[The G.W.B. doesn't disappoint. It's really big—the roadway is almost a mile long and is suspended more than 200 feet above the surface of the Hudson River—but it's also digestible.]]></description>
			<content:encoded><![CDATA[<p>The G.W.B. doesn&#8217;t disappoint. It&#8217;s really big—the roadway is almost a mile long and is suspended more than 200 feet above the surface of the Hudson River—but it&#8217;s also digestible. Walking across it doesn&#8217;t take terribly long, and it&#8217;s actually a bit easier than the walk across the Brooklyn or Manhattan Bridges, since the deck links a high point in New Jersey to a high point in Manhattan.</p>
<p>The day that I took this walk, the south sidewalk was closed, so I used the walkway on the north side of the bridge. The natural scenery up the river is just as magnificent as the man-made scenery downriver.</p>
<p><img src="http://www.jebruner.com/jerseyimages/Hudson.jpg" alt="" width="600" height="400" /></p>
<p>From the metro area that gives us such names as Hoboken, Weehawken, Hackensack*, Harsimus Cove and Throgs Neck, comes Yonkers, which sits across the city line from the Bronx. It&#8217;s visible from the bridge.</p>
<p><img src="http://www.jebruner.com/jerseyimages/Yonkers.jpg" alt="" width="600" height="400" /></p>
<p>The Cloisters, part of the Metropolitan Museum of Art, sits on the top of a hill in Fort Tryon Park at the very northern tip of Manhattan. Its tower pokes through the trees in this photo. Below it, just above the shoreline, is Robert Moses&#8217;s Henry Hudson Parkway. In <em>The Power Broker</em>, Robert Caro&#8217;s biography of Moses, the construction of the Henry Hudson Parkway was where Moses went from arrogant-but-generally-good to essentially maniacal (but there were signs earlier, of course).</p>
<p><img src="http://www.jebruner.com/jerseyimages/Cloisters.jpg" alt="" width="600" height="400" /></p>
<p>The views of Midtown are as good as ever, of course. The scale of the Empire State Building is, I think, best appreciated from this distance, where it still overpowers just about everything else.</p>
<p><img src="http://www.jebruner.com/jerseyimages/MTownSkyline2.jpg" alt="" width="600" height="400" /></p>
<p>As we cross over the Manhattan shoreline on the bridge, we can see railroad tracks below us. These were originally built by the New York Central to gain access to the West Side (its Grand Central Terminal is on the East Side). Now they&#8217;re owned by Amtrak, which uses them for trains to Albany and Chicago. These tracks and the environment around them in the early 20th century inspired Robert Moses to pursue public works in the first place. When he built Riverside Park and the Henry Hudson Parkway, the tracks were the source of much of his funding, part of which came directly from the New York Central and another chunk of which came from Federal funds earmarked for the elimination of railroad grade crossings.</p>
<p><img src="http://www.jebruner.com/jerseyimages/Tracks.jpg" alt="" width="400" height="600" /></p>
<p>Upon arriving in Manhattan, we&#8217;re greeted by the sight of the George Washington Bridge Bus Terminal (in the foreground). Behind it are residential towers that are located directly on top of the Cross-Manhattan Expressway segment of I-95.</p>
<p><img src="http://www.jebruner.com/jerseyimages/BusTerminal.jpg" alt="" width="400" height="600" /></p>
<p>And now, a final view of the bridge.</p>
<p><img src="http://www.jebruner.com/jerseyimages/GWB2.jpg" alt="" width="400" height="600" /></p>
<p>The tour is over. The A train whisks me back downtown, and safely home to Park Slope.</p>
<p><a href="http://www.jebruner.com/?p=41">&lt;&lt; Back to Fort Lee</a><br />
<a href="http://www.jebruner.com/?p=16">&lt;&lt;&lt; Start at the beginning</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2007/06/new-jersey-7-george-washington-bridge/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New Jersey 6: Fort Lee</title>
		<link>http://jebruner.com/2007/06/new-jersey-6-fort-lee/</link>
		<comments>http://jebruner.com/2007/06/new-jersey-6-fort-lee/#comments</comments>
		<pubDate>Tue, 26 Jun 2007 19:30:34 +0000</pubDate>
		<dc:creator>Jon Bruner</dc:creator>
				<category><![CDATA[New York]]></category>
		<category><![CDATA[Architecture]]></category>
		<category><![CDATA[Bridges]]></category>
		<category><![CDATA[Fort Lee]]></category>

		<guid isPermaLink="false">http://www.jebruner.com/testpress/?p=41</guid>
		<description><![CDATA[The center of Fort Lee shifted north after the George Washington Bridge opened, and much of the newer city was built in what appears to have been one colossal belch of ill-considered, garage-based, post-war development.]]></description>
			<content:encoded><![CDATA[<p>Another bus ride brings me to Fort Lee, New Jersey, named for the Revolution-era fortifications from which the Continental Army defended the upper Hudson River. Today, the town is better known for hosting the western end of the George Washington Bridge and, I&#8217;m told, a substantial group of people affiliated with Columbia University who don&#8217;t want to pay Manhattan rents.</p>
<p>Fort Lee has a small-scale downtown area, complete with those indicators of prosperity, Starbucks and Borders. Many of the stores and restaurants serve the area&#8217;s large Korean population.</p>
<p><img src="http://www.jebruner.com/jerseyimages/FtLee1.jpg" alt="" width="600" height="400" /></p>
<p>But in some sense the real center of Fort Lee shifted north after the George Washington Bridge was built and the convenience of driving across it was realized. Much of the city was built in what appears to have been one colossal belch of ill-considered, garage-based, post-war development.</p>
<p><img src="http://www.jebruner.com/jerseyimages/FtLee2.jpg" alt="" width="600" height="400" /></p>
<p>But Fort Lee has one really, really huge thing going for it: Palisades Interstate Park stretches north from here, passing the New York state line. The southern tip of the park just south of the George Washington Bridge is called the Fort Lee Historic Park.</p>
<p>Entering the park from Fort Lee involves walking up a long set of stairs into a dark forest and emerging shortly to find a 1970s-style visitor center. It was here, the center explains, that George Washington defended the Hudson River (unsuccessfully) against the approaching British in 1776.</p>
<p><img src="http://www.jebruner.com/jerseyimages/VCenter.jpg" alt="" width="600" height="400" /></p>
<p>The museum includes everything you&#8217;d expect from a visitor center in a historic park, including lots of reproduction flags and big displays where small flashing lights show the positions of Washington&#8217;s troops. Classic.</p>
<p><img src="http://www.jebruner.com/jerseyimages/VCenter2.jpg" alt="" width="600" height="400" /></p>
<p>Just a hundred yards or so beyond the visitor&#8217;s center, the woods open up and an overlook provides a spectacular view of the river, the bridge, and the city.</p>
<p>The Bridge&#8217;s sinewy construction is magnificently displayed from here. It was one of the first major works of Swiss engineer Othmar Ammann (whose last major bridge was the Verrazano-Narrows). The towers had been intended to be clad in stonework designed by Cass Gilbert, but cost considerations left the steelwork exposed.</p>
<p><img src="http://www.jebruner.com/jerseyimages/GWB1.jpg" alt="" width="400" height="600" /></p>
<p>Beneath the Manhattan tower is the lighthouse immortalized in Hildegarde Swift&#8217;s <em>The Little Red Lighthouse and the Great Gray Bridge</em>.</p>
<p><img src="http://www.jebruner.com/jerseyimages/Lighthouse.jpg" alt="" width="400" height="600" /></p>
<p>From here, we can see two more major bridges: on the left in the picture below is the superstructure for the Hell&#8217;s Gate Bridge, a railroad bridge said to be one of the strongest in the world, on which Othmar Amman did some engineering work. To the right are the towers of Robert Moses&#8217;s great Triborough Bridge.</p>
<p><img src="http://www.jebruner.com/jerseyimages/Bridges.jpg" alt="" width="600" height="400" /></p>
<p>From here it&#8217;s easy to get to the sidewalks across the bridge.</p>
<p><strong><a href="http://www.jebruner.com/?p=43">Continue to the George Washington Bridge &gt;&gt;</a></strong><a href="http://www.jebruner.com/?p=39"><br />
&lt;&lt; Back to Mitsuwa Marketplace</a><br />
<a href="http://www.jebruner.com/?p=16">&lt;&lt;&lt; Start at the beginning</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jebruner.com/2007/06/new-jersey-6-fort-lee/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

