nycplanning / labs-regional-viz

An interactive mapping experience that highlights regional planning data and trends.

NYC Regional Visualization

An interactive mapping experience that highlights regional planning data and trends.

How we work

NYC Planning Labs takes on a single project at a time, working closely with our customers from concept to delivery in a matter of weeks. We conduct regular maintenance between larger projects.

Take a look at our sprint planning board to get an idea of our current priorities for this project.

How you can help

In the spirit of free software, everyone is encouraged to help improve this project. Here are some ways you can contribute.

• Comment on or clarify issues
• Report bugs
• Suggest new features
• Write or edit documentation
• Write code (no patch is too small)
  • Fix typos
  • Add comments
  • Clean up code
  • Add new features

Read more about contributing.

Requirements

You will need the following things properly installed on your computer.

• Git
• Node.js (with npm) version listed in .nvmrc
• Ember CLI
• Bower (bower install is required for the remarkable and highlightsjs dependencies)
• Google Chrome

Local development

• Clone this repo: git clone [email protected]:NYCPlanning/labs-regional-viz.git
• cd labs-regional-viz
• Install Dependencies: npm install (or yarn)
• Start the server: ember serve
  • Visit your app at http://localhost:4200.
  • Visit your tests at http://localhost:4200/tests.

Testing and checks

• ESLint - We use ESLint with Airbnb's rules for JavaScript projects

  • Add an ESLint plugin to your text editor to highlight broken rules while you code
  • You can also run eslint at the command line with the --fix flag to automatically fix some errors.

• Testing

  • run ember test --serve
  • Before creating a Pull Request, make sure your branch is updated with the latest develop and passes all tests

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Building

• ember build (development)
• ember build --environment production (production)

Deployment

• Create a Dokku remote: git remote add dokku dokku@{dokkudomain}:regional-viz
• Deploy to Dokku: git push dokku master

Contact us

You can find us on Twitter at @nycplanninglabs, or comment on issues, and we'll follow up as soon as we can. If you'd like to send an email, use [email protected]

labs-regional-viz's Issues

Add `bower install` to README

remarkable and highlightsjs require this

Popup details for the clicked geometry should stand out

We should make the clicked geometry's information bolder/more prominent in the popups.

Supporting Layers

Add two supporting layers:

• Regional Rail lines and stations, simple symbology (no need to distinguish between carriers, etc)
• Aerials - research options for a region-covering aerial tileset...

Add simple checkbox UI for these.

Load spinners

User Story

I want to see load spinners so I know something is happening after clicking

Description

We need load spinners to communicate that something is happening.

We need to decide whether to use tasks or promises or just use the normal loading substates

Idea: Add title bar when sidebar is closed

I think we need a more substantial title for the map when the sidebar is closed. With no sidebar, it's just a full screen webmap with a small legend, and I think adding a title bar near the top might make it clearer what the user is looking at.

Map-From-Id component getting bloated; refactor

1. Find abstract cases and move into utilities (breaks, buildPaint)
2. Move POJOs into top of component file or environment.js (highlightedFeatureLayer)
3. Use array destructuring where possible (see line 73)

Add logic for excluding geometries to choropleth configs

There is logic for excluding geometries that are not significant from visualizations.

This issue is complete when all rules are followed:

Jobs:

• Total Population - Municipality
• Population Density - Municipality
• Foreign Born - All
• Prime Labor Force Change, Subregion and County

Housing

• Total Housing Units - All
• Housing Units Permitted - Municipality

User sees legend change upon switching geog levels

Bivariate Choropleth for "balance"

May need special legend to visualize.

Implement geography-level switching

Config should indicate which geography levels are available for a given narrative.

Switching geography levels is effectively hiding/showing maps.

Need to figure out how to add "non-primary" layers to maps, where are they defined, etc?

Not all narratives will not have the same options for geometry-level switching, the UI should be config-driven, need to add geometry level property to config.

Config should also indicate which geometry level is default for a narrative.

Landing page map content

Customer would like the intro page to show the 3 geographies outlined.

User will see all data visualized at municipality, county, and subregion geographies

User can view all data variables within categories (People, Housing, Jobs) at municipality, county, and subregion geographies.

Basic tests

We should get like two tests in there because ppl are deploying broken apps to production

User sees an intro message on landing page

The default view of the app should show some introductory text about the app.

• "Here's what this app does…"
• "Something about People, Jobs, Housing…"
• Should there be a map? If so, what's on it?

We can stub in some filler.
@daragoldberg to provide final copy.

…

Previous/Next buttons need updated

Right now, they navigate through everything, but they should navigate through filtered narratives

Prototype JSON Config

We'd like the make the app 100% config-driven, so this issue exists to riff on what should be in a config to accomplish everything we need.

User can query load pages directly without narrative.

Add a query parameter for narrativeVisible.

User can view geographies' attribute values in a pop-up or column adjacent to map when geography is selected.

When user clicks a selectable geography (i.e. municipality, county, subregion), corresponding data in profile window will pull up.

Load spinners

We should communicate if loading is occurring

User can show/hide narrative

• The narrative-toggle points to the map route.
• The narrative-link points to the narrative route.

Houp1016 - Housing Permits by County 2010-2016 colors & breaks

Total Units Permits 2010 to 2016
<3,000 [ffffe0]
3,001 - 7,500 [ffffbe]
7,501 - 15,000 [ffd37f]
15,001 - 30,000 [ffaa00]

