/mark44

🗺🔍 Hack Austin Project — Census block explorer

Primary LanguageCSS

Interface, inspired by Samaritan

Austin Census Block Explorer

This is an interface built using Mapbox to display census blocks, and explore their metadata. Future iterations might also display data layers on top of those census blocks, as well as controls for the visualization.

This project was built with Peter Weyland, Dave Thompson, and Alex Price at the 2017 Hack Austin hackathon, in Austin, Texas.

How we built this

You can read about the background and process on Medium.

We use Mapbox for maps and block rendering, United States Census Bureau data for the blocks, and React + Next.js to bring it all together.

Launching a development environment

  1. Run yarn to install dependencies
  2. Add the /config directory to root
  3. Add a tokens.js file to /config. It should look like this:
const MAPBOX_ACCESS_TOKEN = 'Your token here'
// Create a token at mapbox.com/studio/account/tokens

module.exports = {
  MAPBOX_ACCESS_TOKEN
}
  1. Run yarn run dev
  2. Open localhost:3000
  3. ???
  4. Profit

Uploading your own data

  1. Create a Mapbox account
  2. Upload the ShapeFile from the /data directory as a Tileset in Mapbox. Here's a link.
  3. Generate an access token here.
  4. You'll need to change some references in /components/map/index.js, as the current example uses census block groups for Austin, off of my account.