Displaying Census TIGER/line population data in mapbox

census2mapbox.rst

Displaying Census TIGER/line population data in mapbox

This gist covers how to get mapbox gl js web-based map to display population data from US Census data, specifically, from their TIGER/line product, which has ESRI shapefile and dbf (dBase III) data file

Here is an example of finished product: https://tin6150.github.io/inet-dev-class/mapbox/mapbox-census-pop.html

Steps

• Download Census TIGER/Line data for the state of your interest. eg, for

  • Delaware: https://catalog.data.gov/dataset/tiger-line-shapefile-2010-2010-state-delaware-2010-census-block-state-based-shapefile-with-hous
  • California: https://catalog.data.gov/dataset/tiger-line-shapefile-2010-2010-state-california-2010-census-block-state-based-shapefile-with-ho
  • all 51 "states": https://catalog.data.gov/dataset?collection_package_id=9fc17c61-d2cf-46ff-adac-3acfe67ed05a

• Optional, rename the census zip file to, say, delaware.zip (this name will show up in the layers in mapbox)
• Login to your mapbox studio interface. go to tileset.
• Create a new tileset by importing data, upload your delaware.zip file. For tutorial on importing tileset, see Mapbox Choropleth tutorial at https://www.mapbox.com/help/choropleth-studio-gl-pt-1/
• Style your data map as desired
• Publish your style.
• Create a html containing the java script that load your map.
• For interactive data display, utilize the map.on('mousemove'...) function.
• Data structure retrieval is via json tree traversal, you can gain insight of the data by using trick presented in https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/

Code snipplet

map.on('mousemove', function (e) {
    var states = map.queryRenderedFeatures(e.point, {
        layers: ['delaware-tabblock2010-10-pophu-a0nmlv']
    });
    if (states.length > 0) {
        document.getElementById('pd').innerHTML
        = "<strong> pop:"   + states[0].properties.POP10      + "</strong><p>"
        + "blockce: "       + states[0].properties.BLOCKCE    + "<br>"
        + "blockid10: "     + states[0].properties.BLOCKID10  + "<br>"
        + "countyfp10: "    + states[0].properties.COUNTYFP10 + "<br>"
        + "housing10: "     + states[0].properties.HOUSING10  + "<br>"
        + "partflg: "       + states[0].properties.PARTFLG    + "<br>"
        + "statefp10: "     + states[0].properties.STATEFP10  + "<br>"
        + "tractce10: "     + states[0].properties.TRACECE10  + "<br>"
        + "</p>";
    };
};

Other Examples

• Smelly. This map has modeling data about odor concentration dispersal for various solid waste to energy plants across california. JavaScript is used to dynamically load/unload necessary layer and fly to desired location. https://github.com/tin6150/smelly

Dealing with large census zip files

Mapbox tileset import limit import to 260 MB. CA is 408 MB, so that need to be split... The map for Medium with Census Block Group level population density end up using a .geojson that was 17M. It could have been imported into mapbox as Tileset (it converts during import), but ended up serving the .geojson via http by github.

Author

tin (at) berkeley.edu

Thanks

• Mapbox... this is a really awesome product!
• Census... amazing amount of data!

census_wilmington.png