30,000 [ff5500]

Clip the input geographies to residential land use coverage

User Story

Clipping the input geographies should be clipped to residential land use coverage so dots wouldn't be placed on airports

Jobs Map Views

Highlight geometry boundaries when hovering

Add Sequential Narrative Naviagation

In sidebar, allow user to click previous and next to move between stories.

Color & Breaks for "% Population Change by County, 2010 - 2016"

Loss of 2.5% or more [d76423]
-2.5% to -1.0% [ffa555]
-0.9% to +0.9% [ffffe0]
+1.0% - +2.5% [b3e4ff]
+2.5% - +5% [5ab4ff ]
Gain of 5% or more [004da8]

Split config file into multiple files

The addon we use for the CMS helps to round up files and subdirectories into a single array of objects. We should take advantage of this.

People - Map View

User will see statistically signifcant values in font color BLACK, and other insignificant/not available values in GRAY

If variable values have no statistical significance, font color will be set to GRAY . Otherwise, font color will be BLACK.

CV > 20
Sig < 1.645

Users sees all maps (narrative or no) in site header menu.

Ack! I think we overthought the site-header looping through the maps. Every map should show up in the site header menu. It's only the narrative that should skip the ones with hasNarrative: false.

So this line:

{{#each-in (group-by "category" filteredMapLinks) as |category maps|}}

…can just be:

{{#each-in (group-by "category" model.maps) as |category maps|}}

…and we can remove the filteredMapLinks computed property.

/cc @allthesignals

Housing Map Views

User will see certain variables visualized at census tract geography, but clickable selection limited to closest corresponding municipality

The following variables would be visualized at the census tract geography, but census tract geography would not be selectable/has no corresponding profile. User click would correspond to the closest municipal geography (either boundary or within boundary):

Done:

Hou16 Total Housing Units, 2012-2016 5YR Average

• HouO16 Owner-occupied Housing Units, 2012-2016 5YR Average
• HouR16 Owner-occupied Housing Units, 2012-2016 5YR Average
• HouV16 Owner-occupied Housing Units, 2012-2016 5YR Average

Still needs to be made:

EmTot15 Total Employment 2015
EmPr15 Total Private Employment 2015

• EmOff15 Private Office-Based Employment 2015
• EmIns15 Private Institutional Employment 2015
• EmInd15 Private Industrial Employment 2015
• EmSer15 Private Retail, Leisure and Hospitality Employment 2015
• EmOth15 Private Other Services Employment 2015

When toggling a summary level mode and navigating, maps appear blank

1. Toggle municipality for a layer
2. Navigate to a layer without municipality

Map will be blank

There should be better handling for this

Create template-based popup to be shown on click

• Design work, figure where it will go
• Data work, figure what is in it (config-driven)
• Add query param so that the selected state is share-able

Legend Titles are missing

Rapid clicking "Next" then "Previous" throws errors, breaks app

Certain race conditions with mapbox gl's map instance being loaded and the framework attempting to update attributes lends itself to some unpredictable error states with the app...

In this case, if a user rapidly clicks "next" several times, then clicks "previous", there will be issues about missing sources.

Add sourcing info

• Implement source as a property in the configs
• Find some real estate for source in the narrative sidebar

This is a source "note", with intent that there is better sourcing w/links on the About page.

Legends showing duplicate top break

About page content

• Data sourcing + links
• Content text from Dara
• Download buttons for the data used in the maps

User can download data on the about page

Add links to each of the main tables used by the app on the About page.

Build out config for all narratives and all maps

Color & breaks for Private Employment Change 2000-2016

-15000
0
25000
75000
100000
1000000

note change from the pop change map
d76423
ffa555
e0f7ff
97d4f5
3c9beb
004da8

Add ESLint

ESLint rules aren't being enforced in the project. We should add those dependencies.

Site header menu shows categories and static pages

Currently, the site header menu lists all the map pages. It should instead show:

• People
• Jobs
• Housing
• About

Each of the map categories should have a dropdown which shows all the maps within that category so that the user can navigate directly to that map.

Idea: User can see tooltip with geometryname when hovering

Because we have no labels, it would be useful to do a very simple tooltip with the geometry's name when hovering.

The user can then get full information by clicking

User can view multiple variables as integrated (and not stacked/layered) dot density maps at census tract geography for current year

The following variables can be visualized as integrated and NOT layered dot density maps, with different colors for each attribute but consistent density values:

• Housing tenure - Owner occupied units (color 1), renter occupied units (color 2), vacant units (color 3)
• Total Private Employment by Sector - Office (color 1), Institutional (color 2), Industrial (color 3), Local Services (color 4), Other Services (color 5)

Note, layered maps would misrepresent allocation of employment or units

Alternate legend configs for dot density maps

User can view municipality-geo dot density change gains and losses. Municipalities with no statistical significance not visualized.

For all municipalities with dot density change visualizations, where variable representing statistical significance of change is greater than 1.645 ("variable"Sig>1.645):

-visualize data on the map with consistent size threshold

• represent gains in color 1
• represent losses in color 2

If "variable"Sig <1.645
-do not visualize municipality data on the map

Percent Legends are showing all Zeroes

User can navigate through a narrative with links to different map views.

User is presented with a narrative format that displays key takeways with explanation and allows for quickly visualizing the corresponding data.