CitySDK Austin Parks

This is a demonstration app forked from Austin Park Equity to give a mapping example using the CitySDK from Census.gov. We'd love for you to try to plug in data from your city.

See what the live Austin demo lookes like.

What is the CitySDK?

CitySDK is a toolbox for civic innovators to connect local and national public data developed by the US Census Department. You should explore their wonderful guides and documentation.

• CitySDK
• CitySDK Guides
• CitySDK Code Examples

Requests

Here is an example of the request we are making for demographic data in Austin, Texas (Travis County):

var sdk = new CitySDK();
var censusModule = sdk.modules.census;
censusModule.enable(config.citySDK_token);

var request = {
  "lat": config.city_lat,
  "lng": config.city_lng,
  "level": "county",
  "sublevel": "true",
  "api" : "acs5",
  "variables": [
    "population",  // Total Population
    "income",  // Median Income
    "poverty_family",  // Number of Families Below Poverty
    "poverty",  // Number of x Below Poverty
    "B01001_003E",  // Male:!!Under 5 years
    "B01001_004E",  // Male:!!5 to 9 years
    "B01001_005E",  // Male:!!10 to 14 years
    "B01001_006E",  // Male:!!15 to 17 years
    "B01001_027E",  // Female:!!Under 5 years
    "B01001_028E",  // Female:!!5 to 9 years
    "B01001_029E",  // Female:!!10 to 14 years
    "B01001_030E",  // Female:!!15 to 17 years
    "C27012_001E",  // Total Health Insurance Coverage Status and Type by Work Experience by Age
  ]
};

censusModule.GEORequest(request, function callback(response) {
   // Do stuff
});

This cURL command would make the same type of request:

$ curl 'http://api.census.gov/data/2013/acs5?get=NAME,B01003_001E,B19013_001E,B17012_002E,B17001_002E,B01001_003E,B01001_004E,B01001_005E,B01001_006E,B01001_027E,B01001_028E,B01001_029E,B01001_030E,C27012_001E&for=tract:*&in=county:453+state:48&key=YOUR_TOKEN'

GET http://api.census.gov/data/2013/acs5
    get=NAME,B01003_001E,B19013_001E,B17012_002E,B17001_002E,B01001_003E,B01001_004E,B01001_005E,B01001_006E,B01001_027E,B01001_028E,B01001_029E,B01001_030E,C27012_001E
    for=tract:*
    in=county:453+state:48
    key=YOUR_TOKEN

Forking this repo

1. Getting Started

Find park data: The first thing you should do is look for park data from your city. Many cities and counties have a data portal. In Austin, we found raw park GIS data through the City's Socrata Open Data Portal.

Often times, this data will be in a format best for analysis with desktop GIS software. For this web map, the ideal data type is geojson. But if it is in Shapefile format, that is ok too. But we'll worry about converting the file type later. Check out this blog post to learn why .geojson is nice and to learn how to convert data into geojson.

Fork the repo: Did you find a .geojson, .json, .shp (Shapefile), or .kml file with park polygons? Awesome. We'll make sure to convert that data into the best format in a later step. Now, you should go ahead and fork this repo to your own Github account. Once you've forked the repo and cloned it down from your own Github repo to your local machine, go ahead and follow the steps below...

If you couldn't find some park data, but you still want to play along. Try using this data from Oakland.

2. Running Code Locally

1. npm is required

npm is Node's package manager. You can install Node at their site or with a command like brew install node if you use Homebrew.

2. webpack is required webpack is used to bundle assets

$ npm install -g webpack

3. install npm dependencies

Install the npm dependencies:

$ npm install

4. run the build system && development server

To bundle assets, run the local server and see the app in your browser:

$ npm start

NPM will serve the app at http://localhost:8080.

3. Import you own park data

Back in Step 1, we wanted to make sure you could find park data from your city. Now's the time to import it into the app. We save our GIS file into a directory called /data. See that directory here on Github. Now that your raw data is imported, its time to convert your data to .geojson (if its not already). I suggest you follow the instructions in this blog if you haven't used ogr2ogr or coverted Shapefiles to geojson before. Last step here, rename your file to parks.geojson. This is what the code is expecting that park layer to be called. You'll need to either delete or rename the Austin park layer that came down with the repo.

4. Config and customize the app to your city

Update the config file. Go into the config file and update things like the coordinates of your city and your own CitySDK token (which you should request here).

Build new features. Add new features. The main javascript code live in the js/app.js file

Austin Data Sources

• City of Austin, Parks and Recreation Department (PARD) Data
  • Basic Park Feature Layer via ArcGIS Server
    • Also available on data.austintexas.gov
    • This data is used across the app to produce park shapes.

Global Data Sources

• Open Street Map Park Data:
  • We use the Overpass API via the "query-overpass" plugin to extract data. Here's the commit that added OSM data if you're curious how.
• Census.gov Data
  • CitySDK API

Unlicense

Released to the public domain under the Unlicense by Open Austin, 2015.