Multivariate Mapping

The past few years, I lead a tutorial for the UCSF Family and Community Medicine Residents where we created maps of ED visits in California related to asthma (slides available: here; asthma map available: here). It's very powerful to view this information on a map, rather than in a table, where it's nearly meaningless unless you have your zip codes memorized.

But what if we wanted to compare this information to another variable, say income. Do zip codes with higher median household income, in general, have higher rates of asthma? One way of doing this is to create two maps (one for income, one for asthma) and hold them side-by-side, comparing each zip code individually. But that doesn't let us quickly query our map or really explore our data in much depth.

Enter Crosslet.js, a powerful and fun Javascript library that combines three other useful libraries: D3, Leaflet, and Crossfilter. Crosslet lets us connect our map to multiple variables for each polygon (in this case being zip code) and query across all of them simultaneously.

Check out the example below. Use the filters on the top right to select higher household incomes. Then, drag the blue box to the left and watch the histogram for asthma visits. See how the histogram showing asthma visits shifts to the right as we select poorer zip codes? I also included the percent of the population that identified as Black or African American in the latest census. This lets us quickly view the relationship between race and income, race and asthma, or all three variables together. (Stay tuned for a tutorial on how to scrape this data from sites like ZipAtlas using a simple and powefful API-generating tool called Kimono).