rayl0707/plutoplus

A "clip & ship" download tool for NYC PLUTO tax lot datadata

plutoplus

A "clip & ship" download tool for NYC PLUTO tax lot data, allowing the user to download only the desired columns and geographic area. Hosted on github pages at http://chriswhong.github.io/plutoplus

Data

Current PLUTO dataset is 16v2, this app's data was last updated on 6 April 2017.

Why

PLUTO is an amazing NYC Open Data Resource that contains a wealth of information about the city's tax lots, including zoning, # of units, tax assessments, and more. It contains information for the city's 870,000+ properties, and includes over 80 attributes for each lot! That's a lot of open data!

MapPLUTO (PLUTO data plus geospatial data for each lot) is so large, that the Department of City Planning publishes it by borough as shapefiles. I built this downloader to help people get access to smaller chunks of the data quickly and easily for whatever they are working on.

How it Works

This app is essentially a SQL Builder, it compiles the user's settings into a PostGIS query that is sent to Carto's SQL API. The SQL looks like SELECT {selected PLUTO columns} FROM mappluto16v2 a WHERE ST_INTERSECTS({some clipping geometry}, a.the_geom). The placeholders are generated and filled in by the app when the user clicks Download.

Geography Options

The geography filter works by adding an ST_Intersects() statement to the WHERE clause of the SQL applied at download.

• Current Map View - Checks the current boundaries of the map by using leflet's getBounds()
• Neighborhood - Does a spatial join with the_geom for a specific neighborhood tabulation area hosted on the same carto server as the PLUTO table
• Draw a Polygon - Uses Leaflet Draw to allow the user to draw a custom polygon or rectangle on the map.

When a download button is clicked the resulting SQL query is logged in the console, so you can clearly see exactly how the app is grabbing the requested data.

Architecture

The app was originally built using jQuery to manage updates to the DOM, but was refactored to use React.js in early 2017. To continue to host the site on github pages, there is no build/bundle process, and the JSX files are transpiled in the browser with babel.

Dependencies

React & React-DOM - Facebook's declarative, efficient, and flexible JavaScript library for building user interfaces. jQuery - Because sometimes you still just need to show() and hide() things that react has no control over. React Tooltip - For super-easy-to-implement tooltips. Babel Core - For transpilation of react JSX scripts into browser-runnable javascript. cartodb.js - Carto's JS library, which handles communication with the Carto SQL and Maps APIs, and also includes Leaflet.js leaflet Draw - Geometry drawing plugin for leaflet.

Components

App.jsx - Parent component for the app, which also stores the current state and deals with inter-component communication Map.jsx - Controls the rendering of the map and various layers & controls Sidebar.jsx - Displays options UI to let the user specify Geography, Columns, and Download Format.

Help

I need help writing tests. If you're good at that, I would love to learn how you would test this code.

Contact Me

If you like this project, or if you hate it, let me know by tweeting to @chris_whong. Pull requests are welcomed! This project was built with the Carto web mapping platform. Write-up at chriswhong.com Support open Data!