Ratmap – Design – Lessons Learned

View Github Repository Open presentation in a new window

benjmyers

See all presentation from benjmyers

Ratmap – Design – Lessons Learned

0 0

ratmap-presentation

Presentation of benjmyers.com/ratmap for BrooklynJS

On Github benjmyers / ratmap-presentation

Ratmap

Meredith M Myers | @meredithmmyers

A simple AngularJS application that allows users to view and explore rat sightings in NYC

meredithmmyers.com/ratmap

This presentation is available at meredithmmyers.com/ratmap-presentation

Building an Angular application to visualize (rat) data

  • Technology stack
  • Rat data
  • Presentation

Technology

Angular

Bower

Gulp

Leaflet

Bootstrap

Pages

Data

  • NYC Dept of Environmental Protection 311 Service Requests from 2010 to present
  • Updated daily
  • Accessed using Socrata's Open Data API (SODA)
  • Easy access of data and usage of filters, queries, and aggregation 
    http://data.cityofnewyork.us/resource/3q43-55fe?$limit=10000

Presentation

  • Visualization appearance
  • User interaction
  • Overall page presentation

Visualization appearance

Change tile layer for cleaner display

http://esri.github.io/esri-leaflet

Cluster markers for faster analysis & cleaner display

https://github.com/Leaflet/Leaflet.markercluster

Custom heatmap colors

https://github.com/Leaflet/Leaflet.heat

User interaction

  • Remove marker popups

  • Select key information

    • Dwelling type
    • Report date
    • Address or cross street
    • Borough

Overall page

  • Colors
  • Fonts
  • Responsiveness

Ongoing work

Pull requests! Fork! Learn!

github.com/meredithmmyers/ratmap

Thank You!

meredithmmyers.com | @meredithmmyers

Ratmap Meredith M Myers | @meredithmmyers